Android Design Support libraryを使う（5）CoordinatorLayout　その2

Android Design Support libraryはAndroid Support Library 22.2で公開された、
マテリアルデザインを実現するのに便利なコンポーネントのライブラリです。

そんなDesign Support libraryのコンポーネントの紹介と使い方の説明をしていきたいと思います。
導入方法は第一回のこちらから。

前回にCoordinatorLayoutの簡単な使い方を紹介しました。今回は別の例を扱いたいと思います。

前回のおさらい

CoordinatorLayoutはViewの間に相互関係を持たせることのできるコンポーネントで、あるViewの動きに応じた別のViewの振る舞いを決めることができます。
前回は例としてSnackbarのスライドイン・スライドアウトに応じて動くFloatingActionButtonの実装を説明しました。

CoodinatorLayout + AppBarLayout

AppBarLayoutは、Design Support libraryに含まれる、CoodinatorLayoutと組み合わせることを前提としたコンポーネントです。
この2コンポーネントを用いることでコンテンツ部分のスクロールに応じてスクロールするヘッダ部分（ツールバーやタブ）が実装できます(例：GooglePlay)。

次のサンプルはリストのスクロールに合わせてツールバーがスクロールするものです。

レイアウトは次のようになります。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <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:titleTextAppearance="@style/TextAppearance" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

ポイントは

AppBarLayoutをCoordinatorLayoutの子Viewとして配置する
ToolbarをAppBarLayoutの子Viewとして配置する
スクロール可能なコンポーネント（上記例ではRecyclerView）をCoordinatorLayoutに配置する
AppBarLayoutの子Viewにapp:layout_scrollFlags属性を指定する
RecyclerViewにapp:layout_behavior属性を指定する

です。

AppBarLayoutと組み合わせるコンポーネントはスクロール可能なコンポーネントであれば何でもよいわけではなく、NestedScrollingChildインターフェースを実装したクラスでなければなりません。具体的にはRecyclerViewまたはNestedScrollViewがあり、これらと組み合わせることになります。

なお補足ですがRecyclerViewを用いる場合はbuide.gradleに以下を追加する必要があります。

dependencies {
          ~
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

layout_scrollFlags

Toolbarのlayout_scrollFlags属性の指定によりスクロール時の挙動を変える事ができます。
設定できるフラグには以下のものがあります。

scroll	スクロール可能になり、画面外へ移動させることが可能になります
enterAlways	下スクロール時にすぐに表示されます
enterAlwaysCollapsed	下スクロール時にスクロールコンポーネント上部まできたとき表示されます
exitUntilCollapsed	minHeightを指定していると、上スクロールですぐに折りたたまれます。また下スクロール時にスクロールコンポーネント上部まできとき折りたたみが解除されます/td>

CollapsingToolbarLayout

CollapsingToolbarLayoutは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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        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">

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

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

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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