【譯】Android材質組件的動手實踐：Bottom App Bar

本文為 Nick Rout 發布于 Medium 的文章譯文（Google 翻譯）
原文鏈接為 Hands-on with Material Components for Android: Bottom App Bar
本文僅作為個人學習記錄所用。如有涉及侵權，請相關人士盡快聯系譯文作者。

Android MDC 系列文章：

這篇文章將介紹 Bottom App Bar 組件的功能和API。要了解如何處理Android的Material Components的初始設置（包括Gradle依賴關系和創建應用程序主題），請參閱我的原始文章：

為Android設置Material Components主題

Bottom App Bar 是對傳統頂部應用欄（aka Toolbar或ActionBar在Android世界中）的繼承，有人認為這是《材料指南》 v1 的定義部分。底部應用欄保留了應用欄的核心功能，同時在關鍵區域提供了全新的外觀和功能改進。

Bottom App Bar

與頂部應用程序一樣，底部應用程序欄可用于：

  • 使用圖標菜單項突出顯示重要的屏幕操作
  • 通過導航圖標菜單項提供與應用程序導航進行交互的方式（例如，打開導航抽屜或向后/向上導航）
  • 充當FAB（浮動操作按鈕）的錨點

但是，將底部應用欄與眾不同的特征是：

  • 人體工程學：底部位置使單手操作移動設備更容易
  • 靈活性：正如我們將進一步探討的那樣，底部應用程序欄的布局以及FAB和圖標菜單項的位置可以根據屏幕的需要進行更改

基本用法??

BottomAppBar可以將A 包含在您的屏幕布局中，如下所示：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 

  < com.google.android.material.bottomappbar.BottomAppBar 
    android：id =“ @ + id / bottomAppBar     
    android：layout_width =” match_parent“ 
    android：layout_height =” wrap_content“ 
    android： layout_gravity =“ bottom” /> 

</ androidx.coordinatorlayout.widget.CoordinatorLayout >

如上所述，理想情況下ViewGroup，a 的父級BottomAppBar應該是a CoordinatorLayout。這樣可以完全自定義滾動和FAB錨定行為。

處理菜單和導航項目??

BottomAppBar可以使用與Toolbar（其父類）相同的方式或通過特定于的新便利功能來實現A 的菜單BottomAppBar。

菜單和導航項目

使用setSupportActionBar

對于大多數Android開發人員來說，這應該是熟悉的領域。與一樣Toolbar，可以使用多種掛鉤/回調將a附加BottomAppBar到Activity或Fragment，從而使菜單膨脹并處理項目單擊。為此，您需要使用AndroidX AppCompatActivity 和/或 Fragment 類。您還應該使用*.NoActionBar應用程序主題變體。

如果您使用Fragment，則首先需要在回調中啟用上述菜單Fragment#onCreate回調：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setHasOptionsMenu(true)
}

注意：如果使用，則沒有必要*Activity*。

擴大布局后，您需要讓Activity/ Fragment知道您BottomAppBar是屏幕的主要操作欄，以便將其鏈接到回調。這可以在Activity#onCreate回調（在調用之后setContentView，除非您使用[ContentView](https://developer.android.com/reference/androidx/annotation/ContentView)批注）或Fragment#onViewCreated回調中完成：

override fun onViewCreated（view：View，savedInstanceState：Bundle？）{ 
    val activity =（requireActivity（）as AppCompatActivity）
    activity.setSupportActionBar（bottomAppBar）
}

現在，您可以使用可覆蓋的回調來擴大菜單資源和處理項目單擊。這在Android菜單文檔中有詳細說明。

使用便利功能

與以前的方法相比，存在用于使BottomAppBar菜單膨脹的更簡單的便捷功能：

bottomAppBar.replaceMenu（R.menu。menu_bottom_app_bar）

設置一個菜單項單擊事件：

bottomAppBar.setOnMenuItemClickListener { item -> 
    when(item.itemId) {
        R.id.item1 -> {
            // Do something for menu item 1
            true
        }
        R.id.item2 -> {
            // Do something for menu item 2
            true
        }
        else -> false
    }
}

