3.Android support design FloatingActionButton

• Android support design FloatingActionButton
  • FloatingActionButton介绍
  • gradle配置
  • 背景颜色
  • 阴影大小
  • 控件大小
  • 设置图片
  • 布局设置
  • 效果图

FloatingActionButton介绍

FloatingActionButton就是一个悬浮的button，它继承自ImageView，所以就必然拥有ImageView的所有属性。

唯一值得注意：要想改变FloatingActionButton的背景颜色，不能使用android:background属性。

在注意一点：所有FloatingActionButton拓展的属性，只能用

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

命名空间下的属性去赋值。

gradle配置

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

或者更高版本

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}
           

背景颜色

前面也强调过改变背景颜色不能使用android:background属性，同时也不能用android:backgroundTint属性

使用的是：

app:backgroundTint

阴影大小

无阴影

app:elevation="0dp"

控件大小

貌似无法通过

android:layout_width

和

android:layout_height

去改变FloatingActionButton的控件的大小。

可以通过

app:fabSize

去设置大小：

• app:fabSize=”mini”
• app:fabSize=”normal”

设置图片

FloatingActionButton是ImageVIew的子类，自然也能使用：

android:src

布局设置

FloatingActionButton的布局就很简单，不像NavigationView那样。就把FloatingActionButton当成ImageView就好了。

<RelativeLayout 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.support.design.widget.FloatingActionButton
        android:id="@+id/fab_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        android:visibility="visible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/fab_margin"
        android:layout_toLeftOf="@id/fab_one"
        android:src="@android:drawable/ic_popup_sync"
        android:visibility="visible"
        app:elevation="0dp"
        app:backgroundTint="#3435bb" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/fab_margin"
        android:layout_toLeftOf="@id/fab_two"
        android:src="@android:drawable/ic_dialog_dialer"
        android:visibility="visible"
        app:backgroundTint="#bba707"
        app:fabSize="mini" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/fab_margin"
        android:layout_toLeftOf="@id/fab_three"
        android:src="@mipmap/mm"
        android:visibility="visible"
        app:backgroundTint="#9406bb"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/fab_margin"
        android:layout_toLeftOf="@id/fab_four"
        android:src="@android:drawable/ic_dialog_alert"
        android:visibility="visible"
        app:backgroundTint="#bb6787" />

</RelativeLayout>
           

效果图