Android Design Support Library について

[この記事は Ian Lake、デベロッパー アドボケートによる Android Developers Blog の記事 "Android Design Support Library" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

Android 5.0 Lollipop は、これまでで最も重要な Android リリースの 1 つです。 それは、少なからず、Android の体験を一新する新しいデザイン言語、マテリアル デザインを採用したためです。詳細な仕様はマテリアル デザインを採用するためのスタート地点として最適ですが、私達は開発者のみなさんにとって、特に下位互換性を気にする開発者にとって、それがいかに難しい課題であるかを理解しています。私達は、新しい Android Design Support Library を使い、たくさんの重要なマテリアル デザインのコンポーネントを全ての開発者、すべての Android 2.1 以上の端末へお届けしたいと思います。その中には、ナビゲーション ドロワー ビュー、テキスト編集のフローティング ラベル、フローティング アクション ボタン、Snackbar、タブ、モーション、そして、それらをつなげるスクロール フレームワークがあります。

ナビゲーション ビュー

ナビゲーション ドロワーは、アプリの独自性やナビゲーションにおいて重要な焦点となります。この部分のデザインの一貫性は、特に初めてアプリを使うユーザーにとって、アプリのナビゲーションのわかりやすさという点で、大きな違いを生み出します。NavigationViewはナビゲーション ドロワーに必要なフレームワークを用意することで、これをより簡単に実現できるようにします。また、NavigationViewを使うことで、navigation itemをメニュー リソースを使ってインフレートすることができます。
NavigationViewは、次のようなレイアウトで DrawerLayoutのドロワー コンテンツ ビューとして使用します。

<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 -->

    <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>

NavigationView: には 2 つの属性があります。app:headerLayoutは、ヘッダーに使用されるレイアウト（任意の）をコントロールします。app:menu はアイテムのナビゲーション用にインフレートされるメニュー リソースです（実行時に変更も可能）。 NavigationViewは、ステータスバーのスクリム保護を処理します。 これにより、API 21 以上の端末では NavigationViewはステータスバーと適切にやりとりすることができます。

最もシンプルなドロワー メニューとは、チェック可能なメニュー アイテムの集合体です。

<groupandroid:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:checked="true"
        android:icon="@drawable/ic_android"
        android:title="@string/navigation_item_1"/>
    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_android"
        android:title="@string/navigation_item_2"/>
</group>

チェックがオンにされたアイテムは、ナビゲーション ドロワーでハイライト表示され、どのナビゲーション アイテムが現在選択されているのかをユーザーにわかりやすく表示します。

また、メニュー内でアイテムのグループごとにサブヘッダーを使うこともできます。

<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    <menu>
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>

setNavigationItemSelectedListener()を使って OnNavigationItemSelectedListenerを設定すると、選択したアイテムのコールバックを受けることができます。クリックされた MenuItemが渡され、選択イベントを処理したり、チェック状態を変更したり、新しいコンテンツを読み込んだり、ドロワーをプログラムを使って閉じたり、どんな操作でも処理できます。

テキスト編集のフローティング ラベル

ヒントの表示に加えて、 setError()を呼び出すことで EditTextの下にエラー メッセージを表示させることもできます。

フローティング アクション ボタン

フローティング アクション ボタンは、インターフェイス上のメイン アクションを示す丸いボタンです。Design ライブラリの FloatingActionButton は、デフォルトではテーマの colorAccent 色を使った一貫した 1 つの実装を提供します。
通常サイズのフローティング アクションボタン以外にも、他の重要なエレメントとの視覚的な連続性を保持するためのミニサイズ（fabSize="mini"）もサポートされています。FloatingActionButtonは ImageViewを拡張するため、android:srcや setImageDrawable()などのメソッドを使って、FloatingActionButton内に表示されるアイコンを制御します。

Snackbar

操作に関する簡単なフィードバックを送るには、Snackbarを使用するのが最適です。Snackbar では、テキストと1 つの操作（任意）が画面下部に表示され、一定時間の経過後、自動的に画面からアニメーション付きで消えます。また、タイムアウト前にユーザーがスワイプして消すこともできます。
スワイプしたり、操作を実行できる点で、Snackbar はトーストや他の軽量フィードバック の仕組みよりもはるかに強力です。しかし、みなさんはこの API がとてもよく知っているかたちをしています。

Snackbar
  .make(parentLayout, R.string.snackbar_text,Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener)
  .show();// Don’t forget to show!

Viewが make() の 1 つ目の引数になっています。Snackbar はきちんと下部に固定されるよう、適切な Snackbar のビューの親を見つけようとします。

タブ

タブを使ってアプリ内の異なるビューを切り替えることは、マテリアル デザインにとって新しい概念ではなく、ユーザーはトップレベルのナビゲーション パターンとして、あるいはアプリ内のコンテンツを異なるグループへまとめるために、とても慣れ親しんでいます（例えば、音楽のジャンル）。
Design ライブラリの TabLayoutでは、ビューの横幅をタブ間で均等に割り振った固定タブと、タブのサイズが均等ではない、スクロール可能なタブの両方があります。タブは、プログラムからも追加することができます。

TabLayout tabLayout =...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

しかし、タブ間の横方向のページングに ViewPagerを使用している場合は、PagerAdapterの getPageTitle()から直接タブを作成し、setupWithViewPager()を使って 2 つをつなげることができます。これにより、タブ選択イベントが ViewPagerを、ViewPager のページ変更が選択されているタブを、それぞれ更新することを保証します。

CoordinatorLayout、モーション、スクロール

独特の外観だけがマテリアル デザインの特徴ではありません。モーションもまた、マテリアル デザインを用いたアプリを作成するうえで重要な要素です。マテリアル デザインには、タッチ リップルや意味のあるトランジションなど多くのモーションがありますが、Design ライブラリでは新たに CoordinatorLayout を導入しました。CoordinatorLayout を使うことで、子ビュー間のタッチ イベントをより高度にコントロールすることができます。Design ライブラリ内の多くのコンポーネントが CoordinatorLayout を利用しています。

CoordinatorLayout とフローティング アクション ボタン

わかりやすい例は、 CoordinatorLayoutの子として FloatingActionButtonを追加し、その CoordinatorLayoutを引数に Snackbar.make()を呼び出した場合です。 Snackbar が  FloatingActionButtonと重なるように表示されてしまうかわりに、FloatingActionButtonは CoordinatorLayoutから受け取った追加のコールバックを使って、Snackbar がアニメーションで表示されるときには上部に、消えるときには元の位置に自動的に戻ります。これは、 Android 3.0 以上の端末で、追加のコードなしで実現できます。
CoordinatorLayoutでは layout_anchor属性も提供され、layout_anchorGravityと共に使用すると FloatingActionButtonなどのフローティング ビューを他のビューと相対的に配置できます。

CoordinatorLayout とアプリバー

CoordinatorLayoutの他の主な使用例には、アプリバー（以前のアクションバー）とスクロール テクニックがかかわってきます。アプリの象徴的な部分とレイアウトの残りの部分の見た目と統合をより簡単にカスタマイズできる Toolbarをレイアウトで既に使用している方もおられると思いますが、Design ライブラリでは、さらに高度な実装が可能になります。AppBarLayoutを使って Toolbarと他のビュー（TabLayoutで提供されるタブなど）が ScrollingViewBehaviorとマークされた兄弟ビューのスクロール イベントに反応するようにできます。これにより、次のようなレイアウトが作成できます。

 <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>

これで、ユーザーが RecyclerViewをスクロールすると、AppBarLayout はイベントに応答することができます。その際、画面に入る方法（スクロールオン）と、画面から出ていく方法（スクロールオフ）をコントロールするためには、子のスクロール フラグを使います。フラグには、次のようなものがあります。

• scroll: このフラグは、画面からスクロールオフするすべてのビューに設定する必要があります。このフラグを使用しないビューは、画面上部に固定されたままになります
• enterAlways: このフラグを使うと、下方向へスクロールしたときにこのビューが表示されます。このフラグを使うことで、クイック リターンのパターンを実現できます。
• enterAlwaysCollapsed:ビューで minHeight を宣言し、このフラグを使用すると、ビューは最小の高さ（つまり、折りたたまれた状態）で画面に入り、ビューを最上部までスクロールしたときのみ完全な高さに再展開されます。
• exitUntilCollapsed: このフラグでは、ビューが折りたたまれる（minHeight になる）までスクロールオフされます。

注: scrollフラグを使用するすべてのビューは、このフラグを使用しないビューの前に宣言される必要があります。これで、すべてのビューが上部から出ていき、固定エレメントが残るようになります。

ツールバーの伸縮

Toolbarを直接 AppBarLayoutに追加すると、enterAlwaysCollapsedスクロール フラグと exitUntilCollapsedスクロール フラグにアクセスできますが、異なるエレメントが伸縮にどう反応するかを細かく制御できません。そこで、CollapsingToolbarLayoutを使うことができます。

<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">
        <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>

この設定では、CollapsingToolbarLayoutの app:layout_collapseMode="pin"を使って、ビューを縮めてもツールバー自体は画面上部に固定されるようにしています。さらに、CollapsingToolbarLayoutと Toolbarを一緒に使用すると、レイアウト全体が表示されている状態では、自動的にタイトルは大きなサイズで表示され、縮められた際には、デフォルトのサイズになります。この場合、setTitle()はツールバーのものではなく、CollapsingToolbarLayout のものを呼び出す必要があることに注意してください。
ビューの固定に加えて、app:layout_collapseMode="parallax"（さらに任意でapp:layout_collapseParallaxMultiplier="0.7"でパララックス乗数を設定） を使用して、パララックス スクロールを実装できます（CollapsingToolbarLayout内の ImageViewの兄弟のようなもの）。この使用例は、CollapsingToolbarLayoutで app:contentScrim="?attr/colorPrimary"と上手く組み合わされ、ビューの折りたたみ時にフルブリードのスクリムを追加します。

CoordinatorLayout とカスタムビュー

1 つの重要な注意点は、CoordinatorLayoutには FloatingActionButtonや AppBarLayoutの動作を理解する能力はなく、Coordinator.Behavior という形で追加の API を提供するだけだということです。この API により、子ビューはタッチ イベントやジェスチャへより細かい制御を行ったり、お互いの依存関係を宣言し、onDependentViewChanged()経由でコールバックを受けたりすることができます。

ビューは、CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)アノテーション、または、レイアウト ファイル内で app:layout_behavior="com.example.app.YourView$Behavior"属性を設定することで、デフォルトの Behavior を宣言することができます。このフレームワークによって、どんなビューでも CoordinatorLayoutと統合できるようになります。

今すぐ使えます！

Design ライブラリはすでに利用可能です。SDK Manager の Android Support Repository を今すぐアップデートしましょう。新しい依存関係を 1 つ追加するだけで、Design ライブラリの使用を開始できます。

 compile 'com.android.support:design:22.2.1'

Design ライブラリは Support v4 と AppCompat のサポート ライブラリに依存するため、Design ライブラリの依存関係の追加時にこれらも自動的に含まれることになります。それらの新しいウィジェットも、Android Studio Layout Editor の Design ビュー（CustomView 内）で使用可能になったため、新しいコンポーネントを簡単にプレビューできます。

Design ライブラリ、AppCompat、その他すべての Android サポート ライブラリは、最新の洗練された外観を持つ Android アプリを開発するために必要な部品を提供する、重要なツールです。これにより、開発者はすべてをゼロから作成する必要がなくなります。

Posted by Ryuichi Hoshi - Developer Relations Team