Design Support LibraryのNavigationViewを使ってみた

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

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

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

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

#環境
- Mac OS 10.11
- Android studio 1.4
- Android SDK 23

#導入手順
1.android stidoを起動する。
2.launcherにて、Configure>SDK Manager
3.画面下のLaunch Standalone SDK Managerをクリックする
![スクリーンショット 2015-11-03 22.03.22.png](https://qiita-image-store.s3.amazonaws.com/0/96091/a5661645-853f-e8c1-0b60-76d3a6d7da15.png)
4.Android SDK　Managerを単体起動し、Android Support Repositoryを更新する
![スクリーンショット 2015-11-03 22.05.09.png](https://qiita-image-store.s3.amazonaws.com/0/96091/408aa189-1b9e-5b66-04ef-6ba95395cf8f.png)

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

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

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

```ruby: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のヘッダー部分のレイアウトを作成する

```ruby: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に表示するメニューを作成する。

```ruby: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側の実装例

```ruby: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も使ってみたいと思います。

![スクリーンショット 2015-11-04 0.27.44.png](https://qiita-image-store.s3.amazonaws.com/0/96091/6376aa0c-fd39-15c2-9c2e-4caaf728fe00.png)