CoordinatorLayout系列(一):基本使用

準備

這是Google官方的文檔(請自備梯子)
CoordinatorLayout

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views

總結(jié)一下就是集畅，CoordinatorLayout是加強版的FrameLayout,但并不是直接繼承，基本的布局方式跟FrameLayout是一樣的鉴嗤。

加強的點是CoordinatorLayout可以給它的child之間提供各種交互特性盛龄，簡單來說就是一個child可以根據(jù)另一個child的狀態(tài)來相應(yīng)的更新自己的狀態(tài)饰迹，大部分情況都是位置的更新。所以應(yīng)該叫協(xié)調(diào)布局余舶？啊鸭？？

先看幾個Demo匿值，自己感受一下莉掂，看一下這個療效怎么樣


1.gif

3.gif

這里所有的代碼都已經(jīng)放在Github

開始

CoordinatorLayout主要提供了三種方式來實現(xiàn)child之間的互動:

  1. 通過anchor實現(xiàn)
  2. 通過insetEdge實現(xiàn)
  3. 通過Behaviors實現(xiàn)

那么我們依次來看一下這三種方式是怎么使用的
提示:TouchView是一個可以自由拖動的View

1. anchor

關(guān)鍵詞：layout_anchor和layout_anchorGravity

簡單說明：child B通過layout_anchor 設(shè)置child A為anchor，再通過layout_anchorGravity來根據(jù)需要設(shè)置屬性千扔，這樣B就可以A的位移相應(yīng)的位移了憎妙。

使用步驟:

  1. 先設(shè)置一個被觀察的child A的id
<com.xugter.cooridnatorlayoutstudy.other.TouchView
    android:id="@+id/view_host"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@color/colorPrimary"
    app:layout_insetEdge="top" />
  1. 然后在另一個觀察的child B的設(shè)置兩個參數(shù)，layout_anchor和layout_anchorGravity
<View
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@color/colorAccent"
    app:layout_anchor="@id/view_host"
    app:layout_anchorGravity="bottom|end" />

效果如下曲楚，B就會隨著A的移動而跟著移動


anchor.gif

2. insetEdge

關(guān)鍵詞：layout_insetEdge和layout_dodgeInsetEdges

簡單說明：child A 通過layout_insetEdge來設(shè)置插入CoordinatorLayout的方向厘唾，child B通過設(shè)置layout_dodgeInsetEdges來躲避來自相同方向的A，這樣就可以避免產(chǎn)生重疊龙誊。

使用步驟:

  1. 先在被觀察的child A中設(shè)置參數(shù)layout_insetEdge
<com.xugter.cooridnatorlayoutstudy.other.TouchView
    android:id="@+id/view_host"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@color/colorPrimary"
    app:layout_insetEdge="top" />
  1. 在觀察的child B中設(shè)置參數(shù)layout_dodgeInsetEdges
<View
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:background="@android:color/black"
    app:layout_dodgeInsetEdges="top" />

效果如下如上面的那個黑塊

另外介紹兩個特殊的控件跟insetEdge有關(guān)
FloatingActionButton和Snackbar

這兩個控件可以產(chǎn)生如下的交互


insetEdge.gif

原因是FloatingActionButton自帶app:layout_dodgeInsetEdges="bottom"抚垃，
而Snackbar自帶app:layout_insetEdge="bottom"，所以當Snackbar出現(xiàn)的時候FloatingActionButton能發(fā)生躲避行為

我們還可以自己加一個View來驗證一下Snackbar是自帶app:layout_insetEdge="bottom"

<View
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="bottom"
    android:background="@android:color/holo_blue_bright"
    app:layout_dodgeInsetEdges="bottom" />

這個view加入了app:layout_dodgeInsetEdges="bottom就可以產(chǎn)生和FloatingActionButton一樣的行為趟大，效果參考上面的藍塊

3. Behaviors

Behaviors的功能就強大很多鹤树，后面會重點介紹。這里先簡單介紹幾個Google官方提供的幾個使用了Behavior的控件逊朽。

便于理解我采用了最簡單的結(jié)構(gòu)罕伯，AppBarLayout+NestedScrollView,其中NestedScrollView可以由其他實現(xiàn)了NestedScrollingChild的控件代替

如下:
幾個已經(jīng)實現(xiàn)了NestedScrollingChild的控件

其中我們最常用的大概就是下面這兩貨了，注意ScrollView是不可以的

  • NestedScrollView
  • RecyclerView

注意:一定要在NestedScrollView設(shè)置

app:layout_behavior="@string/appbar_scrolling_view_behavior"

不然達不到效果叽讳，具體原因會在以后分析Behaviors里在說明追他。

下面方便起見坟募，稱NestedScrollView為滾動View吧

AppBarLayout

AppBarLayout繼承自LinearLayout，所以基本布局方式跟LinearLayout是一樣的

主要代碼:

<android.support.design.widget.CoordinatorLayout ...>
    <android.support.design.widget.AppBarLayout
        ...
        >
        <ImageView
        ...
            app:layout_scrollFlags="scroll|enterAlways" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

使用AppBarLayout的關(guān)鍵點是邑狸，在Child里面設(shè)置屬性layout_scrollFlags

layout_scrollFlags可以設(shè)置下面這5個參數(shù)
scroll
snap
enterAlways
enterAlwaysCollapsed
exitUntilCollapsed

  • scroll
    這參數(shù)是其他四個參數(shù)的基礎(chǔ)懈糯，即只有設(shè)置了這個參數(shù)，其他參數(shù)才會生效单雾。相應(yīng)的Child才會對滾動view的滾動才會響應(yīng)赚哗。
