Design Support LibraryのNavigationViewを使ってみた

直近の案件で、Google Playのメニューのようなメニューを実装する必要があり、ゴリゴリレイアウトとコードで頑張ろうと思ってたらDesign Support Libraryにて、NavigationViewが公開されていたのを今更ながら知ったので使ってみました。

昔はとある案件でゴリゴリ作っていたので楽な時代になりましたね。

早速使ってみたいと思います。

環境

• Mac OS 10.11
• Android studio 1.4
• Android SDK 23

導入手順

1.android stidoを起動する。
2.launcherにて、Configure>SDK Manager
3.画面下のLaunch Standalone SDK Managerをクリックする

4.Android SDK　Managerを単体起動し、Android Support Repositoryを更新する

実装

Design Support Libraryを追加

dependenciesにDesign Support Libraryを追加してください。
追加されている場合はskipしてください。

build.gradle

dependencies {
    // android standard lib
    compile 'com.android.support:design:23.1.0' ・・・この行を追加する
    ...
}

Navigationを表示したい画面のレイアウトを作成する

layout/activity_main

<?xml version="1.0" encoding="utf-8"?>
<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">
　　・・・
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_header"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/navigation_item"/>
</android.support.v4.widget.DrawerLayout>

NavigationViewのヘッダー部分のレイアウトを作成する

layout/navigation_header.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/colorPrimary">

    <!--アイコン -->
    <ImageView
        android:id="@+id/user_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/user_icon"
        android:layout_margin="10dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/white"
        android:text="kazuhiro1128"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_margin="10dp"
        android:lines="2"
        android:layout_below="@+id/user_icon"
        />

</RelativeLayout>

NavigationViewに表示するメニューを作成する。

menu/navigation_menu.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/menu_home"
            android:icon="@android:drawable/ic_menu_gallery"
            android:title="ホーム" />

        <item
            android:id="@+id/menu_mypage"
            android:icon="@android:drawable/ic_menu_gallery"
            android:title="マイページ" />

        <item
            android:id="@+id/menu_youtube"
            android:icon="@android:drawable/ic_menu_gallery"
            android:title="Youtube" />
    </group>
    <item
        android:title="その他">
        <menu android:checkableBehavior="single">
x
            <item
                android:id="@+id/menu_app_description"
                android:title="このアプリについて" />
            <item
                android:id="@+id/menu_setting"
                android:title="設定" />
        </menu>
    </item>
</menu>

Activity側の実装例

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //naivigationMenuの各メニューがタップされた場合のリスナーを指定する
        NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_header);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {


                switch (menuItem.getItemId()) {
                    case R.id.menu_home:
                        //メニュー：ホームがタップされた場合の動作を記述する
                        Log.d(TAG, "ホームがタップされました");
                        break;

                    case R.id.menu_mypage:

                        break;

                    default:
                        break;
                }

                return false;
            }
        });
    }

・・・
}

上記の実装を行うと以下のようなNavigationViewを実現することができます。
次回は、他のViewも使ってみたいと思います。