Android悬浮按钮Floating Action Button

Android 5.0中引入了一个很多新的设计，其中有一个是悬浮按钮Floating action button的规范，具体规范可以看这里Button。

网上有很多实现方法，不过最简单的还是使用ImageButton，今天就来实现下。

根据设计规范:

我们先在文件res/values/dimens.xml中定义一些用到的值:

<resources>
    <dimen name="btn_fab_size">56dp</dimen>
    <dimen name="btn_fab_margin">16dp</dimen>
    <dimen name="default_elevation">8dp</dimen>
</resources>

然后在布局文件中使用ImageButton

<ImageButton
     android:id="@+id/btnFAB"
     android:layout_width="@dimen/btn_fab_size"
     android:layout_height="@dimen/btn_fab_size"
     android:layout_alignParentBottom="true"
     android:layout_marginBottom="@dimen/btn_fab_margin"
     android:layout_marginRight="@dimen/btn_fab_margin"
     android:src="@drawable/ic_add_white_24dp"
     android:background="@drawable/btn_fab_default"
     android:elevation="@dimen/default_elevation"
     android:layout_alignParentRight="true"/>

其中src图标建议在Google的开源图标库material-design-icons下载。

为了适配v21和v21以下的版本，分别创建res/drawable-v21/btn_fab_default.xml用于适配5.0和res/drawable/btn_fab_default.xml用于适配5.0以下的安卓版本。因为5.0以下无法使用elevation这个新特性。

<?xml version="1.0" encoding="utf-8"?>
<!-- drawable-v21/btn_fab_default.xml -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/fab_color_shadow"
    >
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/style_color_accent"/>
        </shape>
    </item>
</ripple>

<?xml version="1.0" encoding="utf-8"?>
<!-- drawalbe/btn_fab_default.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item android:bottom="0dp" android:left="2dp" android:top="2dp">
                <shape android:shape="oval">
                    <solid android:color="@color/fab_color_shadow" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp">
                <shape android:shape="oval">
                    <solid android:color="@color/style_color_accent" />
                </shape>
            </item>
        </layer-list>

    </item>
    <item android:state_pressed="true">
        <shape android:bottom="2dp" android:left="2dp" android:right="2dp" android:shape="oval" android:top="2dp">
            <solid android:color="@color/fab_color_pressed" />
        </shape>
    </item>
</selector>

其中上面有用到一些颜色值，定义如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- values/colors.xml -->
<resources>
    <!-- fab背景颜色 -->
    <color name="style_color_accent">#01bcd5</color>

    <color name="fab_color_pressed">#007787</color>
    <color name="fab_color_shadow">#44000000</color>
</resources>

这样就完成了，运行一下看看效果：