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用来设置FloatingActionButton和BottomAppBar的间距.fabCradleRoundedCornerRadius用来指定圆角角度.fabCradleVerticalOffset指定FloatingActionButton和BottomAppBar的垂直间距.如果值为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.
}
});