【Android】Material Design 之二 BottomNavigationView使用

上午记录了TabLayout的使用，简单实现了一个顶部可滑动的导航效果，突然想到Material Design的另一个控件BottomNavigationView，可以实现类似淘宝、微信、QQ、京东的底部导航栏的效果，下面就来介绍一下使用BottomNavigationView来实现底部导航栏的效果。

使用该控件同样需要添加Material Design的依赖：（运行环境是在Android Studio 3.0）

implementation 'com.android.support:design:28.0.0-alpha1'

因为BottomNavigationView控件是通过app:menu属性，使用Menu的形式为底部导航栏指定元素的，所以第一步就要新建一个菜单xml文件，在menu文件夹下新建bottom_navigation_view.xml，布局内容如下：

<?xml version="1.0" encoding="utf-8"?>

BottomNavigationView一般也是和ViewPager+Fragment搭配使用，所以第二步就写下布局文件，

activity_bottom_navigation_view.xml布局内容如下：

<?xml version="1.0" encoding="utf-8"?>

创建BottonNaviFragment继承自Fragment，其布局文件fragment_bottom_navi.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>

BottonNaviFragment.java文件如下：

@SuppressLint("ValidFragment")public class BottonNaviFragment extends Fragment {    private TextView textView;    private String title;    public BottonNaviFragment(String title) {        this.title = title;    }    @Nullable    @Override    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.fragment_bottom_navi,container,false);        textView=view.findViewById(R.id.tv_content);        return view;    }    @Override    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        textView.setText(title);    }}

创建Fragment适配器文件FragmentAdapter.java文件如下：

