前言

　　注意这个里介绍的是AndroidX的com.google.android.material.bottomnavigation.BottomNavigationView

xml布局中

 

• app:labelVisibilityMode="labeled" 　　标签显示模式,其实就是改变点选后的整体动画,推荐选中labeled,默认的太恶心了超过3个item就会出现超丑的动画
• app:itemTextColor="@color/fontBlack1"  　　item文本的颜色
• app:itemTextAppearanceActive="@style/Active" 设置选中后的item效果
• app:itemTextAppearanceInactive="@style/Inactive"  设置未选中的item效果

style

只是改变文字大小

menu

图标被Tint颜色覆盖

图标添加后你会发现图标会被Tint颜色覆盖变成灰色的图标,下面这两行代码解决这个问题

mBottomNavigationView = findViewById(R.id.bottom_navigation_view);        mBottomNavigationView.setItemIconTintList(null);

 

如果你需要改变选中图标

在menu的item上调用

 两个点击监听

mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {                Log.e("ytzn", "onNavigationItemSelected: 选中"+menuItem.getItemId() );                return true;            }        });        mBottomNavigationView.setOnNavigationItemReselectedListener(new BottomNavigationView.OnNavigationItemReselectedListener() {            @Override            public void onNavigationItemReselected(@NonNull MenuItem menuItem) {                Log.e("ytzn", "onNavigationItemSelected: 选中状态再次选中"+menuItem.getItemId() );            }        });

setOnNavigationItemSelectedListener 是点击未选择的item后的回调,返回的boolean是决定是否启用选中效果或者放大效果

setOnNavigationItemReselectedListener 是如果已经是选中状态后,在点击一次后的回调

 

调整图标和标题的位置

---

原始的效果, 虽然还可以, 但是我们高标准的设计小妹妹接受不了. 尝试说服她? 不可能的!

这个问题搜了半天也没找到怎么处理的办法. 甚至打算放弃这东西了, 自己实现一个LinearLayout也能把这需求搞定啊, 何苦这么费劲. 但是之前的经历告诉我, 自己实现的话, 需要负责view的状态保存和恢复, 这简直太恶心了.

继续看它的源码实现, 发现原来谷歌的这个东西是完全可以自定制的. 基本上包括所有的ui设置.

在BottomNavigationItemView这个类中, 发现每个item的布局加载:

LayoutInflater.from(context).inflate(layout.design_bottom_navigation_item, this, true);

我们可以自定义这个布局, 替换原始实现, 从而随意的定制自己的UI.

先看看谷歌的这个布局文件是怎么做的:

不列出来的. 然后依葫芦画瓢, 实现自己的一份:

而且, 刚才上面提到的字体大小的控制, 也完全可以通过这种方式来实现, 在dimens.xml中自定义一个同名的项目, 替换原来的默认值.

          
           14sp
          
          
           14sp
          

好了, 解决了以上几个问题之后, 我的底部tab栏终于实现了.

end