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>
           

效果圖