woshidan's blog

あいとゆうきとITと、とっておきの話。

マテリアルデザイン用のライブラリを自分用にある程度試してみたメモ

Android support library Material Design Navigation View CoordinatorLayout CollapsingToolbarLayout

少し慣れてきた気がするので、マテリアルデザイン用のライブラリを自分用にある程度試してみたメモ。

動作等は適宜下記を参考にしています。

http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

Navigation View

いわゆるサイドバーを作るのに使います。DrawerLayoutをルートレイアウトにして、NavigationViewとその上にそのActivityで表示するメインのコンテンツを表すLayoutを置きます。

<android.support.v4.widget.DrawerLayout
        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">

    <!-- your content layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

app:menuでNavigationViewで出てくるメニューの設定が出来ます。。

<!-- res/menu/drawer.xml -->
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:checked="true"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/navigation_item_1"/>
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/navigation_item_2"/>
    </group>
</menu>

また、Menu上の方のレイアウトがapp:headerLayoutで指定できます

<!-- res/layout/drawer_header.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="bottom"
        android:background="#03B"
        android:textColor="#fff"
        android:text="Header"/>
</LinearLayout>

これの表示が下記のような感じです。

f:id:woshidan:20151118005830p:plain

SnackBar

APIはToastに似たような感じで利用できる。応答用のボタンがついている通知用のWidget.

// ここで指定する parentLayout の底部に表示されることになる
Snackbar
  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener)
  .show(); // Don’t forget to show!

CoordinatorLayout

Material Design対応のアニメーションなどの対応をしてくれる。たとえば、CoordinatorLayoutの中にFABボタンを押すと、SnackBarが出た時は押し上げる、といったアニメーションを設定してくれる。

anchorが使えた時はそちらの方がいいのかな? という気がしていて、今度アニメーションの実行に差が出るかどうか調べてみよう。

AppBarLayout及びAppBarLayoutの直下に置く必要のあるCollapsingToolbarLayoutを使う時はルートビューに置く必要がある。

AppBarLayout

主な使い方は、

  • Collapsing Toolbarと合わせる。
  • Toolbar(+TabLayout) + Scroll要素

の組み合わせみたい。Toolbar(+TabLayout) + Scroll要素の場合、レイアウトは下記のようになります。

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">
     
     <! -- Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   <android.support.v7.widget.Toolbar
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">

        <android.support.design.widget.TabLayout
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">
     </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

なるほど、Toolbarの下にTabLayoutを置きたい場合はこうするのかー。

CollapsingToolbarLayout

AppBarLayoutの直下において、上の方へスクロールしたら引っ込んでツールバーになる、というようなパーツを作るのに使います。

collapseはつぶれる、expandは拡大、なので、上の方へつぶれた(要は普通の)ツールバーの文字がcollapsedText、 下の方で拡大されたタイトルがexpandedTextとなり、ここで表示されるのは、CollapsingToolbarLayout#setTitle()で設定できます。

expandedText, collapsedText のスタイル(文字色, 大きさ)はそれぞれ、collapsedTextAppearance, expandedTextAppearanceに指定する style要素を通して設定することができます。

これらのスタイルは、TextAppearance.AppCompat.Captionあたりを継承しておきます。

また、上へスクロール仕切った場合のツールバーの部分の*1背景はapp:contentScrimにて指定します。

このときのスタータスバーは、app:statusBarScrimにて指定できるらしいですが、実際反映されているのか確認できていません。

<android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <!-- scroll|enterAlways 一番上(Toolbarの領域を残さず)までスクロールして消える -->
        <!-- scroll|enterAlwaysCollapsed enterAlwaysと同じように見えるが、minHeightのところまでcontentScrimが反映されない -->

        <!-- Toolbarの他にスクロールさせたい要素があれば、ここに置く -->

        <!-- Menuの反映用や、`collapsedText`を設定しなかった時にToolbarの表示設定が反映される -->
        <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

*1:Scrimは幕用の布、みたいなのでつぶれちゃった部分を隠すもの、みたいな意味なんだろうな