こんにちはKID.Aです。
今回もデザインサポートライブラリーのクラスの説明をしていこうと思います。
Design support Libraryはデザインのサポートライブラリーで素晴らしいコンポーネントがいくつもあります。
今回は「NavigationView」について説明していきます。
NavigationViewは22.2から追加されたコンポーネントでマテリアルデザインの原則に基づいたナビゲーションをデザインできます。
Navigation Viewは標準的なナビゲーションメニューを表示してくれるコンポーネントで
メニュー内容はメニューリソースファイルで作ることができます。
Navigation Viewは一般的にDrawerLayoutの内部に配置します。
・APIは以下の通りです。
http://developer.android.com/intl/ja/reference/android/support/design/widget/NavigationView.html
実装
実装は以下の通りです。
・build.gradle
dependencies { compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' }
・MainActivity.java
package jp.co.navigationviewtest; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.item1) { } else if (id == R.id.item2) { } else if (id == R.id.item3) { } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; } }); } }
・activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" 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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout>
・menu/drawer.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/item1" android:icon="@mipmap/ic_launcher" android:title="Item1"/> <item android:id="@+id/item2" android:icon="@mipmap/ic_launcher" android:title="Item2"/> </group> <item android:title="Title"> <menu> <item android:id="@+id/item3" android:icon="@mipmap/ic_launcher" android:title="Item3"/> </menu> </item> </menu>
drawer.xmlのgroupのcheckableBehaviorを選択するとアイテムがチェックされます。表示されるアイテムはgroup配下のitemです。
またタイトルをつけたい場合は、itemタグの配下に、menuタグをつけます。
メニューの選択時のイベントの判定はNavigationView.setNavigationItemSelectedListenerで行います。
設定したリスナーに選択したアイテムのイベントが発火します。
実行
アプリを実行して左スワイプすると以下のナビゲーションが表示されます。
簡単にナビゲーションメニューをデザインすることができます。
以上です。