![Android Design Support libraryを使う (5)CoordinatorLayout その2](https://tech.pjin.jp/wp-content/uploads/2015/09/Android_page.png)
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>
- AppBarLayoutの子ViewにCollapsingToolbarLayoutを配置します
- app:layout_scrollFlagsはCollapsingToolbarLayoutに指定します
- CollapsingToolbarLayoutの子ViewにToolbarを配置します
これでバーの縮小拡大に合わせてタイトルも拡大縮小するレイアウトが実現できます。
以上、CoordinatorLayoutを用いてヘッダーが滑らかにスクロールするレイアウトの実装を説明しました。
ほぼレイアウトxmlだけでリッチなアニメーションが実現できるのがうれしいですね。