Coordinator LayoutでかっこいいToolbarにする

エンジニアブログ担当の佐藤です。
今回紹介するのはCoordinator Layoutという機能です。またまたMaterial Designです。

Coordinator Layoutというのは子Viewの大きさや位置を動的に管理する機能です。
最近よく見かけるスクロールするとヘッダーが縮小されてToolbarに収まるレイアウトが実現できます。

こちらもまたDesign Support Libraryから使えるのでレイアウトのxmlを設定するだけで簡単に実装できます。

実装

activity_main.xml

<?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:fitsSystemWindows="true">

   <!-- ツールバー部分 -->
    <android.support.design.widget.AppBarLayout  
        android:id="@+id/appbar"  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"  
        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:fitsSystemWindows="true"  
            app:contentScrim="@color/scrim_color"  
            app:expandedTitleMarginStart="48dp"  
            app:expandedTitleMarginEnd="64dp">
            <!-- ヘッダー画像 -->
            <ImageView  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:scaleType="centerCrop"  
                android:src="@drawable/img"  
                app:layout_collapseMode="parallax"/>

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

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

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

    <!-- ここからスクロールコンテンツ -->
    <android.support.v4.widget.NestedScrollView  
        android:id="@+id/nestedScrollView"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:padding="10dp"  
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- ここコンテンツ -->
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

レイアウトの設定説明です。

・android.support.design.widget.AppBarLayout
　　　　android:layout_heightでヘッダーコンテンツの高さが決まります。

・android.support.design.widget.CollapsingToolbarLayout
　　　　このViewで囲んだ内容がヘッダーになります。
　　　　app:contentScrimで指定した色がツールバーに収まった時のツールバーの色になります。
　　　　app:layout_scrollFlagsにスクロール時の設定ができます。
　　　　今回設定したのは以下のフラグです
　　　　scroll・・・画面からスクロールオフするフラグです。
　　　　enterAlways・・・下方向へスクロールしたときにビューが表示されます。

・ImageView
　　　　ヘッダーに今回表示するViewです。
　　　　今回はImageViewですが、TextViewやImageButtonなどなんでも入ります。
　　　　app:layout_collapseMode="parallax"はparallaxエフェクト(視差効果)をつけることができます。

・android.support.v7.widget.Toolbar
　　　　スクロールして収まるToolbarです。
　　　　こちらにはapp:layout_collapseMode="pin"と指定しています。
　　　　pinを指定すると縮小されても画面のトップに留めることができます。

・android.support.v4.widget.NestedScrollView
　　　　このViewで囲んだ内容がスクロールコンテンツになります。
　　　　SupportLibrary v22.2ではRecyclerViewかNestedScrollViewのどちらかじゃないとダメみたいです。

レイアウトの説明は以上です！
設定する項目は少し多いですが、これだけでCoordinator Layoutの実装は終了です。

おまけ

Toolbarのタイトル文字の設定と文字色の設定

レイアウトを設定して実際に動かしてみるとToolbarに文字が出ない！ということがありました。
Toolbarに文字を設定するときはJavaから設定しないとうまく表示されませんでした...。

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        // タイトル文字設定  
        toolbarLayout.setTitle("タイトル");
        // 文字色(縮小時)  
        toolbarLayout.setCollapsedTitleTextColor(文字色(縮小時));
        // 文字色(展開時)  
        toolbarLayout.setExpandedTitleColor(文字色(展開時));

        }
    }

}

Toolbarタイトル文字はToolbarの方ではなく、CollapsingToolbarLayoutから設定します。
また、setCollapsedTitleTextColor()で縮小時のタイトル文字色、setExpandedTitleColor()で展開時のタイトル文字色もそれぞれ設定できるようです。

タイトル設定だけjavaから設定するのは少し面倒ですが、Coordinator Layoutを使えばMaterial Design感がすごく出るので是非活用していきたいです！

Coordinator LayoutでかっこいいToolbarにする

実装

おまけ

採用情報