Android材料設計之FloatingActionButton+Snackbar+SheetX3

摘要： 本文把幾個小東西講一下 FloatingActionButton:浮動按鈕 Snackbar:底彈框 BottomSheet:底抽屜 BottomSheetDialog :抽屜對話方塊 BottomSheetDialogFragment:抽屜對話方塊Fragment 一...

本文把幾個小東西講一下

FloatingActionButton:浮動按鈕

Snackbar:底彈框

BottomSheet:底抽屜

BottomSheetDialog :抽屜對話方塊

BottomSheetDialogFragment:抽屜對話方塊Fragment

一、FloatingActionButton

1.基本認知

問：FloatingActionButton何許人也? --- 答：View國 ImageView 人氏

2.常用屬性

顏色android:backgroundTint="@color/jietelan" 
 圖片android:src="@drawable/icon_t"
 厚度app:borderWidth="@dimen/dp_4"
 陰影app:elevation="@dimen/dp_8"
 尺寸app:fabSize="normal"
 位置android:layout_gravity="bottom|end"
 點選深度 app:pressedTranslationZ="@dimen/dp_16"
 點選顏色 app:rippleColor="@color/yase"/>
 掛接view app:layout_anchor="@id/id_tv_moving"

3.使用： ofollow,noindex">AppBarLayout+CoordinatorLayout篇 的佈局展示一下掛接

二、Snackbar和FloatingActionButton聯動

Snackbar感覺就像下面出來的Toast,只是可以互動而已

1.程式碼實現：

public class FabSnaActivity extends AppCompatActivity {
@BindView(R.id.fab)
FloatingActionButton mFab;
@BindView(R.id.cl_root)
CoordinatorLayout mClRoot;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_snackbar);
ButterKnife.bind(this);
mFab.setOnClickListener(v -> {
Snackbar.make(mClRoot, "Hello Snack", Snackbar.LENGTH_LONG)
.setAction("Toast", v1 -> {
Toast.makeText(this, "Hi , I'm toly", Toast.LENGTH_SHORT).show();
}).show();
});
}
}

2.佈局

<?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/cl_root"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|end"
android:layout_margin="10dp"
android:backgroundTint="@color/jietelan"
android:clickable="true"
android:focusable="true"
android:src="@drawable/icon_t"
app:borderWidth="@dimen/dp_4"
app:elevation="@dimen/dp_8"
app:fabSize="normal"
app:pressedTranslationZ="@dimen/dp_16"
app:rippleColor="@color/yase"/>

</android.support.design.widget.CoordinatorLayout>

3.改變Snackbar外觀

1).追蹤一下原始碼:getView()

可以發現把Snackbar的跟佈局返回出來了,是個FrameLayout,好了，可以肆無忌憚了

--> public View getView() {
return mView;
}

--> final SnackbarBaseLayout mView;

--> static class SnackbarBaseLayout extends FrameLayout

2).修改佈局

mFab.setOnClickListener(v -> {
Snackbar snackbar = Snackbar.make(mClRoot, "Hello Snack", Snackbar.LENGTH_LONG);
ViewGroup view = (ViewGroup) snackbar.getView();
view.removeAllViews();//清除原來的View
//載入佈局
View child = LayoutInflater.from(this).inflate(R.layout.item_of_base, view, false);
view.addView(child);//新增自己的View
snackbar.show();
});

三、底部抽屜：bottom_sheet

個人感覺向抽屜，放一些小的功能按鈕上面的感覺會不錯

bottom_sheet要在CoordinatorLayout裡才能用

注：任何View都可以作為抽屜內容，下面以LinearLayout作為實驗物件

1.抽屜內佈局

behavior_hideable:是否可以完全淹沒抽屜

layout_behavior：內建的bottom_sheet行為，不用動

behavior_peekHeight：要留多長的頭在外面(也就是說，至少給個抽屜把手吧)

<?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:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="30dp"
app:layout_behavior="@string/bottom_sheet_behavior">

<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="@color/transparent"
android:src="@drawable/icon_up_3"/>

<TextView
style="@style/TVTestCenter"
android:background="@color/feise"
android:text="Sheet1"/>

<TextView
style="@style/TVTestCenter"
android:background="@color/yase"
android:text="Sheet2"/>

<TextView
style="@style/TVTestCenter"
android:background="@color/zhuqing"
android:text="Sheet3"/>

<TextView
style="@style/TVTestCenter"
android:background="@color/yuebai"
android:text="Sheet4"/>

</LinearLayout>

2.直接內嵌如CoordinatorLayout

<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/cl_root"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include layout="@layout/sheet_4"/>

//FloatingActionButton---同上
</android.support.design.widget.CoordinatorLayout>

3.狀態監聽

1).五種狀態，見下：看動圖應該挺清楚的

public static final int STATE_DRAGGING = 1;//手指接觸正在移動
public static final int STATE_SETTLING = 2;//手指釋放正在移動
public static final int STATE_EXPANDED = 3;//展開
public static final int STATE_COLLAPSED = 4;//收起
public static final int STATE_HIDDEN = 5;//隱藏

2).監聽：BottomSheet

//成員變數
@BindView(R.id.bottom_sheet)
LinearLayout mBottomSheet;
private BottomSheetBehavior<LinearLayout> mBottomSheetBehavior;

mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
ToastUtil.showAtOnce(FabSnaActivity.this, "newState:" + newState);
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
L.d(slideOffset + L.l());//slideOffset：移動的分度值
}
});

4.FloatingActionButton開啟和關閉BottomSheet

//成員變數
private boolean isOpen;

mFab.setOnClickListener(v -> {
if (isOpen) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
isOpen = !isOpen;
});

四、BottomSheetDialog和BottomSheetDialogFragment

1.BottomSheetDialog

這個非常簡單就三行,就是一個底部出來的Dialog,並且可以自定義佈局

mFab.setOnClickListener(v -> {
mBottomSheetDialog = new BottomSheetDialog(this);
mBottomSheetDialog.setContentView(R.layout.a_pome_item);
mBottomSheetDialog.show();
 });

2.BottomSheetDialogFragment

效果和上面一樣，只不過這裡是一個Fragment

public class MyBSDFragment extends BottomSheetDialogFragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.a_pome_item, container, false);
}

}

//使用：
new MyBSDFragment().show(getSupportFragmentManager(), "toly");

好了，基本上FloatingActionButton+Snackbar+SheetX3的用法都涉及了

後記：捷文規範

1.本文成長記錄及勘誤表

Android_Material_Design_Test" target="_blank" rel="nofollow,noindex">專案原始碼	日期	備註
V0.1--github	2018-11-29	Android材料設計之FloatingActionButton+Snackbar+SheetX3

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的掘金	個人網站

3.宣告

1----本文由張風捷特烈原創,轉載請註明

2----歡迎廣大程式設計愛好者共同交流

3----個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

4----看到這裡，我在此感謝你的喜歡與支援