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.
}
});