androidでドロワーメニューを表示したい
なんかかっこよさそう
なので作ってみたいので調べました(^_^;)
参考
Creating a Navigation Drawer | Android Developers
NavigationDrawerをつかって、スライド式のメニューを実装する | Tech Booster
Y.A.M の 雑記帳: Android : Navigation Drawer を使う
SDKでサポートライブラリをインストールする必要が有るようです
プロジェクトを新規で作成する
※右下にすでにサンプルがあるけどブランクのやつから作っていきます
公式サンプル
http://developer.android.com/shareables/training/NavigationDrawer.zip
http://developer.android.com/downloads/design/Android_Design_Icons_20130926.zip
/app/build.gradle
apply plugin: 'com.android.application' android { compileSdkVersion 22 buildToolsVersion "21.1.2" defaultConfig { applicationId "jp.mshige1979.app.sampledrawer02" minSdkVersion 21 targetSdkVersion 22 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:support-v4:22.+' }
※compileにサポートライブラリを追加
※一度、クリーンビルドしないと動かないかも?
画面
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- The main content view --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer --> <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#111"/> </android.support.v4.widget.DrawerLayout>
※ルートにDrawerLayoutを指定しないといけない
drawer_list_item.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:gravity="center_vertical" android:paddingLeft="16dp" android:paddingRight="16dp" android:textColor="#fff" android:background="?android:attr/activatedBackgroundIndicator" android:minHeight="?android:attr/listPreferredItemHeightSmall"/>
※ドロワーメニュー用のリストのもの
fragment_planet.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="150dp" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Large Text" android:id="@+id/text2" /> </LinearLayout>
※選択後の画面用のもの
アクティビティ
package jp.mshige1979.app.sampledrawer02; import android.app.Activity; import android.app.Fragment; import android.app.FragmentManager; import android.content.res.Configuration; import android.os.Bundle; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.view.GravityCompat; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.support.v4.widget.DrawerLayout; import android.widget.TextView; public class MainActivity extends Activity { private String[] mPlanetTitles = null; private DrawerLayout mDrawerLayout = null; private ListView mDrawerList = null; private ActionBarDrawerToggle mDrawerToggle = null; private CharSequence mDrawerTitle; private CharSequence mTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTitle = getTitle(); mDrawerTitle = mTitle; // ドロワーメニューのリストの値を初期化 mPlanetTitles = new String[]{"aaa", "bbb", "ccc", "ddd"}; // ドロワーレイアウト、リストビューのidを取得 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.left_drawer); mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START); // リストビューとデータを関連付け mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles)); // 選択時のイベントを登録 mDrawerList.setOnItemClickListener( new ListView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { selectItem(position); } } ); // アクションバーにhomeボタンを追加 getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setHomeButtonEnabled(true); // ホームボタンクリック時の動作 // 押下することで開閉を切り替える mDrawerToggle = new ActionBarDrawerToggle( this, /* メインアクティビティ */ mDrawerLayout, /* ドロワーメニュー */ R.drawable.ic_drawer, /* ドロワーアイコン */ R.string.drawer_open, /* 開く */ R.string.drawer_close /* 閉じる */ ) { public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); invalidateOptionsMenu(); // onPrepareOptionsMenuを呼びます } public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); invalidateOptionsMenu(); // onPrepareOptionsMenuを呼びます } }; // リスナーに登録 mDrawerLayout.setDrawerListener(mDrawerToggle); } // ドロワーメニューのリスト選択処理 private void selectItem(int position) { // フラグメントを生成して値を引き渡す Fragment fragment = new PlanetFragment(); Bundle args = new Bundle(); args.putString(PlanetFragment.ARG_PLANET_TEXT, mPlanetTitles[position]); fragment.setArguments(args); // 画面切り替え FragmentManager fragmentManager = getFragmentManager(); fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit(); // 選択状態 mDrawerList.setItemChecked(position, true); // タイトル変更 setTitle(mPlanetTitles[position]); // ドロワーメニューを閉じる mDrawerLayout.closeDrawer(mDrawerList); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onPrepareOptionsMenu(Menu menu) { // If the nav drawer is open, hide action items related to the content view return super.onPrepareOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } int id = item.getItemId(); return super.onOptionsItemSelected(item); } @Override public void setTitle(CharSequence title) { // タイトル切り替え mTitle = title; getActionBar().setTitle(mTitle); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); mDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); mDrawerToggle.onConfigurationChanged(newConfig); } // 選択後の画面のフラグメント public static class PlanetFragment extends Fragment { public static final String ARG_PLANET_TEXT = "planet_text"; public PlanetFragment() { // Empty constructor required for fragment subclasses } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_planet, container, false); String str = getArguments().getString(ARG_PLANET_TEXT); TextView text2 = (TextView)rootView.findViewById(R.id.text2); text2.setText(str + " Selected! "); //getActivity().setTitle(str); return rootView; } } }
※そこそこマッチョになった感じ…
その他
values/strings.xml
<resources> <string name="app_name">SampleDrawer02</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="drawer_open">Open navigation drawer</string> <string name="drawer_close">Close navigation drawer</string> </resources>
結果
↓
↓
なんとか様になったかも
所感
1つの画面で表示できるものには限界があるので、一部の情報を隠して表示を切り替えることでできることが
増えていく感じがする。
メニュー用のアクティビティを増やすのは手間なのでこの機能はメニューとして役に立ちそう