Android Design Support libraryを使う (5)CoordinatorLayout その2

この記事は2016年3月11日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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>

ポイントは

  • AppBarLayoutCoordinatorLayoutの子Viewとして配置する
  • ToolbarAppBarLayoutの子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

CollapsingToolbarLayoutAppBarLayoutと組み合わることを前提としたコンポーネントで、次のサンプルのようなレイアウトとアニメーションが実装できます。

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

<?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だけでリッチなアニメーションが実現できるのがうれしいですね。

  • このエントリーをはてなブックマークに追加

PAGE TOP