一眼看懂底部导航栏BottomNavigationView
效果图
这种底部导航栏实现思路比较清晰简单,大致的思路都在代码注释中说明了.比较值得注意的有menu文件、滑动过程处理、滑动监听,其他的都和一般的导航栏差不多
1.引入依赖
implementation 'com.android.support:design:25.0.0'
2.布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
style="@style/BadgeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemIconTint="#3a6eb3"
app:itemTextColor="#3a4069"
app:menu="@menu/bottom" />
</LinearLayout>
2.1 menu文件，用于初始化导航栏图标id等
创建文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/device_manager"
android:icon="@drawable/device_manager"
android:title="设备管理"
android:visible="false" />
<item
android:id="@+id/set_rule"
android:icon="@drawable/set_rule"
android:title="规则设定" />
<item
android:id="@+id/device_control"
android:icon="@drawable/device_control"
android:title="设备控制" />
<item
android:id="@+id/personal_manager"
android:icon="@drawable/personal_manager"
android:title="人员管理" />
<item
android:id="@+id/more"
android:icon="@drawable/more"
android:title="其他设置" />
</menu>
3.函数中代码
3.1 数据域
/**
* 底部导航栏
*/
private ViewPager viewPager;
private BottomNavigationView bottomNavigationView;
private FragmentPagerAdapter mPagerAdapter;
3.2 调用函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
3.3 初始化View
1.两个初始化和两个监听
2.初始化碎片以及适配器
3.设置适配器
private void initView() {
private void initView() {
/**
* 初始化底部导航栏
*/
bottomNavigationView = findViewById(R.id.navigation);
//设置导航切换监听
bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
/**
* viewpager初始化
*/
viewPager = findViewById(R.id.main_viewpager);
/**
* ViewPager的监听
*/
setViewPagerListener();
/**
* fragment相关
*/
initFragment();
viewPager.setAdapter(mPagerAdapter); //设置适配器
viewPager.setOffscreenPageLimit(5); //预加载所有页
}
3.4 完整代码
/**
* 底部导航栏
*/
private ViewPager viewPager;
private BottomNavigationView bottomNavigationView;
private FragmentPagerAdapter mPagerAdapter;
/**
* onCreate
*
* @param savedInstanceState
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
/**
* 初始化底部导航栏
*/
bottomNavigationView = findViewById(R.id.navigation);
//设置导航切换监听
bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
/**
* viewpager初始化
*/
viewPager = findViewById(R.id.main_viewpager);
/**
* ViewPager的监听
*/
setViewPagerListener();
/**
* fragment相关
*/
initFragment();
viewPager.setAdapter(mPagerAdapter); //设置适配器
viewPager.setOffscreenPageLimit(5); //预加载所有页
}
private void initFragment() {
//底部导航栏有几项就有几个Fragment
final ArrayList<Fragment> fgLists = new ArrayList<>(5);
fgLists.add(new GateListFragment());
fgLists.add(new RuleSettingFragment());
fgLists.add(new DeviceControlFragment());
fgLists.add(new PersonalManagementFragment());
fgLists.add(new MoreFragment());
//设置适配器用于装载Fragment,ViewPager的好朋友
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fgLists.get(position); //得到Fragment
}
@Override
public int getCount() {
return fgLists.size(); //得到数量
}
};
}
//这里有3中滑动过程,我们用点击后就可以
private void setViewPagerListener() {
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//滑动页面后做的事，这里与BottomNavigationView结合，使其与正确page对应
bottomNavigationView.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//判断选择的菜单,点击哪个就设置到对应的Fragment
private BottomNavigationView.OnNavigationItemSelectedListener changeFragment = new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.device_manager: {
viewPager.setCurrentItem(0);
return true;
}
case R.id.set_rule: {
viewPager.setCurrentItem(1);
return true;
}
case R.id.device_control: {
viewPager.setCurrentItem(2);
return true;
}
case R.id.personal_manager: {
viewPager.setCurrentItem(3);
return true;
}
case R.id.more: {
viewPager.setCurrentItem(4);
return true;
}
}
return false;
}
};
感谢阅读！如有不合理之处还望指出,谢谢！
侵删