使用谷歌官方BottomNavigationView實現(xiàn)非md風格的底部狀態(tài)欄

先看效果

ezgif.com-video-to-gif.gif

谷歌原始模板代碼出來是這樣的:

image.png

我知道, 這個跟谷歌官方建議的效果完全不同, 但是奈何公司的設計就喜歡這種風格, 其實國內(nèi)的安卓app風格大都是在模仿ios.

廢話不多說, 下面列舉下遇到的問題

1. 怎么實現(xiàn)按下態(tài)的圖標顯示.

根據(jù)官方模板, 幾個按鈕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>

兩種狀態(tài)的圖標分別是:

image.png

因為這么修改了, 肯定就沒問題了, 然而出來的效果是這樣的:

image.png

為什么? 因為這里的圖標要求比較嚴格, 必須是鏤空的, 不能自定義顏色. 因為會有tint, 所以所有不鏤空的地方都會變成統(tǒng)一的tint顏色.
怎么辦? 說服設計接受這種高大上的風格? 好像不太可能.
研究了一下(百度搜了一圈), 發(fā)現(xiàn)這樣可以:
調(diào)用BottomNavigationView的setItemIconTintList(null) 傳遞null進去.
kotlin代碼navigation.itemIconTintList=null
這個問題算是解決了.

2. 選中一個tab標簽時, 不要有圖標變大的效果.

這個可以通過看BottomNavigationView源碼知道, 在布局文件中設置app:labelVisibilityMode="labeled"可以實現(xiàn)

<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"
修改標簽選中和非選中狀態(tài)的字體顏色, 字體大小:

        app:itemTextAppearanceActive="@style/bottom_tab_title_active"
        app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive"

關于設置字體大小, 后面會看到還有另一種方法.

3. 調(diào)整圖標和標題的位置.

原始的效果, 雖然還可以, 但是我們高標準的設計小妹妹接受不了. 嘗試說服她? 不可能的!
這個問題搜了半天也沒找到怎么處理的辦法. 甚至打算放棄這東西了, 自己實現(xiàn)一個LinearLayout也能把這需求搞定啊, 何苦這么費勁. 但是之前的經(jīng)歷告訴我, 自己實現(xiàn)的話, 需要負責view的狀態(tài)保存和恢復, 這簡直太惡心了.
繼續(xù)看它的源碼實現(xiàn), 發(fā)現(xiàn)原來谷歌的這個東西是完全可以自定制的. 基本上包括所有的ui設置.

在BottomNavigationItemView這個類中, 發(fā)現(xiàn)每個item的布局加載:
LayoutInflater.from(context).inflate(layout.design_bottom_navigation_item, this, true);
我們可以自定義這個布局, 替換原始實現(xiàn), 從而隨意的定制自己的UI.
先看看谷歌的這個布局文件是怎么做的:
https://github.com/dandar3/android-support-design/blob/master/res/layout/design_bottom_navigation_item.xml
不列出來的. 然后依葫蘆畫瓢, 實現(xiàn)自己的一份:

<?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>

而且, 剛才上面提到的字體大小的控制, 也完全可以通過這種方式來實現(xiàn), 在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欄終于實現(xiàn)了.