1. Bottom AppBar

1.1. Usage

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

FloatingActionButton 可以依附到一个 BottomAppBar 上,通过设置属性 app:layout_anchor 指向BottomAppBar或者通过调用 CoordinatorLayout.LayoutParams#setAnchorId(int)来实现。

1.1.1. Material Styles

默认情况下,BottomAppBar将使用更新的主题Theme.MaterialComponents来提供Material风格的设计。如果你的Application Theme没有继承自Material Theme,可以在xml中指定BottomAppBar的style。

style="@style/Widget.MaterialComponents.BottomAppBar"

1.1.2. BottomAppBar Attributes

FloatingActionButton属性设置:

Feature Relevant attributes Detail
Background Tint app:backgroundTint
FAB Alignment Mode app:fabAlignmentMode Fab对齐方式
FAB Cradle Margin app:fabCradleMargin
FAB Cradle Corner Radius app:fabCradleRoundedCornerRadius AppBar圆角间距
FAB Vertical Offset app:fabCradleVerticalOffset
Hide on scroll app:hideOnScroll 滚动时隐藏AppBar

Background Tint

设置BottomAppBar 的background. the app:backgroundTint attribute will allow you to set a tint.

FloatingActionButton Alignment Modes

FloatingActionButton 可以对齐到中间 (FAB_ALIGNMENT_MODE_CENTER) 或者尾部 (FAB_ALIGNMENT_MODE_END) 通过调用 setFabAlignmentMode(int).

FloatingActionButton Attributes

FloatingActionButton 按钮的表现可以通过 fabAlignmentMode, fabCradleMargin, fabCradleRoundedCornerRadius, 和 fabCradleVerticalOffset来控制.

  • fabAlignmentMode 用来设置对齐到 center 或者 end.
  • fabCradleMargin 用来设置FloatingActionButtonBottomAppBar的间距.
  • fabCradleRoundedCornerRadius用来指定圆角角度.
  • fabCradleVerticalOffset 指定FloatingActionButtonBottomAppBar的垂直间距.如果值为0, FloatingActionButton 的中间线将对齐 BottomAppBar的顶部.

Hide on scroll

BottomAppBar 可以设置成页面滚动时自动隐藏,通过设置 hideOnScroll 属性. 要使用这个属性,需要将滚动内容包裹在 NestedScrollView中. 在这里不需要将 BottomAppBar 包裹在 AppBarLayout中或者使用AppBarLayout的scroll flags比如app:layout_scrollFlags.

1.1.3. Handling Menu Options

有两种方式来处理菜单事件,其一是通过setOnMenuItemClickListener(OnMenuItemClickListener)

BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar);

bar.setOnMenuItemClickListener(new OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        // Handle actions based on the menu item
        return true;
    }
});

另外一种是调用 setSupportActionBar() ,这样将会设置menu的callback,如同Toolbar一样将关联到 Activity#onCreateOptionsMenu()Activity#onOptionsItemSelected()方法.

BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar);
setSupportActionBar(bar);

1.1.4. Handling Navigation Item Click

如果是使用 setSupportActionBar()来设置 BottomAppBar ,可以处理menuItem的点击事件,判断menuItem的id是否是 android.R.id.home. 另外一种方法是通过setNavigationOnClickListener(OnClickListener):

BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar);
bar.setNavigationOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle the navigation click by showing a BottomDrawer etc.
    }
});

BottomAppBar

results matching ""

    No results matching ""