Android学习路线（二十四）ActionBar Fragment运用最佳实践

转载请注明出处：http://blog.csdn.net/sweetvvck/article/details/38645297

通过前面的几篇博客，大家看到了Google是如何解释action bar和fragment以及推荐的用法。俗话说没有demo的博客不是好博客，下面我会介绍一下action bar和fragment在实战中的应用，以及相关demo源码，希望和大家相互交流。

了解过fragment的同学们应该都知道，fragment是android 3.0版本才出现的的，因此如果要在支持android 3.0一下版本的工程中使用fragment的话是需要添加Support Library的。具体如何添加我就不再赘述，可以看我前面的博客Android学习路线（二十一）运用Fragment构建动态UI——创建一个Fragment，下面的项目支持到API Level最低为8，所以项目中也会使用到Support Library。

作为一个有上进心的Android开发者，我们是希望项目的设计符合Android Design的。Android Design是Google官方推荐的应用设计原则，不了解Android Design的同学可以去了解下，我这里有官方翻译文档。

我发现“知乎”的App设计是符合Android Design的，那么我们的项目就来模仿知乎的主界面。首先看下效果图：

我们来分析一下这样的界面应该怎么实现，从上图可以看出“知乎”android端使用了action bar和drawerlayout，同时drawer中item切换主界面应该是fragment。

新建一个工程FakeZhihu：

从上图可以看到，使用最新的adt插件创建android项目时，如果选择的Minimum Required SDK为8，而Target SDK大于它的话，系统会自动在项目中导入Support v4包；在创建项目向导最后一步可以选择Navigation Type，如果选择了Navigation Drawer，adt工具会在创建项目时自动生成DrawerLayout相关示例代码。但由于DrawerLayout是在高版本的API中出现的，因此adt工具会帮助导入Support v7 appcompat包，这样DrawerLayout就可以兼容到Android2.2了。没有使用最新版的adt工具也没有关系，我提供的demo里有Support v4包和Support v7包，大家可以直接使用。

      下面来看看代码如何实现，android默认的holo主题只提供两种色调，和官方的action bar比较可以看出“知乎”的action bar的颜色以及action bar上action item的颜色以及title的字体大小都是自定义的，那么我们来模仿它自定义一下action bar。

      首先我们打开res目录下的style文件，自定义一个主题和action bar的style，然后在自定义主题中引用自定义的action bar的style：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <!-- the theme applied to the application or activity -->  
4.     <style name="CustomActionBarTheme"  
5.            parent="@style/Theme.AppCompat.Light.DarkActionBar">  
6.         <item name="android:actionBarStyle">@style/MyActionBar</item>  
7.   
8.         <!-- Support library compatibility -->  
9.         <item name="actionBarStyle">@style/MyActionBar</item>  
10.     </style>  
11.   
12.     <!-- ActionBar styles -->  
13.     <style name="MyActionBar"  
14.            parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">  
15.         <item name="android:background">@drawable/actionbar_background</item>  
16.         <item name="android:titleTextStyle">@style/MyTitleStyle</item>  
17.   
18.         <!-- Support library compatibility -->  
19.         <item name="background">@drawable/actionbar_background</item>  
20.         <item name="titleTextStyle">@style/MyTitleStyle</item>  
21.     </style>  
22.     <style name="MyTitleStyle"  
23.            parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">  
24.         <item name="android:textSize">20dp</item>  
25.     </style>  
26. </resources>  

这里要注意的是 无论是在自定义主题还是自定义style时，要根据情况加上parent属性，如果没有加上相应的parent属性的话就不能使用父style中没有被覆盖的样式 。具体如何设置action bar的style可以参考  Android学习路线（九）为Action Bar添加Style 。

完成自定义主题和style后要记得在manifest文件中应用：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.sweetvvck.fakezhihu"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.   
7.     <uses-sdk  
8.         android:minSdkVersion="8"  
9.         android:targetSdkVersion="19" />  
10.   
11.     <application  
12.         android:allowBackup="true"  
13.         android:icon="@drawable/ic_launcher"  
14.         android:label="@string/app_name"  
15.         android:theme="@style/CustomActionBarTheme" >  
16.         <activity  
17.             android:name="com.sweetvvck.fakezhihu.MainActivity"  
18.             android:label="@string/app_name" >  
19.             <intent-filter>  
20.                 <action android:name="android.intent.action.MAIN" />  
21.   
22.                 <category android:name="android.intent.category.LAUNCHER" />  
23.             </intent-filter>  
24.         </activity>  
25.     </application>  
26.   
27. </manifest>  