導航項呢？

鑒于導航項目不屬于膨脹菜單的一部分，因此需要在上分別進行設置BottomAppBar。這可以用XML完成：

< com.google.android.material.bottomappbar.BottomAppBar 
  ... 
  app：navigationIcon =“ @ drawable / ic_navigation” 
  app：navigationContentDescription =“ @ string / cd_navigation” />

另外，也可以通過編程方式完成：

bottomAppBar.setNavigationIcon（R.drawable。ic_navigation）
bottomAppBar.setNavigationContentDescription（R.string。cd_navigation）

檢測單擊導航項的時間與常規菜單項的完成非常相似。

如果您使用的是上述setSupportActionBar方法，請檢查回調中的android.R.id.homeID onOptionsItemSelected。

另外，還存在一個便利功能：

bottomAppBar.setNavigationOnClickListener { 
    //對導航項進行操作
}

錨定FAB?

甲FloatingActionButton可錨固到BottomAppBar。這引起了人們對FAB的重要屏幕動作的注意，同時還減少了兩個組件占用的垂直空間。菜單項將根據所選的錨固屬性更改位置。

從設計的角度來看，有兩種錨定FAB的方法：

  • 插圖：變形后的形狀BottomAppBar允許FAB在“切口”內“搖籃”（在同一高度）。這是默認行為。
嵌入式錨固FAB
  • 重疊：FAB只是放置在上方BottomAppBar（較高的高度），對形狀沒有影響。
重疊錨定FAB

注意：《材料指南》告誡不要將擴展FAB與底部應用欄一起使用。在Android的Material Components中添加了有限的錨定支持*1.1.0-alpha04*，但不支持摳圖和動畫。

為了實現這一點，FAB還需要位于父級中CoordinatorLayout：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 
  < com.google.android.material.bottomappbar.BottomAppBar 
    ... /> 
  < com.google.android.material.floatingactionbutton.FloatingActionButton 
    ... 
    app：layout_anchor =“ @ id / bottomAppBar“ /> 
