原文链接:http://developer.android.com/training/implementing-navigation/nav-drawer.html
A Navigation Drawer,有时候也叫SlidingMenu。就是类似知乎、网易新闻、唯品会那样的隐藏在屏幕左边的菜单栏。可以通过手指从左往右滑动,或者点击ActionBar上的一个icon来显示Menu。
在使用这个控件到你的应用中之前,你需要读一下这个网页http://developer.android.com/design/patterns/navigation-drawer.html来了解一下Navigation Drawer的用户用例和设计原则。
创建一个Drawer布局:
为了添加一个Navigation Drawer,需要将DrawerLayout作为你的layout的根view。再添加一个view来存放主要的内容,添加一个view来存放Navigation Drawer的内容。
<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>
这个layout展示了一些重要的布局特征:
1.主容器(FrameLayout)必须放在DrawerLayout中第一个的位置,因为XML顺序代表了z轴,而drawer必须放在content的上面。
2.主容器的宽高设置成填充父元素,因为在drawer隐藏时,主容器代表整个UI界面。
3.drawer控件必须申明android:layout_gravity属性。为了支持RTL语言,使用了"start"值而不是"left"值。(这样当layout是RTL时,drawer就出现在右边)。
4.drawer的宽度用dp表示,而高度是填充父元素。为了始终能看见主容器的一部分,drawer的宽度应该不超过320dp。
初始化Drawer的List:
public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
// Set the adapter for the list view
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles));
// Set the list's click listener
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
...
}
}
上面这段代码调用了setOnItemClickListener()来接受Drawer的子控件的点击事件。下面的代码会展示当用户选择了一个item时,怎样实现这个接口来改变主容器的内容。
处理Navigation的点击事件:
在下面的例子中,选中Drawer List的一个子控件就向主容器中插入一个不同的Fragment。
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
selectItem(position);
}
}
/** Swaps fragments in the main content view */
private void selectItem(int position) {
// Create a new fragment and specify the planet to show based on position
Fragment fragment = new PlanetFragment();
Bundle args = new Bundle();
args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
fragment.setArguments(args);
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.content_frame, fragment)
.commit();
// Highlight the selected item, update the title, and close the drawer
mDrawerList.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
}
@Override
public void setTitle(CharSequence title) {
mTitle = title;
getActionBar().setTitle(mTitle);
}
监听Drawer的打开关闭事件:
为了监听Drawer的打开关闭事件,需要为DrawerLayout添加一个DrawerLayout.DrawerListener这个接口提供onDrawerOpened()和onDrawClosed()的回调函数。
如果你的应用包含action bar,那你也可以继承ActionBarDrawerToggle。因为ActionBarDrawerToggle实现了DrawerLayout.DrawerListener,所以你仍然可以重写这些回调函数。并且这样也可以使ActionBar和Navigation Drawer有更好的交互。
当Drawer可见时,你需要修改ActionBar的内容。比如改变标题,去掉和主容器内容相关的控件。下面的代码会告诉你怎么通过一个ActionBarDrawerToggle的实例来重写DrawerLayout.DrawerListener的回调方法。
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mTitle = mDrawerTitle = getTitle();
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the nav drawer is open, hide action items related to the content view
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
}
下面会介绍ActionBarDrawerToggle的构造参数,以及设置它来处理与ActionBar icon交互所需要的其他步骤。
通过App Icon来打开和关闭Drawer:用户可以通过手势滑动来打开或关闭Drawer,但是如果你使用Actionbar,你应该允许用户通过点击App icon来打开和关闭Drawer。并且需要一个特定的icon来指示Drawer的打开和关闭。你可以通过ActionBarDrawerToggle来实现所有的这些行为。
为了使一个ActionBarDrawerToggle具备这些功能,在通过构造方法创建它的实例的时候,需要下面的参数:
1.包含这个Drawer的Activity。
2.DrawerLayout。
3.一个用来指示Drawer的图片资源。
4.一个字符串资源来描述“open drawer”动作。
5.一个字符串资源来描述“close drawer”动作。
然后,不管你是否创建了一个ActionBarDrawerToggle的子类作为你的drawer监听器,你需要在Activity的生命周期中的一些地方调用你的ActionBarDrawerToggle
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...
public void onCreate(Bundle savedInstanceState) {
...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */
) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
@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);
mDrawerToggle.onConfigurationChanged(newConfig);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...
return super.onOptionsItemSelected(item);
}
...
}