Navigation drawer是一个在屏幕左侧显示app的主要导航点的面板,它多数时间是隐藏的,用户在屏幕左缘右划或者点按action bar上的app图标时会出现。
本教程说明怎样用Support Library中DrawerLayout的API来实现Navigation drawer。
Navigation Drawer设计
在决定在app中使用Navigation drawer之前,你应该了解Android设计:Navigation Drawer设计指导中定义的使 用场景和设计原则。
创建Drawer布局
要添加一个Navigation drawer,要把DrawerLayout对象作为你layout的根视图,在DrawerLayout中,添加一个包含主要内容的view(drawer隐藏时的主界面)和一个包含Navigation drawer内容的view。
例如,下面的layout中DrawerLayout有两个子view:一个包含主要内容(运行时由一个Fragment产生)的FrameLayout,和一个定义Navigation drawer的ListView。
<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展示了一些重要特性:
主要内容view(上面的FrameLayout)必须是DrawerLayout中的第一个子view,因为XML中的顺序影响着z向的层级,drawer必须在最上层;
主要内容view设置为匹配父view的长宽,因为它代表Navigation drawer隐藏时的整个UI;
Drawer view(ListView)必须用android:layout_gravity指定其水平gravity。为了对从右向左(RTL)书写的语言提供支持,要将值指定为"start"而非"left"(这样layout为RTL时drawer就会自适应到右边);
Drawer view用dp为单位指定宽度,长度则匹配父view。Drawer宽度不应宽于320dp,这样用户始终能看到部分主界面。
初始化Drawer list
在activity中,首要的事就是初始化Navigation drawer的list项。具体怎样做取决于你app的内容,但Navigation drawer通常由ListView构成,所以这个list也应该由一个Adapter生成(比如ArrayAdapter或SimpleCursorAdapter)。
下面的例子是怎样用一个StringArray来初始化Navigation 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()来接收Navigation drawer list中的点击事件。下一节展示怎样实现这个接口,并在用户选择后改变内容view。
处理导航点击事件
当用户选择drawer中的一项时,系统调用OnItemClickListener的onItemClick()方法,并传递给setOnItemClickListener()的调用者。
在onItemClick()中做什么取决于你的app结构是怎样实现的。下例中,选择每个项都会在主内容view(ID为R.id.content_frame的FrameLayout)中插入一个不同的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);
}
监听打开和关闭事件
要监听打开和关闭事件,在DrawerLayout上调用setDrawerListener(),并实现DrawerLayout.DrawerListener,这个接口提供drawer事件的回调,如onDrawerOpened()和onDrawerClosed()。
不过,如果你的activity有action bar,你可以不用实现DrawerLayout.DrawerListener,而是继承ActionBarDrawerToggle类,ActionBarDrawerToggle类已经实现了DrawerLayout.DrawerListener,所以你仍然可以override那些回调,但是它会使得action bar图标和Navigation drawer之间的互动更合理易用(下一节会进一步讨论)。
如Android设计:Navigation Drawer设计指导中所说,你应在drawer可见时修改action bar的内容,比如改变标题,移除主内容相关的action项目。下面的代码展示了怎样通过override 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) {
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View 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构造函数的参数,以及处理action bar图标点击事件的步骤。
用app图标打开和关闭
用户可以用滑动手势来打开或关闭Navigation drawer,但如果你在使用action bar,你应该允许用户通过点击app图标来开关drawer,并且app图标应该用一个特殊图标来指示Navigation drawer的存在。这些都可以通过前面说的ActionBarDrawerToggle来实现。
要使ActionBarDrawerToggle工作,就要用它的构造函数创建一个它的实例,它需要如下参数:
容纳drawer的Activity;
DrawerLayout;
一个用作drawer指示的drawable资源。标准的Navigation drawer图标在Action Bar图标包中可以找到;
一个用来描述打开drawer动作的String资源(无障碍用);
一个用来描述关闭drawer动作的String资源(无障碍用)。
然后,不论你是否创建了一个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) {
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View 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);
}
...
}
完整的Navigation drawer例子,请这里下载
原文:Creating a Navigation Drawer
链接:http://developer.android.com/training/implementing-navigation/nav-drawer.html
本教程说明怎样用Support Library中DrawerLayout的API来实现Navigation drawer。
Navigation Drawer设计
在决定在app中使用Navigation drawer之前,你应该了解Android设计:Navigation Drawer设计指导中定义的使 用场景和设计原则。
创建Drawer布局
要添加一个Navigation drawer,要把DrawerLayout对象作为你layout的根视图,在DrawerLayout中,添加一个包含主要内容的view(drawer隐藏时的主界面)和一个包含Navigation drawer内容的view。
例如,下面的layout中DrawerLayout有两个子view:一个包含主要内容(运行时由一个Fragment产生)的FrameLayout,和一个定义Navigation drawer的ListView。
<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展示了一些重要特性:
主要内容view(上面的FrameLayout)必须是DrawerLayout中的第一个子view,因为XML中的顺序影响着z向的层级,drawer必须在最上层;
主要内容view设置为匹配父view的长宽,因为它代表Navigation drawer隐藏时的整个UI;
Drawer view(ListView)必须用android:layout_gravity指定其水平gravity。为了对从右向左(RTL)书写的语言提供支持,要将值指定为"start"而非"left"(这样layout为RTL时drawer就会自适应到右边);
Drawer view用dp为单位指定宽度,长度则匹配父view。Drawer宽度不应宽于320dp,这样用户始终能看到部分主界面。
初始化Drawer list
在activity中,首要的事就是初始化Navigation drawer的list项。具体怎样做取决于你app的内容,但Navigation drawer通常由ListView构成,所以这个list也应该由一个Adapter生成(比如ArrayAdapter或SimpleCursorAdapter)。
下面的例子是怎样用一个StringArray来初始化Navigation 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()来接收Navigation drawer list中的点击事件。下一节展示怎样实现这个接口,并在用户选择后改变内容view。
处理导航点击事件
当用户选择drawer中的一项时,系统调用OnItemClickListener的onItemClick()方法,并传递给setOnItemClickListener()的调用者。
在onItemClick()中做什么取决于你的app结构是怎样实现的。下例中,选择每个项都会在主内容view(ID为R.id.content_frame的FrameLayout)中插入一个不同的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);
}
监听打开和关闭事件
要监听打开和关闭事件,在DrawerLayout上调用setDrawerListener(),并实现DrawerLayout.DrawerListener,这个接口提供drawer事件的回调,如onDrawerOpened()和onDrawerClosed()。
不过,如果你的activity有action bar,你可以不用实现DrawerLayout.DrawerListener,而是继承ActionBarDrawerToggle类,ActionBarDrawerToggle类已经实现了DrawerLayout.DrawerListener,所以你仍然可以override那些回调,但是它会使得action bar图标和Navigation drawer之间的互动更合理易用(下一节会进一步讨论)。
如Android设计:Navigation Drawer设计指导中所说,你应在drawer可见时修改action bar的内容,比如改变标题,移除主内容相关的action项目。下面的代码展示了怎样通过override 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) {
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View 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构造函数的参数,以及处理action bar图标点击事件的步骤。
用app图标打开和关闭
用户可以用滑动手势来打开或关闭Navigation drawer,但如果你在使用action bar,你应该允许用户通过点击app图标来开关drawer,并且app图标应该用一个特殊图标来指示Navigation drawer的存在。这些都可以通过前面说的ActionBarDrawerToggle来实现。
要使ActionBarDrawerToggle工作,就要用它的构造函数创建一个它的实例,它需要如下参数:
容纳drawer的Activity;
DrawerLayout;
一个用作drawer指示的drawable资源。标准的Navigation drawer图标在Action Bar图标包中可以找到;
一个用来描述打开drawer动作的String资源(无障碍用);
一个用来描述关闭drawer动作的String资源(无障碍用)。
然后,不论你是否创建了一个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) {
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View 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);
}
...
}
完整的Navigation drawer例子,请这里下载
原文:Creating a Navigation Drawer
链接:http://developer.android.com/training/implementing-navigation/nav-drawer.html