ナビゲーションドロワーの作成

ナビゲーションドロワーの作成

YouTubeやGmail GoogleMapなどの
Googleが作っているアプリのほとんどが
画面端からメニューを引き出して操作するようになった

このような画面の端からスライドして引き出すメニューのことを
ナビゲーションドロワーという

英語だとNavigationDrawer

ちなみに、NavigationDrawerは
Android標準機能ではなく
Android Support Libraryで提供されている仕組みになる

なので、自分のプロジェクトのlibsディレクトリへ
android-support-v4.jar
を追加する

また、NavigationDrawerの実装には
NavigationDrawerがあることを示すマーク画像
スライドメニューの影画像が必要になる

とはいっても
NavigationDrawerのサンプルがあるので
それをダウンロードして自分のアプリに設置すればok

ダウンロードURLは
http://developer.android.com/training/implementing-navigation/nav-drawer.html

ここで、Download the sample app
をクリックし、ダウンロード

ダウンロードした圧縮ファイルを解凍すると
NavigationDrawerフォルダができるので

その中の
res/drawable-xhdpiディレクトリの中に
drawer_shadow.9.png
と
oc_drawer.png
があるので
これをプロジェクトの
res/drawable-xhdpi/
へコピーする

他の解像度のディレクトリにも入れれば
それぞれの端末画像でも綺麗に表示される

次に、レイアウトファイルへの追加

Activityのレイアウト定義の一番下へ
DrawerLayoutを書く

そして、その中に画面のメインレイアウトとなるFrameLayoutと
そこで使うスライドメニュー用のレイアウトになるListViewを設定する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<android.support.v4.widget.DrawerLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<!-- メインコンテンツレイアウト -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"/>
</FrameLayout>
 
<!-- スライドメニュー用レイアウト -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/background_light"/>
 
</android.support.v4.widget.DrawerLayout>

これでレイアウト定義はできたので
次にJavaでレイアウトの呼び出し

これは、通常のボタンのように
findViewById()で取得する

まずは、パーツの宣言

1
2
3
4
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private TextView mTextView;

次にonCreate()の中で、各Viewの取得

ちなみに、setupNavigationDrawer()は
自作のユーザー関数

1
2
3
4
5
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mDrawerList = (ListView)findViewById(R.id.left_drawer);
mTextView = (TextView)findViewById(R.id.text);
 
setupNavigationDrawer();

そして、NavigationDrawerを使うための設定を
setupNavigationDrawer()へ書いていく

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
private void setupNavigationDrawer(){
 
//NavigationDrawerの影を指定
mDrawerLayout.setDrawerShadow(R.drawable/drawer_shadow, GravityCompat.START);
mDrawerList.setOnItemClickListener(this);
 
//ActionBarの左へDrawerToggleを表示
getActionBar().setDisplayHomeAsUpEnabled(true);
 
//ActionBarのホームボタンを有効化
getActionBar().setHomeButtonEnabled(true);
 
//Drawerを開閉したときのイベントを受け取る
 
mDrawerToggle = new ActionBarDrawerToggle(this,
mDrawerList,
R.drawable.ic_drawer,
R.string.drawer_open,
R.string.drawer_close){
 
@Override
public void onDrawerClosed(View v){
}
 
@Override
public void onDrawerOpened(View drawerView){
}
 
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
}

次に、DrawerToggleでオプションメニューの選択を検知可能にする

1
2
3
4
5
6
7
@Override
public boolean onOptionsItemSelected(MenuItem item){
if(mDrawerToggle.onOptionsItemSelected(item)){
return true;
}
return super.onOptionsItemSelected(item);
}

次に、DrawerToggleでオプションメニューの制御

1
2
3
4
5
@Override
protected void onPostCreate(Bundle savedInstanceState){
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}

そして、DrawerToggleで上下の変更の制御

1
2
3
4
5
@Override
public void onConfigurationChanged(Configuration newConfig){
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}

そして、ボタンを押したときの処理

1
2
3
4
@Override
public void onItemClick(AdapterView<?> adapterView, View parent, int position, long id){
selectItem(position);
}

次に、アイテム選択時の処理

1
2
3
4
5
6
7
8
9
10
@Override
public void selectItem(int position){
ListAdapter adapter = mDrawerList.getAdapter();
String item = (String)adapter.
getItem(position);
 
mTextView.setText("選択したアイテム: "+item);
 
mDrawerLayout.closeDrawer(mDrawerList);
}

これで、NavigationDrawerが作成できる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です