Android Material Design之FloatingActionButton

注:在这提供的代码是用kotlin语言。

示例 Github地址:https://github.com/ChaiJiangpeng/AndroidMaterialDesignDemo

使用之前要先引入design包

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

1.简单使用

    android:id="@+id/fab"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    app:backgroundTint="@color/colorPrimary"

    android:layout_margin="15dp"

    android:src="@drawable/ic_index_dashboard"

    app:borderWidth="0dp"

    app:rippleColor="@color/colorPrimaryDark"

    app:elevation="8dp"

    app:pressedTranslationZ="15dp"

    app:useCompatPadding="false"

    app:fabSize="normal"/>

使用很简单，这样即可

效果图如下：

效果图

2.各个属性的解释

backgroundTint - 设置FAB的背景颜色。

rippleColor - 设置FAB点击时的背景颜色\n

borderWidth - 内边距 可以自己实现看下效果

elevation 默认状态下阴影大小

fabSize 设置大小，该属性有两个值，分别为normal和mini，对应的大小分别为56dp和40dp

pressedTranslationZ 按钮按下去的状态下的阴影大小

app:useCompatPadding 设置为true时 那么在5.0设备上点击后会显示正方形填充效果

这样设置后，就可以在屏幕上创建出一个FloatingActionButton了。

3.CoordinatorLayout与FloatingActionButton

CoordinatorLayout与FloatingActionButton可以一起使用，实例中就是这样使用的，如下：

    android:id="@+id/coordinator"

    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:layout_width="match_parent"

        android:layout_height="wrap_content">

            android:id="@+id/content"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:textColor="@color/colorAccent"

            android:padding="15dp"

            android:textSize="24sp"/>

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        app:layout_anchor="@id/content"

        app:layout_anchorGravity="right|bottom"

        app:backgroundTint="@color/colorPrimary"

        android:layout_margin="15dp"

        android:src="@drawable/ic_index_dashboard"

        app:borderWidth="0dp"

        app:rippleColor="@color/colorPrimaryDark"

        app:elevation="8dp"

        app:pressedTranslationZ="15dp"

        app:useCompatPadding="false"

        app:fabSize="normal"/>

CoordinatorLayout 当做父布局，里边用到这两个属性

  app:layout_anchor="@id/content"

  app:layout_anchorGravity="right|bottom"

app:layout_anchor - 设置FloatingActionButton的锚点，即以哪个控件为参照点设置位置。

app:layout_anchorGravity - 设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

设置后fab会一直在content（TextView）控件的右下方，并且当content 内容超出屏幕后 fab会停留在屏幕的右下方，不会移除屏幕。代码里设置fab点击事件时如下：

override fun onClick(v: View?) {

when(v!!.id){

fab.id->{

Snackbar.make(fab,"我是FloatingActionButtonActivity!",Snackbar.LENGTH_LONG).show()

}}}

当使用普通布局当做fab父布局时，fab在右下方，弹出snackbar 就会遮挡fab。CoordinatorLayout 当做父布局可以很好的解决这个问题。

ok，这样就简单使用FloatingActionButton了。

Android Material Design其他篇

「Snackbar」

「TextInputLayout」