Google今年七月份的时候更新了他们的Google+应用，采用了新的导航方式并抛弃了navigationdrawer。一时之间，又引发了一系列关于NavigationDrawer利弊的讨论，不过对于开发者而言我们只需要管好自己需要实现或者学习的功能的即可，2012年Youtube、Facebook、Path等应用纷纷使用了Navigationdrawer这样的导航方式，去年Google为了整治越来越混的Android，设计出了抽屉导航，开始正题还是关心下如何使用吧:
看布局之前看下布局吧，网上常见的一张图片如下,Android官方文档上的一个图片，文章最后会给出链接:
布局文件代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<code><RelativeLayout xmlns:android=</code><code>"http://schemas.android.com/apk/res/android"</code>
<code> </code><code>xmlns:tools=</code><code>"http://schemas.android.com/tools"</code>
<code> </code><code>android:layout_width=</code><code>"match_parent"</code>
<code> </code><code>android:layout_height=</code><code>"match_parent"</code>
<code> </code><code>tools:context=</code><code>"com.example.naviganationdrawer.MainActivity"</code> <code>></code>
<code> </code><code><android.support.v4.widget.DrawerLayout</code>
<code> </code><code>android:id=</code><code>"@+id/mDrawerLayout"</code>
<code> </code><code>android:layout_width=</code><code>"match_parent"</code>
<code> </code><code>android:layout_height=</code><code>"match_parent"</code> <code>></code>
<code> </code><code><FrameLayout</code>
<code> </code><code>android:id=</code><code>"@+id/content_frame"</code>
<code> </code><code>android:layout_width=</code><code>"match_parent"</code>
<code> </code><code>android:layout_height=</code><code>"match_parent"</code> <code>></code>
<code> </code><code></FrameLayout></code>
<code> </code><code><!-- 导航抽屉 --></code>
<code> </code><code><ListView</code>
<code> </code><code>android:id=</code><code>"@+id/left_drawer"</code>
<code> </code><code>android:layout_width=</code><code>"120dp"</code>
<code> </code><code>android:layout_height=</code><code>"match_parent"</code>
<code> </code><code>android:layout_gravity=</code><code>"start"</code>
<code> </code><code>android:background=</code><code>"@android:color/holo_red_light"</code>
<code> </code><code>android:choiceMode=</code><code>"singleChoice"</code>
<code> </code><code>android:divider=</code><code>"@android:color/transparent"</code>
<code> </code><code>android:dividerHeight=</code><code>"0dp"</code> <code>/></code>
<code> </code><code></android.support.v4.widget.DrawerLayout></code>
<code></RelativeLayout></code>
DrawerLayout 作为界面根控件，在DrawerLayout里面第一个View为当前界面主内容；第二个和第三个View为抽屉菜单内容。如果当前界面只需要一个抽屉菜单，则第三个View可以省略。
显示的主要内容的View必须要是第一个必须为DrawerLayout的第一个子View， 原因在于 XML 布局文件中的View顺序为Android系统中的 z-ordering顺序，而抽屉必须出现在内容之上。
右侧图片的显示是个ImageView，贴下代码:
<code><?xml version=</code><code>"1.0"</code> <code>encoding=</code><code>"utf-8"</code><code>?></code>
<code><FrameLayout xmlns:android=</code><code>"http://schemas.android.com/apk/res/android"</code>
<code> </code><code>android:layout_height=</code><code>"match_parent"</code> <code>></code>
<code> </code>
<code> </code><code><ImageView</code>
<code> </code><code>android:id=</code><code>"@+id/content_image"</code>
<code> </code><code>android:layout_width=</code><code>"wrap_content"</code>
<code> </code><code>android:layout_height=</code><code>"wrap_content"</code>
<code> </code><code>android:src=</code><code>"@drawable/ic_launcher"</code>
<code> </code><code>/></code>
<code></FrameLayout></code>
onCreate中的代码实现:
<code>mPlanetTitles=</code><code>new</code> <code>String[]{</code><code>"财经"</code><code>,</code><code>"科技"</code><code>};</code>
<code> </code><code>mDrawerList = (ListView) findViewById(R.id.left_drawer);</code>
<code> </code><code>mDrawerList.setAdapter(</code><code>new</code> <code>ArrayAdapter<String>(</code><code>this</code><code>,</code>
<code> </code><code>android.R.layout.simple_list_item_1, mPlanetTitles));</code>
<code> </code><code>mDrawerLayout=(DrawerLayout) findViewById(R.id.mDrawerLayout);</code>
<code> </code><code>mDrawerList.setOnItemClickListener(</code><code>new</code> <code>DrawerItemClickListener());</code>
页面左侧是ListView，里面的是当用户选择菜单List中的条目时，系统会调用 OnItemClickListener的 onItemClick()函数，点击事件:
<code>private</code> <code>class</code> <code>DrawerItemClickListener </code><code>implements</code> <code>ListView.OnItemClickListener {</code>
<code> </code><code>@Override</code>
<code> </code><code>public</code> <code>void</code> <code>onItemClick(AdapterView parent, View view, </code><code>int</code> <code>position, </code><code>long</code> <code>id) {</code>
<code> </code><code>selectItem(position);</code>
<code> </code><code>}</code>
<code>}</code>
选中的事件:
<code>private</code> <code>void</code> <code>selectItem(</code><code>int</code> <code>position) {</code>
<code> </code><code>Fragment fragment = </code><code>new</code> <code>FragmentContent(mImageList[position]);</code>
<code> </code><code>getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, fragment)</code>
<code> </code><code>.commit();</code>
<code> </code><code>mDrawerList.setItemChecked(position, </code><code>true</code><code>);</code>
<code> </code><code>setTitle(mPlanetTitles[position]);</code>
<code> </code><code>mDrawerLayout.closeDrawer(mDrawerList);</code>
设置标题:
<code>@Override</code>
<code>public</code> <code>void</code> <code>setTitle(CharSequence title) {</code>
<code> </code><code>mTitle = title;</code>
<code> </code><code>getActionBar().setTitle(mTitle);</code>
右侧显示图片的FragementContent中的代码:
31
32
33
34
35
36
37
<code>public</code> <code>class</code> <code>FragmentContent </code><code>extends</code> <code>Fragment {</code>
<code> </code>
<code> </code><code>private</code> <code>int</code> <code>resourceId;</code>
<code> </code><code>public</code> <code>FragmentContent(</code><code>int</code> <code>i) {</code>
<code> </code><code>// TODO Auto-generated constructor stub</code>
<code> </code><code>resourceId=i;</code>
<code> </code><code>public</code> <code>void</code> <code>onActivityCreated(Bundle savedInstanceState) {</code>
<code> </code><code>// TODO Auto-generated method stub</code>
<code> </code><code>super</code><code>.onActivityCreated(savedInstanceState);</code>
<code> </code><code>private</code> <code>View view;</code>
<code> </code><code>private</code> <code>ImageView mImageView;</code>
<code> </code><code>public</code> <code>View onCreateView(LayoutInflater inflater,</code>
<code> </code><code>ViewGroup container, Bundle savedInstanceState) {</code>
<code> </code><code>view= inflater.inflate(R.layout.fragmentcontent, </code><code>null</code><code>);</code>
<code> </code><code>mImageView = (ImageView)view.findViewById(R.id.content_image);</code>
<code> </code><code>mImageView.setImageResource(resourceId);</code>
<code> </code><code>return</code> <code>view;</code>
<code> </code><code>public</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) {</code>
<code> </code><code>super</code><code>.onCreate(savedInstanceState);</code>
最后看下效果吧:
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4168526.html，如需转载请自行联系原作者