當你按左上方的 App icon 時, 或者是向左拖拉畫面時,
影藏於左側的選單會跑出來, 這便是所謂的 DrawerNavigation 了.
Android 在 android.supprot.v4 的 SDK 裡提供了 DrawerLayout 以及 ActionBarDrawerToggle,
使得 DrawerNavigation 的製作上有了比較標準的格式.
drawer_layout 畫面
在畫面實作上, 我們用 DrawerLayout 包住主畫面以及左側邊欄畫面,
左側邊欄畫面的 layout_gravity = "left", 這樣 DrawerLayout 就知道它是左側欄了!
drawer_layout.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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:scrollbarStyle="outsideOverlay">
<TextView android:id="@+id/content_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/drawer_layout_summary"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</ScrollView>
<ListView android:id="@+id/left_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ff333333"/>
</android.support.v4.widget.DrawerLayout>
DrawerLayoutActivity 主程式
在程式中調用 DrawerLayout, 須讓 drawer (左側欄) 的出現與 ActionBar 的顯示一致,
因此我們用 ActionBarDrawerToggle 讓 action bar 跟 DrawerLayout 連結在一起,
同時撰寫 DrawerListener 來處理 drawer 的狀態.
另外, 左側欄是一個 ListView, 依照 ListView 的模式處理即可.
DrawerLayoutActivity.class
@SuppressLint("NewApi")
public class DrawerLayoutActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ListView mDrawer;
private TextView mContent;
private ActionBarHelper mActionBar;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.drawer_layout);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawer = (ListView) findViewById(R.id.left_drawer);
mContent = (TextView) findViewById(R.id.content_text);
mDrawerLayout.setDrawerListener(new DemoDrawerListener());
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawer.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
Shakespeare.TITLES));
mDrawer.setOnItemClickListener(new DrawerItemClickListener());
mActionBar = createActionBarHelper();
mActionBar.init();
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close);
}
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mContent.setText(Shakespeare.DIALOGUE[position]);
mActionBar.setTitle(Shakespeare.TITLES[position]);
mDrawerLayout.closeDrawer(mDrawer);
}
}
private class DemoDrawerListener implements DrawerLayout.DrawerListener {
@Override
public void onDrawerOpened(View drawerView) {
mDrawerToggle.onDrawerOpened(drawerView);
mActionBar.onDrawerOpened();
}
@Override
public void onDrawerClosed(View drawerView) {
mDrawerToggle.onDrawerClosed(drawerView);
mActionBar.onDrawerClosed();
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
mDrawerToggle.onDrawerSlide(drawerView, slideOffset);
}
@Override
public void onDrawerStateChanged(int newState) {
mDrawerToggle.onDrawerStateChanged(newState);
}
}
/**
* Create a compatible helper that will manipulate the action bar if available.
*/
private ActionBarHelper createActionBarHelper() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
return new ActionBarHelperICS();
} else {
return new ActionBarHelper();
}
}
private class ActionBarHelper {
public void init() {}
public void onDrawerClosed() {}
public void onDrawerOpened() {}
public void setTitle(CharSequence title) {}
}
private class ActionBarHelperICS extends ActionBarHelper {
private final ActionBar mActionBar;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
ActionBarHelperICS() {
mActionBar = getActionBar();
}
@Override
public void init() {
mActionBar.setDisplayHomeAsUpEnabled(true);
mActionBar.setHomeButtonEnabled(true);
mTitle = mDrawerTitle = getTitle();
}
@Override
public void onDrawerClosed() {
super.onDrawerClosed();
mActionBar.setTitle(mTitle);
}
@Override
public void onDrawerOpened() {
super.onDrawerOpened();
mActionBar.setTitle(mDrawerTitle);
}
@Override
public void setTitle(CharSequence title) {
mTitle = title;
}
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
}
範例圖片
