android ui 學習系列 - 安卓自帶Behavior的使用

終于寫到 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 類型叶雹,所以注意一下:

  1. CoordinatorLayout 必須作為項目的跟節(jié)點
  2. 想使用 Behavior 的 view 必須是 CoordinatorLayout 的直接子類

BottomSheetBehavior

什么是 BottomSheetBehavior 财饥,從效果來描述就是底部彈出的卡片,看下效果圖:


ezgif.com-video-to-gif.gif

ps: 有個簡單的例子介紹的比我清楚

看著是不是有些熟悉啊折晦,一些 app 的點擊分享彈出的 view 不就是這個樣子的嘛钥星!

使用起來也是很簡單的:

  1. 我們在 xml 中給目標 view 添加這個 app:layout_behavior="@string/bottom_sheet_behavior"
  2. 我們使用代碼獲取到這個 BottomSheetBehavior 對象, BottomSheetBehavior sheetBehavior = BottomSheetBehavior.from(shareView)
  3. 我們使用 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)了嬉荆,還去看源碼呢归敬。。鄙早。

先看看效果:


ezgif.com-video-to-gif.gif
 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ī)矩還是來看下:


ezgif.com-video-to-gif.gif

還是給我們的目標 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


參考資料:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爬泥,一起剝皮案震驚了整個濱河市猎唁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌著摔,老刑警劉巖绎谦,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件管闷,死亡現(xiàn)場離奇詭異,居然都是意外死亡窃肠,警方通過查閱死者的電腦和手機包个,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冤留,“玉大人碧囊,你說我怎么就攤上這事∠伺” “怎么了糯而?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長肪跋。 經(jīng)常有香客問我,道長土砂,這世上最難降的妖魔是什么州既? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任谜洽,我火速辦了婚禮,結(jié)果婚禮上吴叶,老公的妹妹穿的比我還像新娘阐虚。我一直安慰自己,他們只是感情好蚌卤,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布实束。 她就那樣靜靜地躺著,像睡著了一般逊彭。 火紅的嫁衣襯著肌膚如雪咸灿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天侮叮,我揣著相機與錄音避矢,去河邊找鬼。 笑死囊榜,一個胖子當著我的面吹牛审胸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播卸勺,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砂沛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了曙求?” 一聲冷哼從身側(cè)響起碍庵,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎圆到,沒想到半個月后怎抛,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡芽淡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年马绝,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挣菲。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡富稻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出白胀,到底是詐尸還是另有隱情椭赋,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布或杠,位于F島的核電站哪怔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜认境,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一胚委、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧叉信,春花似錦亩冬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至佳遂,卻和暖如春营袜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背讶迁。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工连茧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人巍糯。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓啸驯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親祟峦。 傳聞我的和親對象是個殘疾皇子罚斗,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容