老婆保佑豹缀，代碼無BUG
前言
Material Design 系列第三篇 FloatingActionButton
目錄
- 一：使用
- xml
- activity
- 二：參數(shù)詳解
- 三：與CoordinatorLayout 一起使用
引用
compile 'com.android.support:design:26.1.0'
Untitled.gif
FloatingActionButton是繼承至ImageView脱羡，所以FloatingActionButton擁有ImageView的所有屬性先舷。CoordinatorLayout可以用來配合FloatingActionButton浮動按鈕坦袍，設(shè)置app：layout_anchor和app:layout_anchorGravity構(gòu)建出特定的位置與效果的FloatingActionButton今穿。
一：使用
1. xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="bottom"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:backgroundTint="#30469b"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right"
app:pressedTranslationZ="12dp"
app:rippleColor="#a6a6a6" />
</LinearLayout>
2. activity
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "touch", Snackbar.LENGTH_SHORT).show();
}
});
二：參數(shù)詳解
| 參數(shù) | 說明 |
|---|---|
| app:backgroundTint | 設(shè)置FAB的背景顏色腋妙。 |
| app:rippleColor | 設(shè)置FAB點擊時的背景顏色枣抱。 |
| app:borderWidth | 該屬性尤為重要佩厚，如果不設(shè)置0dp豺瘤，那么在4.1的sdk上FAB會顯示為正方形吆倦，而且在5.0以后的sdk沒有陰影效果。所以設(shè)置為borderWidth="0dp"坐求。 |
| app:elevation | 默認(rèn)狀態(tài)下FAB的陰影大小蚕泽。 |
| app:pressedTranslationZ | 點擊時候FAB的陰影大小。 |
| app:fabSize | 設(shè)置FAB的大小桥嗤，該屬性有兩個值须妻，分別為normal和mini，對應(yīng)的FAB大小分別為56dp和40dp泛领。 |
| src | 設(shè)置FAB的圖標(biāo)荒吏，Google建議符合Design設(shè)計的該圖標(biāo)大小為24dp。 |
| app:layout_anchor | 設(shè)置FAB的錨點渊鞋，即以哪個控件為參照點設(shè)置位置绰更。 |
| app:layout_anchorGravity | 設(shè)置FAB相對錨點的位置，值有 bottom锡宋、center动知、right、left员辩、top等盒粮。 |
三：與CoordinatorLayout 一起使用
Untitled.gif
會讓FloatingActionButton浮動起來
實現(xiàn)
1。 修改根布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/CoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
app:backgroundTint="#30469b"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right"
app:pressedTranslationZ="12dp"
app:rippleColor="#a6a6a6" />
</android.support.design.widget.CoordinatorLayout>
2. 修改SnackBar
Snackbar.make(findViewById(R.id.CoordinatorLayout), "touch", Snackbar.LENGTH_SHORT).show();
源碼地址
點擊進(jìn)入GitHub
最后
全部系列
