Material Design系列-FloatingActionButton（FAB）

接着上篇：我是傳送門

#1. Text button
#2. Outlined button
#3. Contained button
#4. Toggle button
#5. Floating action button

以上前四種都瞭解的話，那接下來就簡單了；這篇示例：Floating action button 浮動動作按鈕：

# FloatingActionButton
# ExtendedFloatingActionButton

# FloatingActionButton
  1.xml佈局：

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fabCustomSize="60dp"
            app:maxImageSize="30dp"
            app:rippleColor="@color/colorWhite"
            app:srcCompat="@drawable/ic_plus"
            app:tint="@color/colorWhite" />


//（常用屬性）
app:fabCustomSize //控制FloatingActionButton的尺寸
app:maxImageSize //控制Icon顯示的尺寸
app:srcCompat //給按鈕添加Icon
app:tint //Icon顯示覆蓋色
app:rippleColor//點擊效果（水波紋）覆蓋色
app:elevation //設置按鈕的海拔高度，可以理解爲按下時的陰影效果，更高的海拔高度增加了內置按鈕的突出度

 2. 自帶擴展方法：

// To show:
fab.show()
// To hide:
fab.hide()

//show/hide已經實現了默認動畫（下面有效果動畫），如果需要修改的話，可以自己設置以下屬性：
app:showMotionSpec
app:hideMotionSpec

# ExtendedFloatingActionButton 
  1.xml佈局：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extendedFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="extended_fab_content_desc"
        android:text="extended_show"
        android:textColor="@color/colorWhite"
        app:elevation="10dp"
        app:icon="@drawable/ic_plus"
        app:iconPadding="0dp"
        app:iconSize="30dp"
        app:iconTint="@color/colorWhite"
        app:pressedTranslationZ="10dp" />

（常用屬性）
app:backgroundTint //設置按鈕填充的背景色
app:rippleColor//點擊效果（水波紋）覆蓋色
app:cornerRadius //設置按鈕圓角
app:strokeColor //設置按鈕線框顏色
app:elevation //設置按鈕的海拔高度，可以理解爲按下時的陰影效果，更高的海拔高度增加了內置按鈕的突出度
app:icon //給按鈕添加Icon
app:iconSize //控制Icon顯示的尺寸

cc: ExtendedFloatingActionButton是繼承的MaterialButton，屬性設置是不是很像

  2. 自帶擴展方法：

// To extend:
extendedFab.extend()
// To shrink:
extendedFab.shrink()

//使用擴展和收縮方法可以動畫顯示和隱藏文本（下面有效果動畫），自定義設置屬性
app:extendMotionSpec
app:shrinkMotionSpec

#  支持app:shapeAppearanceOverlay 屬性設置：

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        style="@style/FabButton.Green"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.App.SmallComponent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_plus" />

 

###附上效果：

# 貼上用style來優化後的樣子：

<com.google.android.material.floatingactionbutton.FloatingActionButton
        style="@style/FabButton.White"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:fabCustomSize="40dp"
        app:maxImageSize="20dp"
        app:srcCompat="@drawable/ic_plus" />

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extendedFab"
        style="@style/ExtendedFabButton.GraphikBold.Green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="extended_fab"
        app:icon="@drawable/ic_plus"
        app:iconSize="30dp" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
        style="@style/FabButton.Green.Cut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="10dp"
        app:srcCompat="@drawable/ic_plus" />

style_button.xml  （FloatingActionButton的style部分）

<!--FloatingActionButton-->
 <style name="FabButton" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="backgroundTint">@color/colorPrimary</item>
        <item name="tint">@color/colorWhite</item>
        <item name="backgroundTintMode">src_atop</item>
        <item name="elevation">10dp</item>
        <item name="rippleColor">@color/colorWhite</item>
        <item name="fabCustomSize">60dp</item>
        <item name="maxImageSize">30dp</item>
    </style>

    <style name="FabButton.White">
        <item name="backgroundTint">@color/colorWhite</item>
        <item name="tint">@color/colorAccent</item>
        <item name="rippleColor">@color/colorAccent</item>
    </style>

    <style name="FabButton.Green">
        <item name="backgroundTint">@color/colorAccent</item>
        <item name="tint">@color/colorWhite</item>
    </style>

    <style name="FabButton.Green.Cut">
        <item name="shapeAppearanceOverlay">@style/ShapeMediumCut</item>
    </style>


    <style name="ShapeMediumCut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">15dp</item>
    </style>

cc: 官方建議，使用FloatingActionButton 結合 CoordinatorLayout 使用，即可實現懸浮在任意控件的任意位置。同時可以實現與CoordinatorLayout 內的其他view協調動畫。

 

########  Material Design系列 - Button   ########

# Material Design系列-MaterialButton

# Material Design系列-Toggle Button（MaterialButtonToggleGroup/ShapeAppearance）

# Material Design系列-FloatingActionButton（FAB）