FloatingActionButton 完全解析[Design Support Library(2)]

FloatingActionButton 完全解析[Design Support Library(2)]

轉載請標明出處：
[http://blog.csdn.net/lmj623565791/article/details/46678867](http://blog.csdn.net/lmj623565791/article/details/46678867；
本文出自:【張鴻洋的博客】

哈，跟隨著上篇Android 自己實現 NavigationView [Design Support Library(1)]之后，下面介紹個Design Support Library中極其簡單的控件：FloatingActionButton。

一、簡單使用

布局：

        <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" />

使用非常簡單，直接當成ImageView來用即可。

效果圖：

可以看到我們的FloatingActionButton正常顯示的情況下有個填充的顏色，有個陰影；點擊的時候會有一個rippleColor，并且陰影的范圍可以增大，那么問題來了:

• 這個填充色以及rippleColor如何自定義呢？

  默認的顏色取的是，theme中的colorAccent，所以你可以在style中定義colorAccent。

  colorAccent 對應EditText編輯時、RadioButton選中、CheckBox等選中時的顏色。詳細請參考：Android 5.x Theme 與 ToolBar 實戰

  rippleColor默認取的是theme中的colorControlHighlight。

  我們也可以直接用過屬性定義這兩個的顏色：

  app:backgroundTint="#ff87ffeb"
  app:rippleColor="#33728dff"

• 立體感有沒有什么屬性可以動態指定？

  和立體感相關有兩個屬性，elevation和pressedTranslationZ，前者用戶設置正常顯示的陰影大小；后者是點擊時顯示的陰影大小。大家可以自己設置嘗試下。

綜上，如果你希望自定義顏色、以及陰影大小，可以按照如下的方式(當然，顏色你也可以在theme中設置)：

<android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" app:backgroundTint="#ff87ffeb" app:rippleColor="#33728dff" app:elevation="6dp" app:pressedTranslationZ="12dp" />

至于點擊事件，和View的點擊事件一致就不說了~~

二、5.x存在的一些問題

在5.x的設備上運行，你會發現一些問題（測試系統5.0）：

• 木有陰影

記得設置app:borderWidth="0dp"。

• 按上述設置后，陰影出現了，但是竟然有矩形的邊界（未設置margin時，可以看出）

需要設置一個margin的值。在5.0之前，會默認就有一個外邊距（不過并非是margin，只是效果相同）。

so，良好的實踐是：

• 添加屬性app:borderWidth="0dp"
• 對于5.x設置一個合理的margin

如下：

 <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" app:borderWidth="0dp" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_headset" />

values

 <dimen name="fab_margin">0dp</dimen>

values-v21

 <dimen name="fab_margin">16dp</dimen>

三、簡單實現FloatActionButton

參考參考資料4

可以通過drawable來實現一個簡單的陰影效果：

drawable/fab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <!-- Shadow -->
            <item android:top="1dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding  android:bottom="3px" android:left="3px" android:right="3px" android:top="3px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button pressed -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="#90CAF9"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_enabled="true">

        <layer-list>
            <!-- Shadow -->
            <item android:top="2dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding  android:bottom="4px" android:left="4px" android:right="4px" android:top="4px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button -->

            <item>
                <shape android:shape="oval">
                    <solid android:color="#03A9F4"/>
                </shape>
            </item>
        </layer-list>

    </item>

</selector>

一個相當長的drawable，不過并不復雜，也比較好記憶。首先為一個View添加陰影，使用的是color從#08000000到#1500000，取的padding值為4、2、2、1…1；這樣就可以為一個View的四邊都添加上陰影效果。

當然了，為了陰影更加逼真，把上述的Layer-list又包含到了一個item中，并為該item設置了top和right，為了讓左，下的陰影效果比上、右重，當然你可以設置其他兩邊，改變效果。

最后添加一個item設置為按鈕的填充色（注意該item的層級）。

該drawable為一個selector，所以press和默認狀態寫了兩次基本一致的代碼，除了填充色不同。

使用：

 <ImageButton  android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="20dp" android:background="@drawable/fab" android:src="@drawable/ic_done" />

效果圖：

ok，到此FloatActionButton就介紹完畢啦~~有興趣的話，也可以從github挑選個庫看看別人的實現。

ok~

新浪微博
微信公眾號：hongyangAndroid
（歡迎關注，第一時間推送博文信息）

參考資料

• http://antonioleiva.com/floating-action-button/
• https://code.google.com/p/android/issues/detail?id=175067
• https://github.com/chrisbanes/cheesesquare
• http://www.myandroidsolutions.com/2015/01/01/android-floating-action-button-fab-tutorial/