Android Material悬浮响应式可操作按钮Fab Sp

介绍

可以打开和收起菜单的浮动操作按钮，菜单item可以像标准menu那样在xml里设置，还可以定义fab的位置。

项目地址1: https://github.com/yavski/fab-speed-dial

项目地址2: https://github.com/kobakei/MaterialFabSpeedDial

开始

添加依赖

dependencies {

compile 'io.github.yavski:fab-speed-dial:1.0.6'

}

新建menu文件,然后在这里新建menu_button.xml文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto">

<item

    android:id="@+id/action_call"

    android:icon="@drawable/ic_call_black_24px"

    android:title="@string/menu_item_call"

    android:orderInCategory="0"/>

<item

    android:id="@+id/action_text"

    android:icon="@drawable/ic_chat_bubble_outline_black_24px"

    android:title="@string/menu_item_text"

    android:orderInCategory="1"/>

<item

    android:id="@+id/action_email"

    android:icon="@drawable/ic_mail_outline_black_24px"

    android:title="@string/menu_item_email"

    android:orderInCategory="2"/>

</menu>

android:orderInCategory这个属性在需要给item设置背景色是需要添加,不然无法对应

菜单文件建好之后直接在布局引用

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="16dp">

<io.github.yavski.fabspeeddial.FabSpeedDial

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|end"

        app:fabGravity="bottom_end"

        app:fabMenu="@menu/menu_main"

        app:miniFabBackgroundTint="@android:color/white"

        app:miniFabDrawableTint="?attr/colorPrimaryDark"

        app:miniFabTitleTextColor="?attr/colorPrimaryDark" />

</FrameLayout>

这里需要注意一下FabSpeedDial的宽高不能固定否则不显示

属性

 app:fabMenu ="@menu/menu_main"  直接引用建好的菜单xml

app:fabGravity ="bottom_end"  设置主按钮的位置

app:fabDrawable="@mipmap/color_select_icon" 设置主按钮icon

app:fabBackgroundTint="@color/black"设置按钮背景色

app:miniFabBackgroundTintList="@array/fab_menu_item_colors" 这个比较重要引用一个color组用来设置菜单按钮的背景色

<integer-array name="fab_menu_item_colors">

<item>@color/color1</item>

<item>@color/color2</item>

<item>@color/color3</item>

<item>@color/color4</item>

<item>@color/color5</item>

<item>@color/color6</item>

</integer-array>

这里的item数要与menu里面的item数一致

其他属性可以借鉴github