使用谷歌官方BottomNavigationView实现非md风
先看效果
ezgif.com-video-to-gif.gif
谷歌原始模板代码出来是这样的:
image.png
我知道, 这个跟谷歌官方建议的效果完全不同, 但是奈何公司的设计就喜欢这种风格, 其实国内的安卓app风格大都是在模仿ios.
废话不多说, 下面列举下遇到的问题
1. 怎么实现按下态的图标显示.
根据官方模板, 几个按钮tab的定义在navigation.xml中. 如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>
修改这里的icon设置, 就可以修改图标了 . 比如这样:
../drawable/ic_home_black_24dp.xml
<?xml version="1.0" encoding="utf-8"?>
<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>
两种状态的图标分别是:
image.png
image.png
因为这么修改了, 肯定就没问题了, 然而出来的效果是这样的:
image.png
image.png
为什么? 因为这里的图标要求比较严格, 必须是镂空的, 不能自定义颜色. 因为会有tint, 所以所有不镂空的地方都会变成统一的tint颜色.
怎么办? 说服设计接受这种高大上的风格? 好像不太可能.
研究了一下(百度搜了一圈), 发现这样可以:
调用BottomNavigationView的setItemIconTintList(null) 传递null进去.
kotlin代码navigation.itemIconTintList=null
这个问题算是解决了.
2. 选中一个tab标签时, 不要有图标变大的效果.
这个可以通过看BottomNavigationView源码知道, 在布局文件中设置app:labelVisibilityMode="labeled"可以实现
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="50dp"
android:paddingTop="0dp"
android:background="#ffffff"
app:itemIconSize="33dp"
app:itemTextAppearanceActive="@style/bottom_tab_title_active"
app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_menu"
app:labelVisibilityMode="labeled"/>
这个布局文件, 还包括了
修改图标大小: app:itemIconSize="33dp"
修改标签选中和非选中状态的字体颜色, 字体大小:
app:itemTextAppearanceActive="@style/bottom_tab_title_active"
app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive"
关于设置字体大小, 后面会看到还有另一种方法.
3. 调整图标和标题的位置.
原始的效果, 虽然还可以, 但是我们高标准的设计小妹妹接受不了. 尝试说服她? 不可能的!
这个问题搜了半天也没找到怎么处理的办法. 甚至打算放弃这东西了, 自己实现一个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栏终于实现了.
