CoordinatorLayout有什么用

在 2015 年的 I/O 開發(fā)者大會上魏宽，Google 介紹了一個新的 Android Design Support Library酿傍，該庫可以幫助開發(fā)者在應(yīng)用上使用 Meterial Design。它包含了許多重要的 Meterial Design 的構(gòu)建塊娘汞，并且它支持 API 7及以上的版本。 在庫中就包含一個CoordinatorLayout翘鸭，它是一個 FrameLayout廷粒。該布局的強(qiáng)大在于贴见，能夠協(xié)調(diào)子元素之間的依賴關(guān)系烘苹。CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果。CoordinatorLayout通過設(shè)置子View的Behaviors來調(diào)度子View蝇刀。Library中提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等螟加。

CoordinatorLayout如何使用

使用CoordinatorLayout需要在app目錄中build.gradle加入Support Design Library：

compile 'com.android.support:design:25.1.0'

接下來我們看看官方的效果，首先我們新建一個項目吞琐，然后在Add an Activity to Mobile中選擇Scrolling Activity捆探。

Paste_Image.png

接下來我們看一看Android Studio自動幫我們生成的代碼。

activity_scrolling.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="me.shihao.coordinatorlayoutusage.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

    <include layout="@layout/content_scrolling"/>

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

<a name="1"></a>
content_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="me.shihao.coordinatorlayoutusage.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text"/>

</android.support.v4.widget.NestedScrollView>

ScrollingActivity.java

public class ScrollingActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_scrolling, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

運行效果

運行效果.gif

效果顯示站粟，視圖滾動時Toolbar會折疊黍图，這個效果是Android Support Library里面新增的CoordinatorLayout, AppBarLayout，CollapsingToolbarLayout實現(xiàn)的奴烙。根據(jù)官方的文檔助被，AppBarLayout必須是CoordinatorLayout的直接子View。然后切诀，我們需要定義AppBarLayout與滾動視圖之間的聯(lián)系揩环。在content_scrolling.xml中為可滾動視圖NestedScrollView的添加了app:layout_behavior。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior幅虑，它和AppBarLayout.ScrollingViewBehavior相匹配丰滑，用來通知AppBarLayout 這個特殊的view何時發(fā)生了滾動事件，這個behavior需要設(shè)置在觸發(fā)事件（滾動）的view之上倒庵。當(dāng)CoordinatorLayout發(fā)現(xiàn)NestedScrollView中定義了這個屬性褒墨，它會搜索自己所包含的其他view，看看是否有view與這個behavior相關(guān)聯(lián)擎宝。AppBarLayout.ScrollingViewBehavior描述了NestedScrollView與AppBarLayout之間的依賴關(guān)系郁妈。NestedScrollView的任意滾動事件都將觸發(fā)AppBarLayout或者AppBarLayout里面view的改變。AppBarLayout里面定義的view只要設(shè)置了app:layout_scrollFlags屬性绍申，就可以在NestedScrollView滾動事件發(fā)生的時候被觸發(fā)噩咪。

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout极阅，給它設(shè)置layout_scrollFlags胃碾，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)涂屁。CollapsingToolbarLayout提供以下屬性和方法使用：

• title：ToolBar的標(biāo)題书在，當(dāng)CollapsingToolbarLayout全屏沒有折疊時，title顯示的是大字體拆又，在折疊的過程中儒旬，title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title帖族。
• contentScrim：ToolBar被折疊到頂部固定時候的背景栈源，你可以調(diào)用setContentScrim(Drawable)方法改變背景。
• statusBarScrim：狀態(tài)欄的背景竖般，調(diào)用方法setStatusBarScrim(Drawable)甚垦。
• layout_collapseParallaxMultiplier：CollapsingToolbarLayout滑動時，子視圖的視覺差，值的范圍[0.0,1.0]艰亮，值越大視覺差越大闭翩。
• layout_collapseMode ：子視圖的折疊模式，在子視圖設(shè)置迄埃，有兩種pin：固定模式疗韵，在折疊的時候最后固定在頂端；parallax：視差模式侄非，在折疊的時候會有個視差折疊的效果蕉汪。

app:layout_scrollFlags

在app:layout_scrollFlags屬性里面必須至少啟用scroll這個flag，這樣這個view才會滾動逞怨，否則它將一直固定在頂部者疤。并且要把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出叠赦，而固定的view繼續(xù)留在頂部驹马。可以使用的其他flag有：

• scroll:：所有想滾動出屏幕的view都需要設(shè)置這個flag眯搭， 沒有設(shè)置這個flag的view將被固定在屏幕頂部窥翩。
• enterAlways:：一旦向下滾動這個view就可見。
• enterAlwaysCollapsed:：顧名思義鳞仙，這個flag定義的是何時進(jìn)入（已經(jīng)消失之后何時再次顯示）寇蚊。假設(shè)你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達(dá)這個最小高度的時候開始顯示棍好，并且從這個時候開始慢慢展開仗岸，當(dāng)滾動到頂部的時候展開完。
• exitUntilCollapsed:：滾動退出屏幕借笙，最后折疊在頂端扒怖。

CoordinatorLayout還提供了一個layout_anchor的屬性，連同 layout_anchorGravity一起业稼，可以用來放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖（如 FloatingActionButton）盗痒。如本例中使用FloatingActionButton。通過下面的參數(shù)設(shè)置了FloatingActionButton的位置低散，兩個屬性共同作用使得浮動按鈕也能折疊消失展現(xiàn)俯邓。

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"

總結(jié)

實現(xiàn)折疊效果，需要注意下面幾點：

1. 頂層布局為CoordinatorLayout熔号。
2. AppBarLayout的高度固定稽鞭。
3. CollapsingToolbarLayout的子視圖設(shè)置app:layout_scrollFlags屬性
4. 關(guān)聯(lián)滾動視圖（如本例中的NestedScrollView）設(shè)置屬性app:layout_behavior。
5. 關(guān)聯(lián)懸浮視圖（如本例中的FloatingActionButton）設(shè)置app:layout_anchor引镊，app:layout_anchorGravity屬性

當(dāng)然CoordinatorLayout功能還強(qiáng)大朦蕴，而他的神奇之處在于Behavior對象篮条，CoordinatorLayout自己并不控制View，所有的控制權(quán)都在Behavior吩抓。比如前面用到的FloatingActionButton.Behavior涉茧，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。當(dāng)然我們可以通過自定義的方式來實現(xiàn)自己的Behavior琴拧，來實現(xiàn)更多樣的功能降瞳。自定義Behavior使用請查看：

CoordinatorLayout與Behavior的實際使用(二)

Demo已經(jīng)放在了Github上嘱支，傳送門：CoordinatorLayoutUsage

如果你覺得有用蚓胸，請在Github不吝給我一個Star，非常感謝除师。

寫在最后的話：個人能力有限沛膳，歡迎大家在下面吐槽。喜歡的話就為我點一個贊吧汛聚。也歡迎 Fork Me On Github 锹安。