読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

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

Android Java

エンジニアブログ担当の佐藤です。
今回紹介するのは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感がすごく出るので是非活用していきたいです!