</ androidx.coordinatorlayout.widget.CoordinatorLayout >
![1_VcTCw9qYAxpzfxTULGItIQ.png](https://upload-images.jianshu.io/upload_images/4876522-6226f50e8dddf77f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

默認情況下，FAB固定并水平居中對齊。存在許多屬性可以自定義這些屬性：

  • fabAlignmentMode：FAB的水平對齊。可以將其設置為center（FAB_ALIGNMENT_MODE_CENTER，默認）或end（FAB_ALIGNMENT_MODE_END）。以編程方式更改后，fabAnimationMode將運行隱藏/顯示動畫（由下面定義）。
  • fabCradleMargin：FAB邊緣與通訊BottomAppBar座切口之間的距離。默認為5dp。
  • fabCradleRoundedCornerRadius：通訊BottomAppBar座切口的拐角半徑。默認為8dp。
  • fabCradleVerticalOffset：FAB相對于通訊BottomAppBar座切口的垂直偏移距離。默認值為0dp，表示FAB中心將與的頂部對齊BottomAppBar。
  • fabAnimationMode：更改時使用的動畫樣式fabAlignmentMode（如上所述）。可以將其設置為scale（FAB_ANIMATION_MODE_SCALE，默認）或slide（FAB_ANIMATION_MODE_SLIDE）。
FAB動畫模式

注意：所有這些屬性也可以通過編程設置。

這些屬性的命名表明該BottomAppBar組件不支持重疊的FAB錨。但是，我們可以使用fabCradleMargin和fabCradleRoundedCornerRadius來偽造此行為0dp。

滾動行為?

如果屏幕上包含可滾動的內容（例如A RecyclerView或NestedScrollView），則可以BottomAppBar使用hideOnScroll屬性控制響應滾動的方式。同樣，滾動容器也需要位于父容器中CoordinatorLayout：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 
  < androidx.core.widget.NestedScrollView 
    ... />
   < com.google.android.material.bottomappbar.BottomAppBar 
    ... 
    app：hideOnScroll =“ true” /> 
< / androidx.coordinatorlayout.widget.CoordinatorLayout >

如果設置為true，則BottomAppBar在上/下滾動內容時，將以動畫方式自動隱藏/顯示。

您可以BottomAppBar用BottomAppBar#performHide/ BottomAppBar#performShow分別以編程方式隱藏/顯示。

隱藏在滾動條上

主題??

本BottomAppBar：可以在三個材料主題化子系統方面進行主題顏色，排版和形狀。有兩個從繼承的樣式變體Widget.MaterialComponents.BottomAppBar，每個樣式變體都帶有可選的樣式后綴：Surface（默認，無后綴）和彩色（*.Colored）。實施全局自定義BottomAppBar樣式時，請在您的應用程序主題中使用bottomAppBarStyle屬性引用它。

顏色

BottomAppBar可以使用該backgroundTint屬性自定義背景色。colorSurface對于表面底部應用程序欄和colorPrimary彩色底部應用程序欄，默認為。

注意：請勿*android:background*與一起使用*BottomAppBar*，因為這會破壞FAB通訊座的內部處理。

BottomAppBar可以使用該materialThemeOverlay屬性自定義菜單/導航項目的顏色。有兩個從繼承的主題覆蓋變體ThemeOverlay.MaterialComponents.BottomAppBar，每個都有一個樣式后綴：Surface（*.Surface）和彩色（*.Colored）。它們包含兩個屬性：（colorControlNormal用于自定義菜單/導航圖標顏色）和actionMenuTextColor（用于自定義溢出菜單文本顏色）。通常，您希望保持相同。colorOnSurfaceEmphasisMedium對于表面底部應用欄和colorOnPrimary彩色底部應用欄，它們默認為。

注意：以上方法要求您將菜單/導航圖標資源的色調/顏色設置為*colorControlNormal*。如果使用[*VectorDrawable*](https://developer.android.com/reference/android/graphics/drawable/VectorDrawable)s，則可以通過*android:tint*屬性來實現。如果您使用的是柵格（PNG / JPG）資產，則可以將其包裝*<bitmap>*在新的XML資源中，以應用*android:tint*。這不像例如*itemIconTint*屬性那樣直觀。您可以星發布此的問題跟蹤器。

顏色主題

版式

沒有主要文本作為BottomAppBar組件的一部分。但是，對于大型菜單，將有一個溢出操作菜單。這些文本項將采用fontFamily您的應用主題中定義的屬性。

輸入主題

形狀

在撰寫本文時，適用于Android的材料組件的最新版本為，1.2.0-alpha05并且全局形狀主題屬性（例如shapeAppearanceMediumComponent）不受影響BottomAppBar。具體來說，FAB通訊座僅支持圓角（相對于切角）。一個手動解決方法已被添加到材料零件的Android GitHub的倉庫，并希望使其進入形狀在未來的版本主題化。您可以星發布此的問題跟蹤器。

形狀主題

更多資源??

我希望這篇文章對Bottom App Bar以及如何在您的Android應用程序中使用它有所了解。如果您有任何疑問，想法或建議，那么我很樂意收到您的來信！

在Twitter上找到我@ricknout

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 內容 抽屜菜單 ListView WebView SwitchButton 按鈕 點贊按鈕 進度條 TabLayo...
    8ba406212441閱讀 5,604評論 0贊 4
  • 自己總結的Android開源項目及庫。 github排名https://github.com/trending,g...
    passiontim閱讀 2,588評論 1贊 26
  • 什么是工廠方法模式？（定義） 定義一個用于創建對象的統一的接口，然后由子類實現。 工廠方法模式->角色劃分？ $\...
    架構師的一小步閱讀 202評論 0贊 0
  • 光陰似箭，日月如梭。不知不覺我已經踏入教師行業三年了。這三年里我從一個遇到不知所措的教師變為了能游刃有余解決問...
    鹽邊071趙蘭英閱讀 281評論 0贊 0
  • 過去大半年，大概是18年中我和父母一起居住最長的時間了，并在新年到來前，擠出一周多的假期，在父母的各種猶豫磨嘰...
    nyofarya閱讀 290評論 0贊 1