アンドロイドのあれこれ
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
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>
アプリケーション側
DrawerLayout
とActionBarDrawerToggle
の定義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