阅读本文前,推荐先阅读

FloatingActionButton

简介

浮动按钮 FloatingActionButton 是材料设计非常重要的一个控件,继承于 ImageView。它可以显著的提升对行为的强调。目前市面上已经有很多app,web都实现了这个设计。

先看看浮动按钮是什么样的。

实现

确保已经加入了依赖库:

compile 'com.android.support:design:22.2.1'

FloatingActionButton一般需要结合android.support.design.widget.CoordinatorLayout来使用,主要是为了实现一些动效,比如动态的隐藏显示,新布局显示的时候自动位移等等。

直接看布局代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/drawer_layout"
    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:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/snackbarPosition"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:layout_gravity="center"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:textColor="@android:color/white"
                    android:textSize="20sp"
                    android:text="标题栏"/>

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="16dp"
            android:elevation="4dp"
            app:fabSize="normal"
            app:backgroundTint="#673AB7"
            android:src="@drawable/ic_add_white_24dp"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_marginRight="80dp"
            android:layout_marginBottom="16dp"
            android:elevation="10dp"
            android:background="@drawable/ic_android_purple_700_18dp"
            app:fabSize="normal"
            app:backgroundTint="#673AB7"
            app:borderWidth="0dp"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="150dp"
            android:elevation="4dp"
            app:fabSize="mini"
            app:backgroundTint="#673AB7"
            android:src="@drawable/ic_add_white_24dp"/>

    </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

我这里放了三个FloatingActionButton,显示效果就如上图所示。当然你也可以用一个父布局把三个FloatingActionButton包裹起来,实现你需要的布局。

我们来分析下FloatingActionButton的一些属性。

FloatingActionButton不设置任何属性的时候,默认是一个圆形按钮,如图

android:background 请注意,这个不是用来修改背景颜色的,是用来设置背景图片的,但是你会发现设置后,会有一个圈环包裹着,很难看。怎么办。设置圆环的宽度。
app:borderWidth="0dp" 设置圆环的宽度, 当设置成0的时候,圆环就没有了。设置成其他的就会成为一个空心环。大家可以设置看效果。
android:src : 设置圆形中部的图片资源,比如上图的的那个白色**"+"
android:layout_gravity="end|bottom" 设置位置在右下角
android:elevation="4dp" 这个是设置阴影层级的,这个值的作用就是让你有一种FlocatingActionButton 浮在上层的感觉。
app:fabSize="normal" 设置按钮的尺寸,可以设置为
normal或者mini**。
app:backgroundTint="#673AB7" 设置按钮的背景颜色,默认是红色的,我设置成了蓝色。

设置完成后运行代码,按钮就已经出现了。

点击事件

FlocatingActionButton的点击事件和其他控件一样,setOnClickListener就可以了。

看代码片段:

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar
                .make(drawerlayout, "这是一个学习用的snackbar", Snackbar.LENGTH_LONG)
                .setAction("取消", new View.OnClickListener() {
                  @Override
                    public void onClick(View v) {

                    }
              }).show();
        }
    });

我们点击按钮,弹出一个Snackbar。首先,我将Snackbar的 view 传入根布局 LinearLayout的引用。
运行效果:

发现我们的FlocatingActionButton被遮住了,我们修改 Snackbarview 参数为 android.support.design.widget.CoordinatorLayout 或者它的子布局控件。

修改代码:

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar
                        .make(fab, "这是一个学习用的snackbar", Snackbar.LENGTH_LONG)
                        .setAction("取消", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                            }
                        }).show();
            }
        });

再次运行效果:

这样就会自动位移了。

与RecyclerView联动

我们想要一个效果:列表下拉滚动的时候FlocatingActionButton隐藏,上拉滚动的时候显示。

这种效果我们需要使用 android.support.v7.widget.RecyclerView 而不是 ListView

RecyclerView 是谷歌在 v7 库推出的用来取代 ListView 的兼容性组件。有更好的灵活性和更高的性能,以及能实现更加丰富动画效果的 API。曾经的ListView 连上下滚动方向监听的 API 都没有,但是现在RecyclerView 可以轻松实现。我们应该在我们的项目中尽量使用RecyclerView来替换ListView

RecyclerView使用教程