本demo系列博客只提供代码,便于直接使用
此bottom navigation来自于material design的组件
material design组件库
官网对于每个组件的用法都有详细描述
不再描述原理,直接上代码:
关于xml和java文件中的所有变量都需要进行自定义,以下每份代码都属于不同的文件
- 包含bottom navigation 和viewPager的xml:
<androidx.viewpager.widget.ViewPager
android:id="@+id/pager_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</androidx.viewpager.widget.ViewPager>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="@dimen/tabHgt"
style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
app:itemTextColor="@drawable/bottom_navigation_colors"
app:menu="@menu/navigate_menu"/>//自定义res/menu/文件
- 显示bottom navigation的navigate_menu.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/navi_pick"
android:title="@string/tab_pick"/>
<item android:id="@+id/navi_create"
android:title="@string/tab_create"/>
<item android:id="@+id/navi_mine"
android:title="@string/tab_mine"/>
</menu>
- 需要编写对应数量的fragment页面,和普通的layout xml一样,不再提供
- 还需要编写对应数量的继承Fragment的.java文件
View rootView;
//在onCreateView方法中加入以下内容,使用rootView是为了防止多次加载
if(rootView==null){
System.out.println("rootview=null");
rootView=inflater.inflate(R.layout.creation_fragment,container,false);
}else{
System.out.println("rootview!=null");
ViewGroup parent=(ViewGroup) rootView.getParent();
if(parent!=null){
parent.removeView(rootView);
}
}
return rootView;//一定要返回,不要使用默认的返回值
- 将viewPager、navigation和fragment联系在一起的java文件:
//定义变量
ViewPager pager;
BottomNavigationView bottomNavigation;
List<Fragment> fragmentList;
//在onCreate函数中初始化变量
pager=findViewById(R.id.pager_view);
bottomNavigation=findViewById(R.id.navigation_view);
initFragments();
initPager();
initBotNavView();
//初始化fragment列表
private void initFragments(){
//以下的fragment数量和名称按照实际情况更改
fragmentList= new ArrayList<>(3);
fragmentList.add(new Fragment1());
fragmentList.add(new Fragment2());
fragmentList.add(new Fragment3());
}
//初始化viewPager,需要使用自定义的adapter来和fragment创造联系,使用addOnPageChangeListener来触发navigation的变化(适用在直接滑动页面的时候改变导航栏)
private class CusPagerAdapter extends FragmentPagerAdapter{
public CusPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
private void initPager(){
pager.setAdapter(new CusPagerAdapter(getSupportFragmentManager()));//不要忘了这里
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//set bottom navigation to correctly respond to view pager
bottomNavigation.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//使navigation改变的时候可以触发viewPager的变化
void initBotNavView(){
bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()){
case R.id.navi_pick:
pager.setCurrentItem(0);
return true;
case R.id.navi_create:
pager.setCurrentItem(1);
return true;
case R.id.navi_mine:
pager.setCurrentItem(2);
return true;
}
return false;
}
});
}