Design下FloatingActionButton的簡單使用

今天說下Design包下的FloatingActionButton浮動按鈕。關於Design的介紹就不說了。上一篇的博文有。大家可以看看。

簡稱FAB，浮動操作按鈕一般作爲進階操作的開關，在用戶界面中通常是一個漂浮的小圓圈，它有自身獨特的動態效果，比如變形、彈出、位移等等，代表着在當前頁面上用戶的特定的操作。

現在說下使用方法，首先需要導入design包。

搜索design包然後導入。然後在build.gradle文件下就多了這樣一句代碼

嫌麻煩的話也可以直接在build.gradle文件下加入這句代碼。我是習慣了。

下面就可以愉快使用FloatingActionButton啦。首先是佈局activity_main.xml.上代碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.floatiingactionbuttontest.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint = "#007787"
        app:rippleColor="#887416"
        app:elevation = "10dp"
        app:pressedTranslationZ="12dp"
        app:fabSize = "normal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        />
</RelativeLayout>

同樣需要注意的是記得加上它的屬性命名空間

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

下面我來說下它特有屬性的每個意思。

app:backgroundTint = "#007787"

這個代表的意思是按鈕還沒點擊之前的顏色。

app:rippleColor="#887416"

這個是按鈕點擊之後的按鈕的顏色

app:elevation = "10dp"

這個表示按鈕在界面上顯示的時候外圍浮動陰影的效果，值越大，效果越明顯

app:pressedTranslationZ="12dp"

這個屬性表示按鈕點擊之後外圍浮動的陰影效果

app:fabSize = "normal"

這個屬性則表示按鈕的類型，相當於style吧。這個屬性有兩個值，normal表示的是正常的樣式，還有一個是mini表示的是更小的一種樣式。

它還可以可是一個背景圖片，本例子就不加了。

好了，就是這麼簡單的一個控件。下面看一下基本的用法

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton floatBtn;
    private Context mcontent = MainActivity.this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatBtn = ((FloatingActionButton) findViewById(R.id.floatBtn));


        initView();
    }

    private void initView() {
        floatBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mcontent, "你點擊了FloatingActionButton", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

相信大家都看的明白所以就沒加註釋，哈哈。

簡單吧。其實還可以有其他比較複雜的樣式，因爲時間原因就不一一說了。

下面看下效果圖。

好了，今晚就到這裏。共勉！晚安