CoordinatorLayout 使用(一)

Google I/O 15上沃粗,谷歌發(fā)布了一個新的support library,里面包含了一些遵循Material Design's spec的UI組件喳篇,比如,AppbarLayout,CollapsingToolbarLayout和CoordinatorLayout。這些組件配合起來使用可以產(chǎn)生強大的效果

CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果臭挽。CoordinatorLayout通過設(shè)置子View的 Behaviors來調(diào)度子View。

簡單學習使用這些組件咬腕,直接上代碼

CoordinatorLayout + AppBarLayout

<?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:orientation="vertical" android:layout_width="match_parent"    
    android:layout_height="match_parent">    
    <android.support.design.widget.AppBarLayout        
        android:id="@+id/appbar"        
        android:layout_width="match_parent"        
        android:layout_height="wrap_content"        
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        
        <android.support.v7.widget.Toolbar            
            android:id="@+id/toolbar"            
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

效果顯示欢峰,視圖滾動時,Toolbar會隱藏涨共,這個效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實現(xiàn)的纽帖。通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局举反,Toobar有app:layout_scrollFlags屬性懊直,這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有5個值:

  1. scroll: 所有想滾動出屏幕的view都需要設(shè)置這個flag火鼻, 沒有設(shè)置這個flag的view將被固定在屏幕頂部室囊。例如,TabLayout 沒有設(shè)置這個值魁索,將會停留在屏幕頂部融撞。
  2. enterAlways: 設(shè)置這個flag時,向下的滾動都會導致該view變?yōu)榭梢姶治担瑔⒂每焖佟胺祷啬J健薄?/li>
  3. enterAlwaysCollapsed: 當你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標志時尝偎,你的視圖只能已最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度鹏控。
  4. exitUntilCollapsed: 滾動退出屏幕致扯,最后折疊在頂端趁窃。
  5. snap: 當滾動結(jié)束時,如果View只有部分可見急前,它將會自動滑動到最近的邊界(完全可見或完全隱藏)

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout

<?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:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@mipmap/header"
                app:layout_collapseMode="parallax"
                />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        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.CoordinatorLayout>

這種效果在詳情頁面用的較多醒陆,展示個性化內(nèi)容,圖像有強烈的吸引力裆针。這個效果重點使用了CollapsingToolbarLayout 刨摩。 CollapsingToolbarLayout可實現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放世吨。
CollapsingToolbarLayout 提供以下屬性和方法是用:

  1. Collapsing title:ToolBar的標題澡刹,當CollapsingToolbarLayout全屏沒有折疊時,title顯示的是大字體耘婚,在折疊的過程中罢浇,title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title沐祷。
  2. Content scrim:ToolBar被折疊到頂部固定時候的背景嚷闭,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
  3. Status bar scrim:狀態(tài)欄的背景赖临,調(diào)用方法setStatusBarScrim(Drawable)胞锰。還沒研究明白,不過這個只能在Android5.0以上系統(tǒng)有效果兢榨。
  4. Parallax scrolling children:CollapsingToolbarLayout滑動時嗅榕,子視圖的視覺差,可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變吵聪。值de的范圍[0.0,1.0]凌那,值越大視察越大。
  5. CollapseMode :子視圖的折疊模式吟逝,在子視圖設(shè)置帽蝶,有兩種“pin”:固定模式,在折疊的時候最后固定在頂端澎办;“parallax”:視差模式嘲碱,在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變局蚀。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性麦锯,連同 layout_anchorGravity 一起,可以用來放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖(如 FloatingActionButton)琅绅。

使用CollapsingToolbarLayout實現(xiàn)折疊效果扶欣,需要注意3點

  1. AppBarLayout的高度固定
  2. CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
  3. 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor,app:layout_anchorGravity屬性
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市料祠,隨后出現(xiàn)的幾起案子骆捧,更是在濱河造成了極大的恐慌,老刑警劉巖髓绽,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件敛苇,死亡現(xiàn)場離奇詭異,居然都是意外死亡顺呕,警方通過查閱死者的電腦和手機枫攀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來株茶,“玉大人来涨,你說我怎么就攤上這事∑羰ⅲ” “怎么了蹦掐?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長僵闯。 經(jīng)常有香客問我卧抗,道長,這世上最難降的妖魔是什么棍厂? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任颗味,我火速辦了婚禮,結(jié)果婚禮上牺弹,老公的妹妹穿的比我還像新娘。我一直安慰自己时呀,他們只是感情好张漂,可當我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谨娜,像睡著了一般航攒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上趴梢,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天漠畜,我揣著相機與錄音,去河邊找鬼坞靶。 笑死憔狞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的彰阴。 我是一名探鬼主播瘾敢,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了簇抵?” 一聲冷哼從身側(cè)響起庆杜,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎碟摆,沒想到半個月后晃财,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡典蜕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年断盛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嘉裤。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡郑临,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出屑宠,到底是詐尸還是另有隱情厢洞,我是刑警寧澤,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布典奉,位于F島的核電站躺翻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏卫玖。R本人自食惡果不足惜公你,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望假瞬。 院中可真熱鬧陕靠,春花似錦、人聲如沸脱茉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琴许。三九已至税肪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間榜田,已是汗流浹背益兄。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留箭券,地道東北人净捅。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像邦鲫,于是被迫代替她去往敵國和親灸叼。 傳聞我的和親對象是個殘疾皇子神汹,可洞房花燭夜當晚...
    茶點故事閱讀 45,585評論 2 359

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