Android框架之路——FloatingActionButton使用與ToolBar進階
阿新 • • 發佈：2019-02-16
參考部落格：
效果演示：
FAB的相關：
- app:fabSize設定FloatingActionButton的大小，有兩種賦值分別是 “mini” 和 “normal”，預設是normal；
- app:backgroundTint：FloatingActionButton的背景顏色，預設的背景顏色是Theme主題中的。
- app:rippleColor設定FAB點選時的背景顏色；
- app:borderWidth，該屬性尤為重要，如果不設定0dp，那麼在4.1的sdk上FAB會顯示為正方形，而且在5.0以後的sdk沒有陰影效果，所以設定為borderWidth=”0dp”；
- app:elevation設定預設狀態下FAB的陰影大小；
- app:pressedTranslationZ設定點選時候FAB的陰影大小；
src設定FAB的圖示，Google建議符合Design設計的該圖示大小為24dp。
這是我的FloatingActionButton佈局，基本屬性都按照上述設定；
<!-- FloatingActionButton佈局 --> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" app:backgroundTint="@color/colorPrimary" app:fabSize="normal" app:rippleColor="@color/colorAccent" app:borderWidth="0dp" app:elevation="6dp" app:pressedTranslationZ="12dp" android:src="@drawable/about" android:layout_margin="20dp"/>點選事件彈出SnakeBar：
mFloatingActionButton = (FloatingActionButton) findViewById(R.id.fab_button); mFloatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(findViewById(R.id.fab_button), "fab is clicked", Snackbar.LENGTH_SHORT) .setAction("undo", new View.OnClickListener() { @Override public void onClick(View v) { } }) .show(); } });除了Google的FAB,這裡不得不介紹一款第三方的FAB庫，做出點選FAB可以彈出子FAB佈局，連結==》
想要在AndroidStudio中使用也非常簡單，just：
dependencies { compile 'com.getbase:floatingactionbutton:1.10.1' }OK，現在看一下佈局：
<com.getbase.floatingactionbutton.FloatingActionsMenu android:id="@+id/fab_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end"> <com.getbase.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fab_1"/> <com.getbase.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fab_2" fab:fab_colorNormal="@color/colorAccent" fab:fab_size="mini" fab:fab_icon="@drawable/share1"/> </com.getbase.floatingactionbutton.FloatingActionsMenu>- fab:fab_size=”mini”是設定大小；
- fab:fab_colorNormal是設定顏色；
- fab:fab_icon=”@drawable/share1”是設定圖示。
更多的屬性設定可以看一下參考部落格二。點選事件和Google的也是十分相似，基本沒有變動，就是這裡的FAB是com.getbase.floatingactionbutton包下的，如下：
mFloatingActionButton = (com.getbase.floatingactionbutton.FloatingActionButton) findViewById(R.id.fab_1); mFloatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(findViewById(R.id.fab_1), "fab is clicked", Snackbar.LENGTH_SHORT) .setAction("undo", new View.OnClickListener() { @Override public void onClick(View v) { } }) .show(); } });
ToolBar進階：
Toobar主要是用來替換ActionBar的，換句話說，ActionBar能做的，Toolbar都能做。但Toolbar遠遠不止這些，你可以好好的看看參考部落格一，還是非常有必要閱讀一下的。這裡我就直接進入主題，Toolbar和AppBarLayout結合在一起可以實現更加絢麗的效果，當然這其中還要涉及到倆個玩意，一個是CoordinatorLayout，另一個是NestedScrollView。
不管別的，先看一下佈局檔案：
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/navigation"
app:title="Navigation"
app:titleTextColor="#fff"
app:layout_scrollFlags="scroll"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
......
</android.support.design.widget.CoordinatorLayout>
要說明以下幾點：
- 要實現這個功能必須Toolbar被AppBarLayout包裹，可滑動型別的View（如recyclerview）被NestedScrollView包裹；
- Toolbar中app:layout_scrollFlags=”scroll”，用來設定recyclerview上滑時Toolbar的操作；
- 在NestedScrollView屬性中加入app:layout_behavior=”@string/appbar_scrolling_view_behavior”即可關聯起來Toolbar和recyclerview；
詳細內容還是建議大家看看參考部落格，畢竟這個功能實現現階段個人差不多夠用。這裡實現的功能主要是，RecyclerView上滑時，ToolBar會向上隱藏。下拉時，又可以再加載出來。最後，貼一下整個佈局檔案，裡面包含NavigationView、Toolbar、RecyclerView和FloatingActionButton。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ping.recyclerview.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/navigation"
app:title="Navigation"
app:titleTextColor="#fff"
app:layout_scrollFlags="scroll"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<!-- FloatingActionButton佈局 -->
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="@+id/fab_button"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="bottom|end"-->
<!--app:backgroundTint="@color/colorPrimary"-->
<!--app:fabSize="normal"-->
<!--app:rippleColor="@color/colorAccent"-->
<!--app:borderWidth="0dp"-->
<!--app:elevation="6dp"-->
<!--app:pressedTranslationZ="12dp"-->
<!--android:src="@drawable/about"-->
<!--android:layout_margin="20dp"/>-->
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end">
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab_1"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab_2"
fab:fab_colorNormal="@color/colorAccent"
fab:fab_size="mini"
fab:fab_icon="@drawable/share1"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/na_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
