Google Developers Japan

ナビゲーション ビュー

ナビゲーション ドロワーは、アプリの独自性やナビゲーションにおいて重要な焦点となります。この部分のデザインの一貫性は、特に初めてアプリを使うユーザーにとって、アプリのナビゲーションのわかりやすさという点で、大きな違いを生み出します。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 はステータスバーと適切にやりとりすることができます。

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

<group android: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 が渡され、選択イベントを処理したり、チェック状態を変更したり、新しいコンテンツを読み込んだり、ドロワーをプログラムを使って閉じたり、どんな操作でも処理できます。

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

地味な EditText でさえも、マテリアル デザインでは改良の余地はあります。EditText だけの場合は、最初の文字を入力したあとはヒントテキストが非表示になりますが、TextInputLayout で囲むことでヒントテキストが EditText の上に表示される フローティング ラベルになり、ユーザーが入力中のコンテキストを見失うことを防ぐことができます。

ヒントの表示に加えて、 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