終于寫到 Behavior 這個東東了,這個東西是隨著 5.0 系統(tǒng)蹄皱,是 CoordinatorLayout 的一個重要特性所森,重要到現(xiàn)在很多 app 都在用囱持。
什么是 Behavior
上面說到 Behavior 是 CoordinatorLayout 的一個重要特性,我們可以管他叫:聯(lián)動焕济。啥纷妆,為啥叫這個名字,因為 Behavior 是把頁面中可滾動控件的滾動事件和其他任何對這個滾動事件有興趣的控件結(jié)合起來晴弃。在封裝上看就是把滾動事件拋出來掩幢,由感興趣的控件來消費,很符合觀察者模式的思想上鞠。
大家試想际邻,之前我們監(jiān)聽滾動事件都是在滾動控件上注冊 listener 對象,代碼上適合對象強耦合的芍阎,現(xiàn)在呢世曾,google 把這種行為抽象成 Behavior 這個接口,提供一些列默認實現(xiàn)谴咸,也可以去自定義轮听,當然自定義才是最重要的環(huán)節(jié),并且包含部分 view 的布局方法在內(nèi)岭佳,讓我們有很大的定制行血巍,最主要的是可以做到代碼的解耦,功能上的代碼分割珊随,更利于我們維護述寡。
Behavior 的系統(tǒng)默認實現(xiàn)
google 提供了很多的 Behavior 實現(xiàn),比如AppbarLayout內(nèi)部的Behavior,專門協(xié)調(diào) AppbarLayout 與可滾動View(NestedScrollView,RecyclerView )的, FloatActionButton內(nèi)部的Behavior ,協(xié)調(diào)和Snackbar 的關(guān)系叶洞,保證Snackbar 彈出的時候不被FAB 遮擋鲫凶。還有就是上面說的Snackbar內(nèi)部的Behavior 等等。
另外還提供了幾個封裝好的帶很不錯效果的 Behavior 實現(xiàn):
- BottomSheetBehavior
- BottomSheetDialog
- SwipeDissmissBehavior
這2個 Behavior 的實現(xiàn)就是這節(jié)我們學習的內(nèi)容衩辟,學習總是先易后難掀序,自定義 Behavior 下一節(jié)說。
Behavior 的使用注意項
Behavior 是 CoordinatorLayout 中 LayoutParams 的一個屬性惭婿,我們知道子類的 LayoutParams 類型是父類的 LayoutParams 類型,那么子類的子類的 LayoutParams 類型可就不是父類的 LayoutParams 類型叶雹,所以注意一下:
- CoordinatorLayout 必須作為項目的跟節(jié)點
- 想使用 Behavior 的 view 必須是 CoordinatorLayout 的直接子類
BottomSheetBehavior
什么是 BottomSheetBehavior 财饥,從效果來描述就是底部彈出的卡片,看下效果圖:
ps: 有個簡單的例子介紹的比我清楚
看著是不是有些熟悉啊折晦,一些 app 的點擊分享彈出的 view 不就是這個樣子的嘛钥星!
使用起來也是很簡單的:
- 我們在 xml 中給目標 view 添加這個 app:layout_behavior="@string/bottom_sheet_behavior"
- 我們使用代碼獲取到這個 BottomSheetBehavior 對象, BottomSheetBehavior sheetBehavior = BottomSheetBehavior.from(shareView)
- 我們使用 mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED) 設(shè)置狀態(tài)的方法就能控制展開還是折疊
我們主要關(guān)心3個參數(shù)
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior"
// peekHeight 是當 Bottom Sheets 關(guān)閉的時候满着,底部我們能看到的高度,默認是0不可見谦炒。
app:behavior_peekHeight="50dp"
// hideable是當我們拖拽下拉的時候贯莺,bottom sheet是否能全部隱藏。
app:behavior_hideable="true"
需要注意的是:
- BottomSheetBehavior 默認是顯示折疊狀態(tài)的
- app:behavior_peekHeight="0dp" 屬性設(shè)置 view 折疊狀態(tài)的高度
- 設(shè)置 behavior_peekHeight=0 后才能做到默認不顯示底部卡片宁改,或者用代碼設(shè)置狀態(tài)也可以做到默認不顯示缕探、
setBottomSheetCallback 可以監(jiān)聽回調(diào)狀態(tài), onStateChanged 監(jiān)聽狀態(tài)的改變, onSlide 是拖拽的回調(diào), onStateChanged 可以監(jiān)聽到的回調(diào)一共有5種:
BottomSheetBehavior 的5種狀態(tài):
- STATE_EXPANDED
展開狀態(tài),顯示完整布局还蹲。 - STATE_COLLAPSED
折疊狀態(tài)爹耗,顯示peekHeigth 的高度,如果peekHeight為0谜喊,則全部隱藏,與STATE_HIDDEN效果一樣潭兽。 - STATE_DRAGGING
拖拽時的狀態(tài) - STATE_HIDDEN
隱藏時的狀態(tài) - STATE_SETTLING
釋放時的狀態(tài)
xml
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="switchState"
android:text="展開顯示"
android:textSize="22sp"/>
<android.support.constraint.ConstraintLayout
android:id="@+id/view_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<TextView
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="switchState"
android:text="第一行代碼"
android:textSize="22sp"/>
<TextView
android:id="@+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:onClick="switchState"
android:text="第二行代碼"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="@id/view1"/>
<TextView
android:id="@+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:onClick="switchState"
android:text="開發(fā)藝術(shù)探索"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="@id/view2"/>
<TextView
android:id="@+id/view4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:onClick="switchState"
android:text="android進階之光"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="@id/view3"/>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
java
public class BottomSheetBehaviorActivity extends AppCompatActivity {
private View view_bottom;
private BottomSheetBehavior mBottomSheetBehavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_sheet_behavior);
view_bottom = findViewById(R.id.view_bottom);
mBottomSheetBehavior = BottomSheetBehavior.from(view_bottom);
}
public void switchState(View view) {
if (!(view instanceof Button) || mBottomSheetBehavior == null) {
return;
}
Button button = (Button) view;
if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
button.setText("展開顯示");
return;
}
if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
button.setText("折疊收起");
return;
}
}
BottomSheetDialog
BottomSheetDialog 是對 BottomSheetBehavior 的封裝,用一個 dialog 作為模板斗遏,綁定我們的特定 layout 布局山卦,BottomSheetDialog 的效果比 BottomSheetBehavior 要好玩多了,他可以支持拖拽到頂部诵次,成為一個 activity 的樣子账蓉,使用上和 dialog 是一樣的。
大家注意啊藻懒,BottomSheetDialog 是系統(tǒng)實現(xiàn)剔猿,不是自定義實現(xiàn)啊,我剛看的時候誤認為是自定義實現(xiàn)了嬉荆,還去看源碼呢归敬。。鄙早。
先看看效果:
if (dialog == null) {
dialog = new BottomSheetDialog(this);
dialog.setContentView(R.layout.layout_book_list2);
dialog.setCanceledOnTouchOutside(true);
dialog.setCancelable(true);
}
dialog.show();
是不是很簡單汪茧,就是這么任性,就是一個 dialog...
網(wǎng)易云音樂的播放列表限番,高德地圖的路線規(guī)劃都是用這個做的舱污,都是可以拖拽到頂作為一個 activity 的樣子去顯示,然后滑動關(guān)閉弥虐,說實話這個效果第一次使用真是驚艷我了扩灯,還在想這個是怎么實現(xiàn)的呢,肯定很復雜吧霜瘪,要讓 view 展示出來珠插,然后監(jiān)聽滑動,拖拽到頂停止颖对,然后監(jiān)聽滑動做位移捻撑,隱藏 view,好復雜。沒想到原來就是這么一個 dialog顾患,真是想感嘆封裝的強大啊番捂,所以學號設(shè)計模式,然后做好封裝才是代碼功底的極大提現(xiàn)啊江解。
SwipeDissmissBehavior
這個效果真心覺得沒啥用设预,效果號僵硬好爛,就是view 隨著手指的左移右移膘流,然后位移隱藏自己絮缅,隱藏不能隨著手機移動,很僵硬呼股。
老規(guī)矩還是來看下:
還是給我們的目標 view 添加這個 Behavior 即可耕魄,然后代碼 new 一個 SwipeDismissBehavior 出來,設(shè)置參數(shù)彭谁,然后綁定給 view 的 layoutParams 參數(shù)
mSwipeLayout = findViewById(R.id.swipe_layout);
SwipeDismissBehavior swipe = new SwipeDismissBehavior();
/**
* //設(shè)置滑動的方向吸奴,有3個值
*
* 1,SWIPE_DIRECTION_ANY 表示向左像右滑動都可以缠局,
* 2则奥,SWIPE_DIRECTION_START_TO_END,只能從左向右滑
* 3狭园,SWIPE_DIRECTION_END_TO_START读处,只能從右向左滑
*/
swipe.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_START_TO_END);
swipe.setStartAlphaSwipeDistance(0f);
swipe.setSensitivity(0.2f);
swipe.setListener(new SwipeDismissBehavior.OnDismissListener() {
@Override
public void onDismiss(View view) {
Log.e(TAG,"------>onDissmiss");
}
@Override
public void onDragStateChanged(int state) {
Log.e(TAG,"------>onDragStateChanged");
}
});
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mSwipeLayout.getLayoutParams();
if(layoutParams!=null){
layoutParams.setBehavior(swipe);
}
ps: demo 地址: github