Android 之協(xié)調(diào)伸縮CoordinatorLayout,CollapsingToolbarLayout

前言#


 上一篇文章承諾會(huì)講解折疊伸縮的效果,所以廢話不多說(shuō)

上gif#


Gank2.gif

一句話#


當(dāng)你初次看見(jiàn)這樣的效果可能會(huì)覺(jué)得實(shí)現(xiàn)起來(lái)比較麻煩严望。而我告訴你,只需要正確的配置XML中的控件即可.

上代碼#


請(qǐng)結(jié)合講解模塊一起閱讀

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
     
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="40dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
         
            <ImageView
                android:id="@+id/image_collapsing"
                android:layout_width="match_parent"
                android:layout_height="380dp"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                android:transitionName="@string/transition_fab"
                app:layout_collapseMode="parallax" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_collapsing"
                android:layout_width="match_parent"
                android:layout_height="?android:actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>

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


    <android.support.v7.widget.RecyclerView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>




    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end" />        

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

講解#


關(guān)鍵控件###

  • CoordinatorLayout

    CoordinatorLayout作為整個(gè)布局的父布局容器轮听。
    給你的可以滑動(dòng)的控件剥哑,例如RecyclerView設(shè)置如下屬性:
    app:layout_behavior=@string/appbar_scrolling_view_behavior
    CoordinatorLayout還提供了layout_anchor 和 layout_anchorGravity屬性一起配
    合使用掠拳,可以用于設(shè)置FloatingActionButton的位置蚕涤,此處我是放在appBar的右下角筐赔。
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"

  • AppBarLayout

    AppBarLayout里面定義的view只要設(shè)置了app:layout_scrollFlags屬性,就可以在RecyclerView滾動(dòng)事件發(fā)生的時(shí)候被觸發(fā)某種行為
    例如我給CollapsingToolbarLayout控件設(shè)置了 app:layout_scrollFlags="scroll|exitUntilCollapsed"
    此刻如果沒(méi)有這個(gè)屬性揖铜,CollapsingToolbarLayout是不會(huì)折疊的

    那么問(wèn)題來(lái)了茴丰,layout_scrollFlags中的屬性值除了可以觸發(fā)折疊的行為,還有其它的屬性值嗎天吓?并且各個(gè)屬性的意義是什么贿肩?來(lái)吧,看下圖
    scroll
    至少有一個(gè)scroll龄寞,即可滾動(dòng)

      enterAlways
          向下滾動(dòng)即可見(jiàn)汰规。例如下拉時(shí),立即顯示Toolbar
    
      exitUntilCollapsed
          這個(gè)flag是定義何時(shí)收縮物邑。
          當(dāng)你定義了一個(gè)minHeight溜哮,這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失
          
      enterAlwaysCollapsed
          這個(gè)flag是定義何時(shí)展開(kāi)。
          當(dāng)你定義了一個(gè)最小高度minHeight色解, 同時(shí)enterAlways也定義了茂嗓,那么view將在到達(dá)這個(gè)最小高度的時(shí)候開(kāi)始展示
    
       snap:當(dāng)一個(gè)滾動(dòng)事件結(jié)束,它將根據(jù)顯示百分比的大小自動(dòng)滾動(dòng)到收縮或展開(kāi)冒签。
    
  • CollapsingToolbarLayout

    CollapsingToolbarLayout字面意思就是折疊toolBar在抛。所以不用多說(shuō)你一定可以想到這個(gè)東西就是完成折疊伸縮的玩意兒。
    CollapsingToolbarLayout里面定義的view只要設(shè)置了app:layout_collapseMode屬性萧恕,就可以控制子視圖的折疊模式刚梭。那什么是折疊模式?
    折疊模式分為兩種:
    “pin”: 固定模式票唆。在收縮的時(shí)候最后固定在頂端(例如向上滾動(dòng)的時(shí)候就固定toolBar)
    “parallax”:視差模式朴读,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果。(例如向下滾動(dòng)的時(shí)候就展開(kāi)ImageView)

結(jié)束#


如果你認(rèn)真閱讀過(guò)我的文章走趋,并且認(rèn)真的看過(guò)xml布局
那么細(xì)心的你一定會(huì)發(fā)現(xiàn)在CollapsingToolbarLayout中還有以下屬性衅金。
以這樣的方式講解,主要是希望在你閱讀的時(shí)候結(jié)合上下文去思考簿煌。

 contentScrim             -    設(shè)置當(dāng)完全折疊(收縮)后的背景顏色氮唯。
 expandedTitleMarginEnd   -    沒(méi)有擴(kuò)張的時(shí)候標(biāo)題顯示的位置
 expandedTitleMarginStart -    擴(kuò)張的時(shí)候標(biāo)題向左填充的距離。

 statusBarScrim - 設(shè)置折疊時(shí)狀態(tài)欄的顏色
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末姨伟,一起剝皮案震驚了整個(gè)濱河市惩琉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌夺荒,老刑警劉巖瞒渠,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件良蒸,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡伍玖,警方通過(guò)查閱死者的電腦和手機(jī)嫩痰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)窍箍,“玉大人串纺,你說(shuō)我怎么就攤上這事∽醒啵” “怎么了造垛?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵魔招,是天一觀的道長(zhǎng)晰搀。 經(jīng)常有香客問(wèn)我,道長(zhǎng)办斑,這世上最難降的妖魔是什么外恕? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮乡翅,結(jié)果婚禮上鳞疲,老公的妹妹穿的比我還像新娘。我一直安慰自己蠕蚜,他們只是感情好尚洽,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著靶累,像睡著了一般腺毫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挣柬,一...
    開(kāi)封第一講書(shū)人閱讀 49,749評(píng)論 1 289
  • 那天潮酒,我揣著相機(jī)與錄音,去河邊找鬼邪蛔。 笑死急黎,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的侧到。 我是一名探鬼主播勃教,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼匠抗!你這毒婦竟也來(lái)了故源?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤戈咳,失蹤者是張志新(化名)和其女友劉穎心软,沒(méi)想到半個(gè)月后壕吹,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡删铃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年耳贬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猎唁。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡咒劲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诫隅,到底是詐尸還是另有隱情腐魂,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布逐纬,位于F島的核電站蛔屹,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏豁生。R本人自食惡果不足惜兔毒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望甸箱。 院中可真熱鬧育叁,春花似錦、人聲如沸芍殖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)豌骏。三九已至龟梦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間肯适,已是汗流浹背变秦。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留框舔,地道東北人蹦玫。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像刘绣,于是被迫代替她去往敵國(guó)和親樱溉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

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