Android Design Support Library（三）用CoordinatorLayout實現Toolbar隱藏和摺疊

此文的代碼在 Android Design Support Library（一）用TabLayout實現類似網易選項卡動態滑動效果代碼的基礎上進行修改，如果你沒有看過本系列的第一篇文章最好先看一看。
CoordinatorLayout是Android Design Support Library中比較難的控件，顧名思義，它是用來組織它的子views之間協作的一個父view。CoordinatorLayout默認情況下可理解是一個FrameLayout，它的佈局方式默認是一層一層疊上去，在這裏我會介紹一下它最常用的兩種情況。

1. CoordinatorLayout實現Toolbar隱藏效果
先來看看效果

接下來代碼實現，首先仍舊是配置build.gradle：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.android.support:cardview-v7:22.2.0'
}

com.android.support:design:22.2.0就是我們需要引入的Android Design Support Library，其次我們還引入了Recyclerview和Cardview,還不瞭解這兩個控件的同學可以看看Android5.x RecyclerView 應用解析和Android5.x CardView 應用解析這兩篇文章。

開始上代碼，先來看看佈局(activity_tab_layout.xml)，最外層我們用CoordinatorLayout 來是做整體的佈局，AppBarLayout將Toolbar和TabLayout整合成了一個整體：

<?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: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"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            app:tabMode="scrollable" />
    </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.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:clickable="true"
        android:onClick="checkin"
        android:src="@drawable/ic_discuss"
        app:layout_anchor="@id/main_content"
        app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

能隱藏的關鍵是 app:layout_scrollFlags="scroll|enterAlways"這個屬性，設置滾動事件，屬性裏面必須至少啓用scroll這個flag，這樣這個view纔會滾動出屏幕，否則它將一直固定在頂部。

這裏我們用到了一個新的控件FloatingActionButton，它也是Design Support Library提供的，你可以把它當作ImageView。它有兩個屬性需要注意下：

• app:layout_anchor=""表示相對於哪個佈局。
• app:layout_anchorGravity=""表示相對於佈局的位置。

java代碼(CoordinatorLayoutActivity .java)

package com.example.liuwangshu.mooncoordinatorlayout;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import java.util.ArrayList;
import java.util.List;

public class CoordinatorLayoutActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final ActionBar ab = getSupportActionBar();
        ab.setDisplayHomeAsUpEnabled(true);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        initViewPager();
    }

    private void initViewPager() {

        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        List<String> titles = new ArrayList<>();
        titles.add("精選");
        titles.add("體育");
        titles.add("巴薩");
        titles.add("購物");
        titles.add("明星");
        titles.add("視頻");
        titles.add("健康");
        titles.add("勵志");
        titles.add("圖文");
        titles.add("本地");
        titles.add("動漫");
        titles.add("搞笑");
        titles.add("精選");
        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new ListFragment());
        }
        FragmentAdapter mFragmentAdapteradapter =
                new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
        //給ViewPager設置適配器
        mViewPager.setAdapter(mFragmentAdapteradapter);
        //將TabLayout和ViewPager關聯起來。
        mTabLayout.setupWithViewPager(mViewPager);
        //給TabLayout設置適配器
        mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);

    }
    public void checkin(View view) {
        Snackbar.make(view, "點擊成功", Snackbar.LENGTH_SHORT).show();
    }
}

我們點擊FloatingActionButton時會觸發checkin方法，並用Snackbar來彈出一個提示。Snackbar也是Design Support Library的新控件，可以用來替代Toast和部分的Dialog。

其他的代碼請參照源碼或者Android Design Support Library（一）用TabLayout實現類似網易選項卡動態滑動效果這篇文章的講解，這裏就不贅述了。

2. CoordinatorLayout+CollapsingToolbarLayout實現Toolbar摺疊效果
照例先來看看效果(軟件bug轉成gif動畫後效果不大好）：

要實現摺疊效果我們需要引入一個新的佈局CollapsingToolbarLayout，它作用是提供了一個可以摺疊的Toolbar，它繼承至FrameLayout，給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件比如mageView、Toolbar在響應layout_behavior事件時作出相應的scrollFlags滾動事件。

佈局文件(activity_detail.xml)用CollapsingToolbarLayout將ImageView和Toolbar包含起來作爲一個可摺疊的Toolbar，再用AppBarLayout包裹起來作爲一個Appbar的整體，當然，AppBarLayout目前必須是第一個嵌套在CoordinatorLayout裏面的子view。

<?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="200dp"
        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="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/mao"
                />

            <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/ThemeOverlay.AppCompat.Light" />

        </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"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout有幾個關鍵屬性需要說明下：

• app:contentScrim=""，用來設置CollapsingToolbarLayout收縮後最頂部的顏色
• app:expandedTitleGravity="left|bottom"，表示將此CollapsingToolbarLayout完全展開後，title所處的位置，默認是left+ bottom
• app:collapsedTitleGravity="left"，表示當頭部的襯圖ImageView消失後，此title將回歸到Toolbar的位置，默認是left。
• app:layout_scrollFlags="",這個屬性我們上面講過用來設置滾動事件，屬性裏面必須至少啓用scroll這個flag，這樣這個view纔會滾動出屏幕，否則它將一直固定在頂部。這裏我們設置的是app:layout_scrollFlags="scroll|exitUntilCollapsed"這樣能實現摺疊效果，如果想要隱藏效果我們可以設置app:layout_scrollFlags="scroll|enterAlways"。

我們需要定義AppBarLayout與滾動視圖之間的聯繫，Design Support Library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用來通知AppBarLayout何時發生了滾動事件，這個behavior需要設置在觸發事件的view之上，所以我們應該在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加app:layout_behavior="@string/appbar_scrolling_view_behavior這個屬性，當然AppBarLayout 中的子view需要設置app:layout_scrollFlags這個屬性，否則接收到RecyclerView滾動事件，AppBarLayout 也不會有什麼變化。

最後看看java代碼(CollapsingToolbarActivity.java)

package com.example.liuwangshu.mooncoordinatorlayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
public class CollapsingToolbarActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        Toolbar toolbar = (Toolbar) this.findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("哆啦A夢");
        RecyclerView mRecyclerView= (RecyclerView) findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL));
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.setAdapter(new RecyclerViewAdapter(CollapsingToolbarActivity.this));
    }
}

github源碼下載