CoordinatorLayout 使用（一）

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

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

簡(jiǎn)單學(xué)習(xí)使用這些組件，直接上代碼

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>

效果顯示，視圖滾動(dòng)時(shí)，Toolbar會(huì)隱藏，這個(gè)效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實(shí)現(xiàn)的。通過(guò)AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局，Toobar有app:layout_scrollFlags屬性，這就是控制滑動(dòng)時(shí)視圖效果的屬性。app:layout_scrollFlags有5個(gè)值：

  1. scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag， 沒(méi)有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。例如，TabLayout 沒(méi)有設(shè)置這個(gè)值，將會(huì)停留在屏幕頂部。
  2. enterAlways: 設(shè)置這個(gè)flag時(shí)，向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢?jiàn)，啟用快速“返回模式”。
  3. enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的視圖只能已最小高度進(jìn)入，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。
  4. exitUntilCollapsed: 滾動(dòng)退出屏幕，最后折疊在頂端。
  5. snap： 當(dāng)滾動(dòng)結(jié)束時(shí)，如果View只有部分可見(jiàn)，它將會(huì)自動(dòng)滑動(dòng)到最近的邊界（完全可見(jiàn)或完全隱藏）

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>

這種效果在詳情頁(yè)面用的較多，展示個(gè)性化內(nèi)容，圖像有強(qiáng)烈的吸引力。這個(gè)效果重點(diǎn)使用了CollapsingToolbarLayout 。 CollapsingToolbarLayout可實(shí)現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類(lèi)似與LinearLayout垂直方向排放。
CollapsingToolbarLayout 提供以下屬性和方法是用：

  1. Collapsing title：ToolBar的標(biāo)題，當(dāng)CollapsingToolbarLayout全屏沒(méi)有折疊時(shí)，title顯示的是大字體，在折疊的過(guò)程中，title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
  2. Content scrim：ToolBar被折疊到頂部固定時(shí)候的背景，你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來(lái)改變背景。
  3. Status bar scrim：狀態(tài)欄的背景，調(diào)用方法setStatusBarScrim(Drawable)。還沒(méi)研究明白，不過(guò)這個(gè)只能在Android5.0以上系統(tǒng)有效果。
  4. Parallax scrolling children：CollapsingToolbarLayout滑動(dòng)時(shí)，子視圖的視覺(jué)差，可以通過(guò)屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的范圍[0.0,1.0]，值越大視察越大。
  5. CollapseMode ：子視圖的折疊模式，在子視圖設(shè)置，有兩種“pin”：固定模式，在折疊的時(shí)候最后固定在頂端；“parallax”：視差模式，在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來(lái)改變。

CoordinatorLayout 還提供了一個(gè) layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來(lái)放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖（如 FloatingActionButton）。

使用CollapsingToolbarLayout實(shí)現(xiàn)折疊效果，需要注意3點(diǎn)

  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)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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