这里可以让整个应用都使用自定义的主题，也可以指定单个activity使用，使用android:theme属性来指定。

接下来要给app添加DrawerLayout了，修改MainActivity的布局文件，添加一个DrawerLayout，内容非常简单，其中包含一个Drawer和内容布局的Container：

[html]  view plain copy

1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/drawer_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context="com.sweetvvck.fakezhihu.MainActivity" >  
7.   
8.     <FrameLayout  
9.         android:id="@+id/container"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent" />  
12.   
13.     <fragment  
14.         android:id="@+id/navigation_drawer"  
15.         android:name="com.sweetvvck.fakezhihu.NavigationDrawerFragment"  
16.         android:layout_width="@dimen/navigation_drawer_width"  
17.         android:layout_height="match_parent"  
18.         android:layout_gravity="start" />  
19.   
20. </android.support.v4.widget.DrawerLayout>  

注意，下面那个fragment就是app的Drawer， 其中的属性android:layout_gravity在这里表示Drawer从哪一侧划出，start代表左侧，end代表右侧；还可以定义两个fragment，然后一个左侧划出一个右侧划出 ，DrawerLayout在之后会详细讲解，这里先简单了解如何使用。

创建完DrawerLayout布局后，我们来为Drawer定义一个fragment，我们可以看到知乎的Drawer中只是包含了一个ListView。这个ListView的第一项和其它项的布局不一样，我们可以想到用ListView加上headerView来实现，知道这些后，我们来创建一个NavigationDrawerFragment继承自Fragment，这个fragment的布局包含一个ListView：

[html]  view plain copy

1. <ListView 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:background="#fff"  
6.     android:choiceMode="singleChoice"  
7.     android:divider="#c3c3c3"  
8.     android:dividerHeight="0.5dp"  
9.     tools:context="com.sweetvvck.fakezhihu.NavigationDrawerFragment" />  

使用一个ArrayList来存放ListView的数据，定义一个DrawerListItem对象来存放每个Item的title和icon的资源ID：

[html]  view plain copy

1. <string-array name="item_title">  
2.     <item>首页</item>  
3.     <item>发现</item>  
4.     <item>关注</item>  
5.     <item>收藏</item>  
6.     <item>草稿</item>  
7.     <item>搜索</item>  
8.     <item>提问</item>  
9.     <item>设置</item>  
10. </string-array>  

[java]  view plain copy

1. String[] itemTitle = getResources().getStringArray(R.array.item_title);  
2. int[] itemIconRes = {  
3.   R.drawable.ic_drawer_home,  
4.   R.drawable.ic_drawer_explore,  
5.   R.drawable.ic_drawer_follow,  
6.   R.drawable.ic_drawer_collect,  
7.   R.drawable.ic_drawer_draft,  
8.   R.drawable.ic_drawer_search,  
9.   R.drawable.ic_drawer_question,  
10.   R.drawable.ic_drawer_setting};  
11.          
12. for (int i = 0; i < itemTitle.length; i++) {  
13.     DrawerListItem item = new DrawerListItem(getResources().getDrawable(itemIconRes[i]), itemTitle[i]);  
14.     mData.add(item);  
15.   
16. }  

准备好数据后为该ListView设置Adapter，我们发现这个ListView是Single Choice模式的，并且每个Item被选中后会高亮。那么如何来实现这个功能呢？

实现这样的效果有两个步骤：

      第一：在ListView中指定android:choiceMode="singleChoice"；

      第二：给ListView的Item的布局设置一个特殊的背景drawable，这个drawable包含当状态为activated时的背景和常态下的背景；同时这个item布局中的图片src和文字颜色也要坐相应的设置；

item的背景：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_activated="true" android:drawable="@drawable/activated_background_color" />  
4.     <item android:drawable="@android:color/transparent" />  
5. </selector>  

图片的src，这里以home为例：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_activated="true" android:drawable="@drawable/ic_drawer_home_pressed" />  
4.     <item android:drawable="@drawable/ic_drawer_home_normal" />  
5. </selector>  

文字的颜色：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- Copyright (C) 2011 Google Inc. All Rights Reserved. -->  
3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <item android:state_enabled="false"  
5.         android:color="#ff999999"/>  
6.     <item android:state_activated="true"  
7.         android:color="@android:color/white" />  
8.     <item  
9.         android:color="#636363" />  
10. </selector>