Go语言视频零基础入门到精通

admin

Android 抽屉效果的导航菜单实现

抽屉效果的导航菜单
　　看了很多应用，觉得这种侧滑的抽屉效果的菜单很好。

　　不用切换到另一个页面，也不用去按菜单的硬件按钮，直接在界面上一个按钮点击，菜单就滑出来，而且感觉能放很多东西。

　　关于实现，搜索了一下，有如下两种：
　　1.用SlidingDrawer：
　　http://developer.android.com/reference/android/widget/SlidingDrawer.html
　　但是不知道为什么这个类官方不建议再继续用了：
　　Deprecated since API level 17
　　2.用DrawerLayout：
　　http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
　　Guide在这里：
　　http://developer.android.com/training/implementing-navigation/nav-drawer.html

库的引用
　　首先，

1. [b][url=http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html]DrawerLayout[/url][/b]

复制代码

这个类是在Support Library里的，需要加上android-support-v4.jar这个包。
　　然后程序中用时在前面导入import android.support.v4.widget.DrawerLayout;
　　如果找不到这个类，首先用SDK Manager更新一下Android Support Library，然后在Android SDK\extras\android\support\v4路径下找到android-support-v4.jar，复制到项目的libs路径，将其Add to Build Path.

代码1
　　布局：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent" >
6.     <android.support.v4.widget.DrawerLayout
7.         xmlns:android="http://schemas.android.com/apk/res/android"
8.         android:id="@+id/drawer_layout"
9.         android:layout_width="match_parent"
10.         android:layout_height="match_parent" >
12.         <!-- The main content view -->
13.         <!-- main content must be the first element of DrawerLayout because it will be drawn first and drawer must be on top of it -->
15.         <FrameLayout
16.             android:id="@+id/content_frame"
17.             android:layout_width="match_parent"
18.             android:layout_height="match_parent" />
20.         <!-- The navigation drawer -->
22.         <ListView
23.             android:id="@+id/left_drawer"
24.             android:layout_width="240dp"
25.             android:layout_height="match_parent"
26.             android:layout_gravity="left"
27.             android:background="#111"
28.             android:choiceMode="singleChoice"
29.             android:divider="@android:color/transparent"
30.             android:dividerHeight="0dp" />
31.     </android.support.v4.widget.DrawerLayout>
33. </RelativeLayout>

复制代码

　
　　DrawerLayout的第一个子元素是主要内容，即抽屉没有打开时显示的布局。这里采用了一个FrameLayout，里面什么也没放。
　　DrawerLayout的第二个子元素是抽屉中的内容，即抽屉布局，这里采用了一个ListView。


　　主要的Activity（从官方实例中扒出来的）：

1. package com.example.hellodrawer;
3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.content.res.Configuration;
6. import android.view.MenuItem;
7. import android.view.View;
8. import android.widget.AdapterView;
9. import android.widget.AdapterView.OnItemClickListener;
10. import android.widget.ArrayAdapter;
11. import android.widget.ListView;
12. import android.support.v4.app.ActionBarDrawerToggle;
13. import android.support.v4.view.GravityCompat;
14. import android.support.v4.widget.DrawerLayout;
16. public class HelloDrawerActivity extends Activity
17. {
19.     private String[] mPlanetTitles;
20.     private DrawerLayout mDrawerLayout;
21.     private ActionBarDrawerToggle mDrawerToggle;
22.     private ListView mDrawerList;
24.     @Override
25.     public void onCreate(Bundle savedInstanceState)
26.     {
27.         super.onCreate(savedInstanceState);
28.         setContentView(R.layout.activity_hello_drawer);
30.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
32.         // init the ListView and Adapter, nothing new
33.         initListView();
35.         // set a custom shadow that overlays the main content when the drawer
36.         // opens
37.         mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
38.                 GravityCompat.START);
40.         mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
41.                 R.drawable.ic_drawer, R.string.drawer_open,
42.                 R.string.drawer_close)
43.         {
45.             /** Called when a drawer has settled in a completely closed state. */
46.             public void onDrawerClosed(View view)
47.             {
49.                 invalidateOptionsMenu(); // creates call to
50.                                             // onPrepareOptionsMenu()
51.             }
53.             /** Called when a drawer has settled in a completely open state. */
54.             public void onDrawerOpened(View drawerView)
55.             {
57.                 invalidateOptionsMenu(); // creates call to
58.                                             // onPrepareOptionsMenu()
59.             }
60.         };
62.         // Set the drawer toggle as the DrawerListener
63.         mDrawerLayout.setDrawerListener(mDrawerToggle);
65.         // enable ActionBar app icon to behave as action to toggle nav drawer
66.         getActionBar().setDisplayHomeAsUpEnabled(true);
67.         // getActionBar().setHomeButtonEnabled(true);
68.         // Note: getActionBar() Added in API level 11
69.     }
71.     private void initListView()
72.     {
73.         mDrawerList = (ListView) findViewById(R.id.left_drawer);
75.         mPlanetTitles = getResources().getStringArray(R.array.planets_array);
77.         // Set the adapter for the list view
78.         mDrawerList.setAdapter(new ArrayAdapter<String>(this,
79.                 R.layout.list_item, mPlanetTitles));
80.         // Set the list"s click listener
81.         mDrawerList.setOnItemClickListener(new OnItemClickListener()
82.         {
84.             @Override
85.             public void onItemClick(AdapterView<?> parent, View view,
86.                     int position, long id)
87.             {
88.                 // Highlight the selected item, update the title, and close the
89.                 // drawer
90.                 mDrawerList.setItemChecked(position, true);
91.                 setTitle(mPlanetTitles[position]);
92.                 mDrawerLayout.closeDrawer(mDrawerList);
93.             }
94.         });
95.     }
97.     @Override
98.     protected void onPostCreate(Bundle savedInstanceState)
99.     {
100.         super.onPostCreate(savedInstanceState);
101.         // Sync the toggle state after onRestoreInstanceState has occurred.
102.         mDrawerToggle.syncState();
103.     }
105.     @Override
106.     public void onConfigurationChanged(Configuration newConfig)
107.     {
108.         super.onConfigurationChanged(newConfig);
109.         mDrawerToggle.onConfigurationChanged(newConfig);
110.     }
112.     @Override
113.     public boolean onOptionsItemSelected(MenuItem item)
114.     {
115.         // Pass the event to ActionBarDrawerToggle, if it returns
116.         // true, then it has handled the app icon touch event
117.         if (mDrawerToggle.onOptionsItemSelected(item))
118.         {
119.             return true;
120.         }
121.         // Handle your other action bar items...
123.         return super.onOptionsItemSelected(item);
124.     }
126. }

