Android BottomNavigation底部導航欄使用

原文地址: Android BottomNavigation底部導航欄使用 - Stars-One的雜貨小窩

基本使用

本文側重點記錄一些特殊的樣式設置,所以基本使用這裡就簡單概述一下,詳細圖文可以去找其他人的博文

1.創建對應的menu菜單文件
2.xml佈局引用menu菜單
3.啟動Activity預覽效果

可以使用setOnItemSelectedListener方法監聽當前選中的item項,可以配合viewpager綁定使用

顯示模式更改

BottomNavigation預設是菜單超過3個後,就只會顯示已選擇的item的底部文字,我們可以通過BottomNavigation進行更改

可選項有以下4個:

• auto 預設的邏輯(菜單超過3個後,就只會顯示已選擇的item的底部文字,否則就是全部item的文本都顯示)
• labeled 全部item的文本都顯示
• selected 只有選中item底部文字才顯示
• unlabeled 所有item底部不顯示文字

修改圖標顏色

需要你使用的是drawable類型的圖片,才使用這種方法(一般去找個svg生成就好,如果你是有兩種不同的圖片,可以看下一節的方法)

在color文件夾創建selector文件來實現

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/grayDeep" android:state_checked="false" />
</selector>

之後給bottomnav設置即可

app:itemIconTint="@color/selector_nav_icon_color"

修改選中和未選中圖標

和上面的顏色步驟差不多,不過selector文件所在的文件夾不同

先直接上效果

1. 準備兩張不同狀態顯示的圖標
2. 在drawable文件夾中創建selector_icon_home.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/founction" android:state_checked="false"/>
    <item android:drawable="@mipmap/founction2" android:state_checked="true"/>
</selector>

state_checked為false就是正常狀態顯示的圖標,true則是選中狀態

3. 菜單文件

菜單文件中,使用上面的圖標文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_home" android:title="home" android:icon="@drawable/selector_icon_home"/>
    <item android:id="@+id/menu_message" android:title="message" android:icon="@drawable/selector_icon_home"/>
</menu>

為了測試方便,兩個選項都是使用的上面的那個圖片資源

4. 取消著色
   由於BottomNavigationView預設會對圖標進行著色處理,我們導致我們設置的圖片不同狀態效果不生效,所以要設置一下

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.nav)
//取消給圖標的自動著色
bottomNavigationView.itemIconTintList = null

之後就是上面的那個效果圖了

使用Material You主題

上面的是之前Material Design 2的設計風格,之後Material Design 3頁退出了(也就是Material You)主題,我們想使用這個主題,怎麼使用呢?

其實只需要改變下BottomNavigationView的主題就可

 <com.google.android.material.bottomnavigation.BottomNavigationView
        style="@style/Widget.Material3.BottomNavigationView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_nav"/>

效果如下:

註意:應該是material庫的1.5.0版本之後才有的Material3的主題

implementation 'com.google.android.material:material:1.5.0-alpha04'

不過material版本更新,對gradle版本,androidx版本等都會有要求,所以升級版本可以githhub的Releases · material-components/material-components-android頁面查看版本要求,不然就是容易出現版本衝突異常導致項目編譯失敗