Android第三方开源FloatingActionButton（com.getbase.floatingactionbutton）: FloatingActionsMenu【3】



Android第三方开源FloatingActionButton（com.getbase.floatingactionbutton）: FloatingActionsMenu【3】

Android第三方开源FloatingActionButton（com.getbase.floatingactionbutton）最大的特点莫过于增加的 FloatingActionsMenu。

FloatingActionsMenu的使用，在布局中套入若干个普通的FloatingActionButton，然后用户点击该FloatingActionsMenu后，FloatingActionsMenu里面嵌套的若干个FloatingActionButton将依次顺序展开，如图所示：

实现上述结果，需要在布局代码文件中写FloatingActionsMenu，然后再在FloatingActionsMenu内部嵌套若干个普通的FloatingActionButton：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zhangphil.fab.MainActivity" >

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/right_labels"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_margin="16dp"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_addButtonSize="normal"
        fab:fab_labelStyle="@style/menu_labels_style"
        fab:fab_labelsPosition="right" >

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_title="FAB 1" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"
            fab:fab_title="FAB 2" />
    </com.getbase.floatingactionbutton.FloatingActionsMenu>

</RelativeLayout>           

需要在res/values/styles.xml中添加样式：

<style name="menu_labels_style">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">@color/white</item>
    </style>           

引用到的fab_label_background则需要在drawable目录下新建一个xml代码文件fab_label_background.xml实现：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black_semi_transparent"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>           

需要的颜色：res/values/colors.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black_semi_transparent">#B2000000</color>
    <color name="background">#e5e5e5</color>
    <color name="half_black">#808080</color>
    <color name="white">#fafafa</color>
    <color name="white_pressed">#f1f1f1</color>
    <color name="pink">#e91e63</color>
    <color name="pink_pressed">#ec407a</color>
    <color name="blue_semi_transparent">#805677fc</color>
    <color name="blue_semi_transparent_pressed">#80738ffe</color>
</resources>
           

最终代码结构如图：

代码运行结果即为前文中所示动画效果。

附录参考文章：

【文章1】《Android第三方开源FloatingActionButton（com.getbase.floatingactionbutton）【1】》链接地址：

http://blog.csdn.net/zhangphil/article/details/50166715

【文章2】《Android第三方开源FloatingActionButton（com.getbase.floatingactionbutton）【2】》链接地址：

http://blog.csdn.net/zhangphil/article/details/50166929

【文章3】《Android Material Design的FloatingActionButton，Snackbar和CoordinatorLayout》链接地址：

http://blog.csdn.net/zhangphil/article/details/48861371

【文章4】《Android第三方FloatingActionButton：伴随ListView、RecyclerView、ScrollView滚动滑入滑出》链接地址：

http://blog.csdn.net/zhangphil/article/details/50135707