ナビゲーションドロワーの作成
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を設定する
<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()で取得する
まずは、パーツの宣言
private DrawerLayout mDrawerLayout; private ListView mDrawerList; private ActionBarDrawerToggle mDrawerToggle; private TextView mTextView;
次にonCreate()の中で、各Viewの取得
ちなみに、setupNavigationDrawer()は
自作のユーザー関数
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout); mDrawerList = (ListView)findViewById(R.id.left_drawer); mTextView = (TextView)findViewById(R.id.text); setupNavigationDrawer();
そして、NavigationDrawerを使うための設定を
setupNavigationDrawer()へ書いていく
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でオプションメニューの選択を検知可能にする
@Override
public boolean onOptionsItemSelected(MenuItem item){
if(mDrawerToggle.onOptionsItemSelected(item)){
return true;
}
return super.onOptionsItemSelected(item);
}
次に、DrawerToggleでオプションメニューの制御
@Override
protected void onPostCreate(Bundle savedInstanceState){
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}
そして、DrawerToggleで上下の変更の制御
@Override
public void onConfigurationChanged(Configuration newConfig){
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
そして、ボタンを押したときの処理
@Override
public void onItemClick(AdapterView<?> adapterView, View parent, int position, long id){
selectItem(position);
}
次に、アイテム選択時の処理
@Override
public void selectItem(int position){
ListAdapter adapter = mDrawerList.getAdapter();
String item = (String)adapter.
getItem(position);
mTextView.setText("選択したアイテム: "+item);
mDrawerLayout.closeDrawer(mDrawerList);
}
これで、NavigationDrawerが作成できる