正在加载
请稍等

菜单

红楼飞雪 梦

15526773247

文章

Home android开发 NavigationDrawer DrawerLayout安卓导航抽屉
Home android开发 NavigationDrawer DrawerLayout安卓导航抽屉

NavigationDrawer DrawerLayout安卓导航抽屉

android开发 by

先上图看效果

\

\

现在很多的应用都已经实现了,这种左侧侧滑菜单,同时也可以点击ActionBar左上角的三个横杠来显示或隐藏侧滑菜单.其实Android官方也已经提供了这个功能.下面我们就来学习一下怎么使用官方的API.

1. 导入官方的android-support-v4.jar包

2. 修改MainActivity的layout文件,把android.support.v4.widget.DrawerLayout做为XML文件的根 节点. 因为DrawerLayout是我们能够实现Navigation Drawer的关键所在. 然后在里面添加两个元素,一个用作主界面来显示内容(当Navigation Drawer隐藏的时候), 另一个用来显示Navigation Drawer 的内容. 如下所示:

01.<android.support.v4.widget.DrawerLayout
03.android:id="@+id/drawer_layout"
04.android:layout_width="match_parent"
05.android:layout_height="match_parent">
06.<!-- The main content view -->
07.<FrameLayout
08.android:id="@+id/content_frame"
09.android:layout_width="match_parent"
10.android:layout_height="match_parent" />
11.<!-- The navigation drawer -->
12.<ListView android:id="@+id/left_drawer"
13.android:layout_width="240dp"
14.android:layout_height="match_parent"
15.android:layout_gravity="start"
16.android:choiceMode="singleChoice"
17.android:divider="@android:color/transparent"
18.android:dividerHeight="0dp"
19.android:background="#111"/>
20.</android.support.v4.widget.DrawerLayout>

有一下几点需要注意:

 

* 显示内容的元素必须是DrawerLayout的第一个子元素(例如,上例中的FrameLayout)

* 显示内容的元素的宽和高属性,必须设置为match_parent, 这是因为当Navigation Drawer隐藏的时候,它会铺满整个界面(例如,上例中的FrameLayout)

* 显示Drawer内容的元素必须指定layout_gravity属性. 一些语言(如阿拉伯语和希伯来语)要求文本布局和应用布局必须采用从右到左 (RTL) 的读取顺序,这时候属性值就要填入”start”,而不是”left”.(我测试了一下,填入start一定不会出错,但是如果填入right就会报错, 应该是大陆的机器默认都是从左往右的顺序吧.)(例如,上例中的ListView)

* 显示Drawer内容的元素高度可以使用match_parent,宽度最好不要超过320dp,因为这样当Drawer打开的时候,用户还可以看到后面的主界面的一部分,用户体验会比较好.

3. 初始化Drawer中的内容

通常来说,Navigation Drawer在界面中是一个ListView,所以它的初始化就是通过Adapter,比如ArrayAdapter或SimpleCursorAdapter.本例中的初始化,使用了String Array

 

01.public class MainActivity extends Activity {
02.private String[] mPlanetTitles;
03.private DrawerLayout mDrawerLayout;
04.private ListView mDrawerList;
05....
06. 
07.@Override
08.public void onCreate(Bundle savedInstanceState) {
09.super.onCreate(savedInstanceState);
10.setContentView(R.layout.activity_main);
11. 
12.mPlanetTitles = getResources().getStringArray(R.array.planets_array);
13.mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
14.mDrawerList = (ListView) findViewById(R.id.left_drawer);
15. 
16.// Set the adapter for the list view
17.mDrawerList.setAdapter(new ArrayAdapter<String>(this,
18.R.layout.drawer_list_item, mPlanetTitles));
19.// Set the list's click listener
20.mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
21. 
22....
23.}
24.}

4. 处理Navigation Drawer中的条目点击事件. 本例中为每个条目创建了一个Fragment

 

 

