Android 開發BottomNavigationView學習

前言

　　注意這個裏介紹的是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