复制代码

　　比较纠结的是用了Level 11的一个API，这样minSdkVersion就有限制，不能太低。
　　图片资源Android官网示例处提供下载了。
　　程序运行后效果如下：
　　
　　抽屉打开前：

　　抽屉打开后：



代码2
　　今天又看了一下DrawerLayout的类，发现有很多方法可以直接用的。
　　重新试了一下，其实不用上面那么麻烦，随便自己定义一个按钮控制抽屉的打开就行：
　　布局：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:paddingBottom="@dimen/activity_vertical_margin"
6.     android:paddingLeft="@dimen/activity_horizontal_margin"
7.     android:paddingRight="@dimen/activity_horizontal_margin"
8.     android:paddingTop="@dimen/activity_vertical_margin"
9.     tools:context=".DrawerActivity" >
11.     <android.support.v4.widget.DrawerLayout
12.         android:id="@+id/drawer_layout"
13.         android:layout_width="match_parent"
14.         android:layout_height="match_parent" >
16.         <!-- The main content view -->
18.         <FrameLayout
19.             android:id="@+id/content_frame"
20.             android:layout_width="match_parent"
21.             android:layout_height="match_parent" >
23.             <Button
24.                 android:id="@+id/btn"
25.                 android:layout_width="match_parent"
26.                 android:layout_height="wrap_content"
27.                 android:text="open"
28.                 />
29.         </FrameLayout>
31.         <!-- The navigation drawer -->
33.         <ListView
34.             android:id="@+id/left_drawer"
35.             android:layout_width="240dp"
36.             android:layout_height="match_parent"
37.             android:layout_gravity="start"
38.             android:background="#111"
39.             android:choiceMode="singleChoice"
40.             android:divider="@android:color/transparent"
41.             android:dividerHeight="0dp" />
42.     </android.support.v4.widget.DrawerLayout>
44. </RelativeLayout>

复制代码

　　主要代码：

1. package com.example.hellodrawer;
3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.support.v4.widget.DrawerLayout;
6. import android.view.Gravity;
7. import android.view.View;
8. import android.view.View.OnClickListener;
9. import android.widget.Button;
11. public class DrawerActivity extends Activity
12. {
13.     private DrawerLayout mDrawerLayout = null;
15.     @Override
16.     protected void onCreate(Bundle savedInstanceState)
17.     {
18.         super.onCreate(savedInstanceState);
19.         setContentView(R.layout.activity_drawer);
21.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
23.         Button button = (Button) findViewById(R.id.btn);
24.         button.setOnClickListener(new OnClickListener()
25.         {
27.             @Override
28.             public void onClick(View v)
29.             {
30.                 // 按钮按下，将抽屉打开
31.                 mDrawerLayout.openDrawer(Gravity.LEFT);
33.             }
34.         });
35.     }
37. }

复制代码

参考资料
　　官方教程：
　　http://developer.android.com/design/patterns/navigation-drawer.html
　　http://developer.android.com/training/implementing-navigation/nav-drawer.html
　　其他参考资料：
　　http://blog.chengyunfeng.com/?p=493
　　http://my.eoe.cn/appadventure/archive/3826.html