public class FragmentAdapter extends FragmentPagerAdapter {    private List list;     //存放ViewPager中要填充的Fragment    public FragmentAdapter(FragmentManager fm,List list) {        super(fm);        this.list=list;    }    @Override    public Fragment getItem(int i) {        return list.get(i);    }    @Override    public int getCount() {        return list.size();    }}

BottomNavigationViewActivity.java文件如下：

public class BottomNavigationViewActivity extends AppCompatActivity {    private ViewPager viewPager;    private BottomNavigationView bottomNavigationView;    private MenuItem menuItem;  //菜单子项    private List list;     private FragmentAdapter fragmentAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bottom_navigation_view);        initView();        initData();    }    private void initView() {        viewPager=findViewById(R.id.viewpager);        bottomNavigationView=findViewById(R.id.bottom_navigation_view);                //viewPager滑动监听        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                if(menuItem!=null){                    menuItem.setChecked(false);                }else{                    bottomNavigationView.getMenu().getItem(0).setChecked(false);                }                menuItem=bottomNavigationView.getMenu().getItem(position);                menuItem.setChecked(true);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        //bottmNavigationView菜单选择监听        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch(item.getItemId()){                    case R.id.item_home:                        viewPager.setCurrentItem(0);                        break;                    case R.id.item_music:                        viewPager.setCurrentItem(1);                        break;                    case R.id.item_find:                        viewPager.setCurrentItem(2);                        break;                }                return false;            }        });    }    private void initData() {        list=new ArrayList<>();        list.add(new BottonNaviFragment("首页"));        list.add(new BottonNaviFragment("音乐"));        list.add(new BottonNaviFragment("发现"));        fragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),null,list);        viewPager.setAdapter(fragmentAdapter);    }}

到此运行下项目，效果如图：

默认元素选中时图标、文字的颜色为@color/colorPrimary，如果我们想改变导航栏中图标、文字在选中和未选中时的颜色，可以通过BottomNavigationView控件的两个属性去实现，分别是

app:itemTextColor=""app:itemIconTint=""

为了方便效果展示，在这里我们设定图标、文字在选中时颜色为红色，未选中时为黑色，涉及到颜色选择，需要在color文件夹下新建一个颜色选择器bottomnavigation_select.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>

然后在activity_bottom_navigation_view.xml中的BottomNavigationView控件下，增加属性：

app:itemTextColor="@color/bottomnavigation_select"app:itemIconTint="@color/bottomnavigation_select"

运行一下，效果如图：

以上是导航栏只有3个元素时效果，下面将元素增加到4个，运行效果如图：

从图中可以发现，当导航栏中元素增加到4个时，效果就不一样了，只有当元素选中以及滑动到对应元素时，文字才会出现，未选中时，文字是隐藏的。这是因为官方的BottomNavigationView默认有个放大的ShiftingMode效果，但是尚未支持代码层级的切换。在3个元素及以下时是默认关闭的，而到了4个及以上时就会开启ShiftingMode效果，并且没有任何属性和方法去修改ShiftingMode，此时我们只能通过反射来修改：

新建一个BottomNavigationView的帮助者类BottomNavigationViewHelper.java，代码如下：

import android.support.design.internal.BottomNavigationItemView;import android.support.design.internal.BottomNavigationMenuView;import android.support.design.widget.BottomNavigationView;import android.util.Log;import java.lang.reflect.Field;/** * 新建一个BottomNavigationview帮助者类， * 通过反射来修改ShiftingMode */public class BottomNavigationViewHelper {    public static void disableShiftMode(BottomNavigationView view) {        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);        try {            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");            shiftingMode.setAccessible(true);            shiftingMode.setBoolean(menuView, false);            shiftingMode.setAccessible(false);            for (int i = 0; i < menuView.getChildCount(); i++) {                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);                //noinspection RestrictedApi                item.setShiftingMode(false);                // set once again checked value, so view will be updated                //noinspection RestrictedApi                item.setChecked(item.getItemData().isChecked());            }        } catch (NoSuchFieldException e) {            Log.e("BNVHelper", "Unable to get shift mode field", e);        } catch (IllegalAccessException e) {            Log.e("BNVHelper", "Unable to change value of shift mode", e);        }    }}

然后在 BottomNavigationViewActivity.java中调用BottomNavigationViewHelper的静态方法disableShiftMode(）即可。

bottomNavigationView=findViewById(R.id.bottom_navigation_view);BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

当你的build.gradle中依赖库 'com.android.support:appcompat-v7:X.0.0-rc02' 中X小于28时，以上代码是没有问题的，当X等于28时（我使用的是Android Studio 3.0,依赖包是implementation 'com.android.support:appcompat-v7:28.0.0-rc02'），item.setShiftingMode(false)就会报Cannot resolve method 'setShiftingMode(Boolean)'的错误，借鉴了

https://stackoverflow.com/questions/51342200/cannot-resolve-method-setshiftingmodeboolean-in-bottomnavigationview的解决方式，将BottomNavigationViewHelper.java代码修改如下：

public class BottomNavigationViewHelper {    @SuppressLint("RestrictedApi")    public static void removeNavigationShiftMode(BottomNavigationView view) {        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);        menuView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);        menuView.buildMenuView();    }}

同样的，然后在 BottomNavigationViewActivity.java中调用BottomNavigationViewHelper的静态方法removeNavigationShiftMode()

bottomNavigationView=findViewById(R.id.bottom_navigation_view);BottomNavigationViewHelper.removeNavigationShiftMode(bottomNavigationView);

一番修改之后，再运行下项目，看下效果：

此时，4个元素的效果和3个元素的效果就一样啦。

最后关于BottomNavigationView控件作点补充：

1、如果要设置底部导航栏的背景颜色，可以通过BottomNavigationView的属性app:itemBackground来设置，默认是当前主题的背景色，白色or黑色。

2、官方建议导航栏元素item个数为3-5个，最多5个，如果设置6个会直接报错。设置2个则不会报错，但是如果是2个的话不建议使用该控件。

3、如果想实现元素是不带文字的图标，可以不设置菜单的title值，例如，不设置“发现”的元素文字，运行后效果如下方：

好啦，关于BottomNavigationView实现底部导航栏的使用就介绍到这里啦。

更多相关文章

随机推荐