app:layout_scrollFlags="scroll"
  • snap
    這個參數(shù)的作用是讓Child具有吸附效果，抬手后會根據(jù)距離向上或向下滑動
app:layout_scrollFlags="scroll|snap"
  • enterAlways
    這個參數(shù)的作用是滑動Child在任何位置向下滑動時都觸發(fā)該Child的向下滑動
app:layout_scrollFlags="scroll|enterAlways"
  • enterAlwaysCollapsed
    這個參數(shù)是enterAlways的附加值硅堆，滾動View向下滾動(未在頂部)屿储，先顯示最小高度，然后是enterAlways的滾動效果硬萍，最后顯示最大高度。除了設(shè)置
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

為了有最大高度需要另外設(shè)置

android:minHeight="100dp"
  • exitUntilCollapsed
    這個參數(shù)表示滾動view向上滾動時围详，保留最小高度
app:layout_scrollFlags="scroll|exitUntilCollapsed"

CollapsingToolbarLayout

CollapsingToolbarLayout繼承自FrameLayout所以布局特性和FrameLayout一樣朴乖。谷歌官方的解釋總結(jié)一下就是，帶有視差動效的toolbar助赞，是放在AppBarLayout中的一個直接子View买羞。

主要代碼：

<android.support.design.widget.CoordinatorLayout
    ...>
    <android.support.design.widget.AppBarLayout
        ...>
        <android.support.design.widget.CollapsingToolbarLayout
            ...
            app:collapsedTitleTextAppearance="@style/AppTheme.TextAppearance"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                ...
                app:layout_collapseParallaxMultiplier="0"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                ...
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            .../>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        ...
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

下面簡單介紹一下CollapsingToolbarLayout的幾個屬性

  • collapsedTitleTextAppearance，expandedTitleTextAppearance
    這兩個可以定制標題收起和展開的字體樣式
  • contentScrim
    可以設(shè)置Content scrim雹食，參數(shù)可以是color和drawable畜普，簡單來說就是收起狀態(tài)Toolbar的背景
  • layout_collapseMode
    說明CollapsingToolbarLayout的child可以設(shè)置為兩種模式parallax和pin
    • pin
      就是簡單的固定模式
    • parallax
      表示視差模式，可以根據(jù)需要搭配layout_collapseParallaxMultiplier食用群叶，layout_collapseParallaxMultiplier的數(shù)值是0~1
      0表示滾動沒有視差吃挑，意思就是完全跟著下面的滾動view，1表示不動
      0.gif
1.gif

哦~~~谷歌文檔里還提醒街立，不要在toolbar運行時手動添加view到toolbar里面

總結(jié)

這篇文章主要講了CoordinatorLayout的特色舶衬，以及使用的幾個方法。
介紹了一下跟CoordinatorLayout配合使用的幾個控件的基本使用方法赎离。但是這樣的基本搭配很有可能無法達到開發(fā)者的需求逛犹，很多細節(jié)還是需要自己定制。要達到這樣的要求梁剔，就需要去掌握Behaviors的使用了虽画。

代碼:Github

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市荣病，隨后出現(xiàn)的幾起案子码撰，更是在濱河造成了極大的恐慌，老刑警劉巖个盆，帶你破解...
    沈念sama閱讀 216,544評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件灸拍，死亡現(xiàn)場離奇詭異做祝，居然都是意外死亡，警方通過查閱死者的電腦和手機鸡岗，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門混槐，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人轩性，你說我怎么就攤上這事声登。” “怎么了揣苏？”我有些...
    開封第一講書人閱讀 162,764評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵悯嗓，是天一觀的道長。 經(jīng)常有香客問我卸察，道長脯厨，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,193評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任坑质，我火速辦了婚禮合武，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘涡扼。我一直安慰自己稼跳，他們只是感情好，可當我...
    茶點故事閱讀 67,216評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布吃沪。 她就那樣靜靜地躺著汤善，像睡著了一般。 火紅的嫁衣襯著肌膚如雪票彪。 梳的紋絲不亂的頭發(fā)上红淡，一...
    開封第一講書人閱讀 51,182評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機與錄音降铸，去河邊找鬼锉屈。 笑死，一個胖子當著我的面吹牛垮耳，可吹牛的內(nèi)容都是我干的颈渊。 我是一名探鬼主播，決...
    沈念sama閱讀 40,063評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼终佛，長吁一口氣：“原來是場噩夢啊……” “哼俊嗽！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起铃彰，我...
    開封第一講書人閱讀 38,917評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤绍豁，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后牙捉，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體竹揍，經(jīng)...
    沈念sama閱讀 45,329評論 1贊 310
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡敬飒，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了芬位。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片无拗。...
    茶點故事閱讀 39,722評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖昧碉，靈堂內(nèi)的尸體忽然破棺而出英染，到底是詐尸還是另有隱情，我是刑警寧澤被饿，帶...
    沈念sama閱讀 35,425評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布四康，位于F島的核電站，受9級特大地震影響狭握，放射性物質(zhì)發(fā)生泄漏闪金。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一论颅、第九天 我趴在偏房一處隱蔽的房頂上張望哎垦。 院中可真熱鬧，春花似錦嗅辣、人聲如沸撼泛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0贊 22
  • 一樁弒父案澡谭，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至损俭，卻和暖如春蛙奖，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背杆兵。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工雁仲， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人琐脏。 一個月前我還...
    沈念sama閱讀 47,729評論 2贊 368
  • 代替公主和親
    正文 我出身青樓攒砖，卻偏偏與公主長得像，于是被迫代替她去往敵國和親日裙。 傳聞我的和親對象是個殘疾皇子吹艇，可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2贊 353