前言
注意这个里介绍的是AndroidX的com.google.android.material.bottomnavigation.BottomNavigationView
xml布局中
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation_view" android:layout_width="0dp" android:layout_height="wrap_content" app:menu="@menu/p_home_bottom_menu" app:labelVisibilityMode="labeled" app:itemTextColor="@color/fontBlack1" app:itemTextAppearanceActive="@style/Active" app:itemTextAppearanceInactive="@style/Inactive" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> </com.google.android.material.bottomnavigation.BottomNavigationView>
- app:labelVisibilityMode="labeled" 标签显示模式,其实就是改变点选后的整体动画,推荐选中labeled,默认的太恶心了超过3个item就会出现超丑的动画
- app:itemTextColor="@color/fontBlack1" item文本的颜色
- app:itemTextAppearanceActive="@style/Active" 设置选中后的item效果
- app:itemTextAppearanceInactive="@style/Inactive" 设置未选中的item效果
style
<style name="Active" parent="@style/TextAppearance.AppCompat.Caption"> <item name="android:textSize">@dimen/font_size_17</item> </style> <style name="Inactive" parent="@style/TextAppearance.AppCompat.Caption"> <item name="android:textSize">@dimen/font_size_11</item> </style>
只是改变文字大小
menu
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/home" android:title="首页" android:icon="@mipmap/ic_admission"/> <item android:id="@+id/notice" android:title="通知" android:icon="@mipmap/ic_head"/> <item android:id="@+id/circle" android:title="圈子" android:icon="@mipmap/ic_temp"/> <item android:id="@+id/my_info" android:title="我的" android:icon="@mipmap/ic_notice"/> </menu>
图标被Tint颜色覆盖
图标添加后你会发现图标会被Tint颜色覆盖变成灰色的图标,下面这两行代码解决这个问题
mBottomNavigationView = findViewById(R.id.bottom_navigation_view); mBottomNavigationView.setItemIconTintList(null);
如果你需要改变选中图标
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/ic_home_page_normal"/> <item android:state_checked="true" android:drawable="@drawable/ic_home_page_selected"/> </selector>
在menu的item上调用
<item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" android:title="@string/title_home" />
两个点击监听
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.
先看看谷歌的这个布局文件是怎么做的:
https://github.com/dandar3/android-support-design/blob/master/res/layout/design_bottom_navigation_item.xml
不列出来的. 然后依葫芦画瓢, 实现自己的一份:
<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:override="true"> <ImageView android:id="@+id/icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/design_bottom_navigation_margin" android:layout_marginBottom="@dimen/design_bottom_navigation_margin" android:duplicateParentState="true" /> <TextView android:id="@+id/smallLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:layout_marginBottom="0dp" android:duplicateParentState="true" android:text="small" /> <TextView android:id="@+id/largeLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:layout_marginBottom="0dp" android:duplicateParentState="true" android:text="large" android:visibility="invisible" /> <!--</FrameLayout>--> </merge>
而且, 刚才上面提到的字体大小的控制, 也完全可以通过这种方式来实现, 在dimens.xml中自定义一个同名的项目, 替换原来的默认值.
<dimen tools:override="true" name="design_bottom_navigation_text_size">14sp</dimen> <dimen tools:override="true" name="design_bottom_navigation_active_text_size">14sp</dimen>
好了, 解决了以上几个问题之后, 我的底部tab栏终于实现了.
end
本文来自博客园,作者:观心静 ,转载请注明原文链接:https://www.cnblogs.com/guanxinjing/p/11027145.html