Androidfloatingactionbutton詳解

Androidfloatingactionbutton是一種圓形帶有圖標的簡易浮動按鈕，通過點擊它可以執行某些操作。本文將從多個方面介紹androidfloatingactionbutton的使用方法，包括布局、樣式、監聽事件、動畫效果等。

一、布局

1、將androidfloatingactionbutton添加到布局中：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/bottomNavigationView"
    app:layout_anchorGravity="bottom|end" />

其中，app:elevation和app:pressedTranslationZ是用於設置按鈕的陰影效果，在材料設計中，可視陰影是一個很重要的概念。app:layout_anchor和app:layout_anchorGravity是用於設置floating action button的位置，可以將它放置在布局的底部中心。

2、使用CoordinatorLayout布局：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/content_main"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

使用CoordinatorLayout讓floating action button接管了整個頁面，它可以讓懸浮按鈕與界面其它元素進行交互，從而實現一些令人驚訝的效果。

二、樣式

1、背景顏色：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:backgroundTint="@color/colorPrimary"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/bottomNavigationView"
    app:layout_anchorGravity="bottom|end" />

使用android:backgroundTint屬性可以設置floating action button的背景顏色。

2、圖標：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:tint="@color/colorIcon"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/bottomNavigationView"
    app:layout_anchorGravity="bottom|end" />

使用android:tint屬性可以為圖標設置顏色。

三、監聽事件

1、點擊事件：

floatingActionButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //在按鈕被點擊時執行的代碼
    }
});

2、長按事件：

floatingActionButton.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View view) {
        //在按鈕被長按時執行的代碼
        return true;
    }
});

3、動態改變按鈕圖標：

floatingActionButton.setImageResource(R.drawable.ic_alarm);

4、動態改變按鈕顏色：

floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorAccent)));

四、動畫效果

1、隱藏：

floatingActionButton.hide();

2、顯示：

floatingActionButton.show();

3、移動：

floatingActionButton.animate().x(100).y(200).setDuration(1000);

4、縮放：

floatingActionButton.animate().scaleX(2).scaleY(2).setDuration(1000);

5、旋轉：

floatingActionButton.animate().rotation(360).setDuration(1000);

五、總結

本文詳細介紹了androidfloatingactionbutton的使用方法，包括布局、樣式、監聽事件、動畫效果等。希望對讀者有所幫助。