Android材料設計互換関数ライブラリ(Design Support Library)(I)ナビゲーションビュー(Navigation View)

@author ASCE 1885のGithub簡書微博CSDN原文リンク
Google I/O 2015はAndroid開発者に新しい開発関数ライブラリをもたらし、このシリーズではこの材料設計互換関数ライブラリについて詳しく紹介します.
Chris BanesはすでにGithubで良い使用例をオープンソースしていますが、私はやはり新しい特性をさらに説明し、MaterializeYourAppというGithubプロジェクトを移植することで実例を説明したいと思っています.
ナビゲーションビュー
この文書では、材料設計(Material Design)が発表されてから、標準的なナビゲーション引き出しを設計する方法について説明します.
開発ではこれらの設計準則に従うのはかなり時間がかかりますが、ナビゲーションビューがあれば、実現はずっと簡単です.
ナビゲーションビューの動作原理
ナビゲーションビューを使用して、以前の引き出しレイアウト(DrawerLayout)のカスタムビューを置き換えます.ナビゲーションビューには、パラメータのセット、オプションのヘッダレイアウト、ナビゲーションオプションを構築するためのメニューが必要です.これらの手順を完了すると、ナビゲーションオプションにレスポンスイベントのリスナーを追加するだけでいいです.
インプリメンテーション
まずメニューを作成します.直截にgroupを作成し、同じ時間にitemが1つしか選択できないことを指定します.

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>

        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
        ...

        <item
            android:id="@+id/drawer_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings"/>

    </group>
</menu>

理論的には、itemとしてサブメニューを使用することで、次のようにヘッダを含むメニュー項目を追加することもできます.

<item
    android:id="@+id/section"
    android:title="@string/section_title">
    <menu>
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>

        <item
            android:id="@+id/drawer_downloaded"
            android:icon="@drawable/ic_file_download_black_24dp"
            android:title="@string/downloaded"/>
    </menu>
</item>

これにより、分割線とヘッダが作成され、itemに続いています.しかし、これらのサブメニューのitemは選択できないようです.もし解決策が見つかったら、私はこの点を更新します.自分で試してみるべきです.
次にactivityレイアウトにナビゲーションビューを追加し、メニューオプションとヘッダレイアウトを設定できます.ここでは頭を詳しく紹介しません.それはあなたが望むレイアウトであることができるので、Githubの上に参考になる例があります.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    ...

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        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>

最後にJavaコードを追加します.まず、左上のアイコンの左側に戻るアイコンを追加する必要があります.

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();

if (actionBar != null) {
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
    actionBar.setDisplayHomeAsUpEnabled(true);
}

次に、ナビゲーション・引き出しを初期化します.ナビゲーション・オプションが選択されている場合、snackbarが表示され、選択したメニュー・アイテムが選択され、引き出しが閉じられます.

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override public boolean onNavigationItemSelected(MenuItem menuItem) {
        Snackbar.make(content, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
        menuItem.setChecked(true);
        drawerLayout.closeDrawers();
        return true;
    }
});

最後に、メニューボタンがクリックされると、引き出しが開きます.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
    }

    return super.onOptionsItemSelected(item);
}

まとめ
材料設計互換関数ライブラリとナビゲーションビュー(Navigation View)を導入したため、材料設計基準に適合したナビゲーション引き出しを作成するのは容易ではない.次の記事では、ユーザーインタフェースの作成を簡素化するのに役立つ他の新しいコンポーネントについて説明します.次の記事Floating ActionButtonの勉強に入ることができます.私たちのコードはサンプルエンジニアリングにあることを忘れないでください.
文末撮影鑑賞