忍者ブログ

アンドロイドのあれこれ

Navigation Drawer 基本実装
Navigation Drawer 基本実装
ポイントは非推奨になったandroid.support.v4.app.ActionBarDrawerToggleを使わずに、android.support.v7.app.ActionBarDrawerToggleを使って実装します。
android.support.v7.widget.Toolbarも導入するのでアプリのthemeは Theme.AppCompat.Light.NoActionBarにしている上で実装します。
特に難しいことはしません。

まずはレイアウトから

activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp" />

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- main content -->
<FrameLayout
android:id="@+id/main_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="?android:windowContentOverlay"
/>

<!-- drawer content -->
<LinearLayout
android:id="@+id/drawer_menu_item_layout"
android:orientation="vertical"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#EBEBEB">

<!-- drawer item menu -->

</LinearLayout>

</android.support.v4.widget.DrawerLayout>
</LinearLayout>

アプリケーション側

DrawerLayoutActionBarDrawerToggleの定義
MainActivity.java
...
public class MainActivity extends ActionBarActivity
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private Toolbar mToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mToolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(mToolbar);

mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, mDrawerLayout,
R.string.drawer_open,
R.string.drawer_close) {

public void onDrawerClosed(View view) {
// getSupportActionBar().setTitle(mTitle);
}
public void onDrawerOpened(View drawerView) {
// getSupportActionBar().setTitle(mDrawerTitle);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
...


トグル状態の同期やアイコンタップされたときの動作
MainActivity.java
...
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggle
mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}

return super.onOptionsItemSelected(item);
}


あとは、R.id.main_content_frameにコンテンツ(フラグメントなど)を導入するだけです。
終わり。

続き:Navigation DrawerでActionBarの上に、StatusBarの下にDrawerを置く
COMMENT
NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 
PR
© Android Advent
powered by 忍者ツールズ / 忍者ブログ / [PR]