01.private class DrawerItemClickListener implements ListView.OnItemClickListener {
02.@Override
03.public void onItemClick(AdapterView parent, View view, int position, long id) {
04.selectItem(position);
05.}
06.}
07. 
08./** Swaps fragments in the main content view */
09.private void selectItem(int position) {
10.// Create a new fragment and specify the planet to show based on position
11.Fragment fragment = new PlanetFragment();
12.Bundle args = new Bundle();
13.args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
14.fragment.setArguments(args);
15. 
16.// Insert the fragment by replacing any existing fragment
17.FragmentManager fragmentManager = getFragmentManager();
18.fragmentManager.beginTransaction()
19..replace(R.id.content_frame, fragment)
20..commit();
21. 
22.// Highlight the selected item, update the title, and close the drawer
23.mDrawerList.setItemChecked(position, true);
24.setTitle(mPlanetTitles[position]);
25.mDrawerLayout.closeDrawer(mDrawerList);
26.}
27. 
28.@Override
29.public void setTitle(CharSequence title) {
30.mTitle = title;
31.getActionBar().setTitle(mTitle);
32.}

5. 监听Navigation Drawer的打开和关闭事件

 

要想监听Drawer的打开和关闭事件,就需要为DrawerLayout设置一个DrawerListener监听器. 并实现DrawerListener的onDrawerOpend()和onDrawerClosed()方法.

如果你的程序中使用了ActionBar,那么你可以为DrawerLayout设置ActionBarDrawerToggle监听 器.ActionBarDrawerToggle是DrawerListener的子类,同样的需要实现onDrawerOpened()和 onDrawerClosed()方法.

根据Google官方的设计指南.如果你使用了ActionBar,那么你需要根据Drawer的状态(显示/隐藏)来对ActionBar上的内 容(例如Title/Action Item)进行处理(Title : 根据Drawer条目的内容来设置 , Action Item : 显示/隐藏).

本例中使用了ActionBarDrawerToggle

 

01.public class MainActivity extends Activity {
02.private DrawerLayout mDrawerLayout;
03.private ActionBarDrawerToggle mDrawerToggle;
04.private CharSequence mDrawerTitle;
05.private CharSequence mTitle;
06....
07. 
08.@Override
09.public void onCreate(Bundle savedInstanceState) {
10.super.onCreate(savedInstanceState);
11.setContentView(R.layout.activity_main);
12....
13. 
14.mTitle = mDrawerTitle = getTitle();
15.mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
16.mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
17.R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
18. 
19./** 当Drawer完全关闭时调用 */
20.public void onDrawerClosed(View view) {
21.super.onDrawerClosed(view);
22.getActionBar().setTitle(mTitle);
23.invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
24.}
25. 
26./** 当Drawer完全打开时调用 */
27.public void onDrawerOpened(View drawerView) {
28.super.onDrawerOpened(drawerView);
29.getActionBar().setTitle(mDrawerTitle);
30.invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
31.}
32.};
33. 
34.//  为DrawerLayout设置监听
35.mDrawerLayout.setDrawerListener(mDrawerToggle);
36.}
37. 
38./* 调用 invalidateOptionsMenu()方法后调用该方法 */
39.@Override
40.public boolean onPrepareOptionsMenu(Menu menu) {
41.// 当Drawer打开时,隐藏Action Item; 当Drawer关闭时,打开Action Item
42.boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
43.menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
44.return super.onPrepareOptionsMenu(menu);
45.}
46.}

6. 处理用户点击ActionBar左上角三条杠的点击事件

 

同样可以通过ActionBarDrawerToggle来实现该功能.有以下几点要注意

* 在ActionBarDrawerToggle的构造函数中第三个参数,是用来指定三条杠的图片资源的.(后面会附上所有的ActionBar图片资源)

* 必须调用onOptionsItemSelected(MenuItem item) 方法,并对ActionBarDrawerToggle进行处理,例如

 

1.public boolean onOptionsItemSelected(MenuItem item) {
2. 
3.if (toggle.onOptionsItemSelected(item)) {
4.return true;
5.}
6. 
7.return super.onOptionsItemSelected(item);
8.}

* 必须调用onPostCreate(Bundle savedInstanceState)方法, 该方法用于在onRestoreInstanceState方法调用后同步ActionBarDrawerToggle的状态,例如

 

 

1.protected void onPostCreate(Bundle savedInstanceState) {
2.super.onPostCreate(savedInstanceState);
3. 
4.mDrawerToggle.syncState();
5.}

* 必须调用onConfigurationChanged(Configuration newConfig)方法. 将新的配置传递给ActionBarDrawerToggle.例如

 

 

1.public void onConfigurationChanged(Configuration newConfig) {
2.super.onConfigurationChanged(newConfig);
3. 
4.mDrawerToggle.onConfigurationChanged(newConfig);
5.}

 

18 2015-04

 

我要 分享

 

 

本文 作者

 

相关 文章