使用Fragment完成Tab选项卡-Android Fragment应用实战

淩亂°似流年 2024-02-17 15:58 39阅读 0赞

先看一下QQ、新浪微博、支付宝钱包这三个非常有名的应用，都有一个底部导航栏，我们一般称之‘选项卡’。google官方会叫他们为fixed tab，不过国内好像很好这么叫的。其实，在anroid 4.x时代，google官方更希望应用的导航放在顶部，通过滑屏和点击标签来切换界面。但是随着ios的的跟风以及用户习惯的养成，这种设计风格的形成也就变成历史遗留问题。在这里我们不讨论哪一个风格好，哪一个风格不好。做为开发人员，我们可能更关注这种司空见惯的界面设计是怎么实现的呢？

![Center][]![Center 1][]![Center 2][]

在android 2.x时代，我们可能会地使用ActivityGroup来实现这种，但是随着jelly bean的市场份额超过50%，我们会发现有一种新的组建出现了，它叫Fragment([http://developer.android.com/reference/android/app/Fragment.html][http_developer.android.com_reference_android_app_Fragment.html])。而这种底部选项卡的风格界面的实现也由ActivityGroup转向了Fragment。先了，费话不多说了，下面我会一步一步教您怎么实现这个界面。在动手之前，我可能需要把我做好的样式图给你看一下，以遍让您有一个心里预期。

![Center 3][]

![16911469][]

其实，我们这个界面的实现，基本没有什么java 代码。不信，你看下面就是主界面的代码：

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** MainActivity **extends** Activity \{ 
2.  **private** FragmentManager fragmentManager; 
3.  **private** RadioGroup radioGroup; 
4.  
5.  @TargetApi(Build.VERSION\_CODES.HONEYCOMB) 
6.  @Override
7.  **protected****void** onCreate(Bundle savedInstanceState) \{ 
8.  **super**.onCreate(savedInstanceState); 
9.   requestWindowFeature(Window.FEATURE\_NO\_TITLE); 
10.  setContentView(R.layout.weibo\_tab); 
11. 
12.  fragmentManager = getFragmentManager(); 
13.  radioGroup = (RadioGroup) findViewById(R.id.rg\_tab); 
14.  radioGroup.setOnCheckedChangeListener(**new** RadioGroup.OnCheckedChangeListener() \{ 
15. @Override
16. **public****void** onCheckedChanged(RadioGroup group, **int** checkedId) \{ 
17.  FragmentTransaction transaction = fragmentManager.beginTransaction(); 
18.  Fragment fragment = FragmentFactory.getInstanceByIndex(checkedId); 
19.  transaction.replace(R.id.content, fragment); 
20.  transaction.commit(); 
21.  \} 
22.  \}); 
23.  \} 
24. 
25. \}

所以哦，亲们，我们把重点放在xml界面的编写上咯。

1.我们可能需要一背景图片像这样的：![16911469][]![Center 4][]

2.我们要准备这五个选项卡图片。包括正常和被按下两种状态。所以共十张图片。

3.你要为这五个按钮分别编写selector，文件名为weibolist\_attention\_selector.xml

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml**version="1.0"encoding="utf-8"**?>**
2.  **<****selector**xmlns:android="http://schemas.android.com/apk/res/android"**>**
3.  **<****item**android:drawable="@drawable/weibo\_listab\_attention\_on"android:state\_pressed="true"**/>**
4.  **<****item**android:drawable="@drawable/weibo\_listab\_attention\_on"android:state\_checked="true"**/>**
5.  **<****item**android:drawable="@drawable/weibo\_listab\_attention\_off"**/>**
6.  **</****selector****>**

这个xml文件挺简单的啊，但是细心的同学可能会地现，你这里为什么要用android:state\_checked的啊？为什么不是其他的，比如android:state\_selected哦

我想说，其实我这个底部用的是RadioGroup，我怎么判断当前选中的是哪个呢，不选中的是哪个呢。这里最好的选择就是使用RadioGroup，它的最大好处就是彼此的RadioButton具有互斥性，这样就费掉用java代码判断和处理的麻烦了。

4.下面，就要考虑为整个界面布局了。文件名为activity.xml

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml**version="1.0"encoding="utf-8"**?>**
2.  
3.  **<****LinearLayout**
4.  android:layout\_width="match\_parent"
5.  android:layout\_height="match\_parent"
6.  android:orientation="vertical"
7.  xmlns:android="http://schemas.android.com/apk/res/android"**>**
8.  
9.  
10. **<****FrameLayout**
11. android:id="@+id/content"
12. android:layout\_width="match\_parent"
13. android:layout\_height="match\_parent"
14. android:layout\_weight="1"**/>**
15. 
16. **<****RadioGroup**
17. android:id="@+id/rg\_tab"
18. android:orientation="horizontal"
19. android:layout\_width="match\_parent"
20. android:layout\_height="wrap\_content"
21. android:background="@drawable/bg\_weibo\_listab"**>**
22. 
23. **<****RadioButton**
24. style="@style/weibo\_tab"
25. android:drawableTop="@drawable/weibolist\_attention\_selector"
26. android:text="微博"**/>**
27. 
28. **<****RadioButton**
29. style="@style/weibo\_tab"
30. android:drawableTop="@drawable/weibolist\_atme\_selector"
31. android:text="\\@我"**/>**
32. 
33. **<****RadioButton**
34. style="@style/weibo\_tab"
35. android:drawableTop="@drawable/weibolist\_comment\_selector"
36. android:text="评论"**/>**
37. 
38. **<****RadioButton**
39. style="@style/weibo\_tab"
40. android:drawableTop="@drawable/weibolist\_mylist\_selector"
41. android:text="我的"**/>**
42. 
43. **<****RadioButton**
44. style="@style/weibo\_tab"
45. android:drawableTop="@drawable/weibolist\_global\_selector"
46. android:text="全站"**/>**
47. **</****RadioGroup****>**
48. **</****LinearLayout****>**

这里可能就有几个问题啦

(1) FrameLayout是干什么的，可能用别的父控件吗？

这个是一个预留的内容控件，以后会用它去呈现Fragment的内容。理论上是可以用别的父控件的，没试过。

(2)android:weight=1，怎么只有一个呢，这样做有对LinearLayout有意义吗?

首先对FragLayout一定要写，不写就会变成这样。![16911469][]但是第二个RadioGroup的weight一定不要写，不然会很难调的。这个我猜测应该会有一个很好weight缺省值自适应的。

我只是猜测啦，具体原因求解释。

(3)weibo\_tab样式里面什么内容?

什么内容，如下就可以啦：

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****style**name="weibo\_tab"**>**
2.  **<****item**name="android:layout\_height"**>**wrap\_content**</****item****>**
3.  **<****item**name="android:layout\_width"**>**match\_parent**</****item****>**
4.  **<****item**name="android:layout\_weight"**>**1**</****item****>**
5.  **<****item**name="android:gravity"**>**center**</****item****>**
6.  **<****item**name="android:textSize"**>**14sp**</****item****>**
7.  **<****item**name="android:paddingTop"**>**8dip**</****item****>**
8.  **<****item**name="android:paddingBottom"**>**4dip**</****item****>**
9.  **<****item**name="android:background"**>**@drawable/weibolist\_bottombar\_itembg\_selector**</****item****>**
10. **<****item**name="android:textColor"**>**@color/weibolist\_bottombar\_textcolor\_selector**</****item****>**
11. **<****item**name="android:button"**>**@null**</****item****>**
12. **</****style****>**

这个style的目地是为了把button相同的设置提取出来，进行很好地重构。  
 这里可能要解释几个属性weight，其实RadioGroup是继承LinearLayout，设置weight的目的就是把这个底部视图五等分。

textColor，这是为是控制底部颜色变化的。button，这个一定要设置，否则就会这样![20131124190153421][]

![16911469][]

做到这里，我建议你就跑起来，试试效果。虽然没有用到Fragment，但是底部选项已经可以任意切换啦。

你是不是已经把它很好的搞定了呢，先恭喜你咯。![大笑][laugh.gif]

5.下一步我来内容填充的界面视图，文件名为fragment.xml

**\[html\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<?****xml**version="1.0"encoding="utf-8"**?>**
2.  **<****RelativeLayout**xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"**>**
5.  
6.  **<****TextView**
7.  android:id="@+id/txt\_content"
8.  android:layout\_width="match\_parent"
9.  android:layout\_height="match\_parent"
10. android:gravity="center"
11. android:padding="10dp"
12. android:text=""
13. android:textSize="20sp"**/>**
14. **</****RelativeLayout****>**

这个没有什么解释的，略过。

6.下面我们做五个Fragment内容的呈现，如下：

先有一个BaseFragment抽象类，以被具体的子类继承和实现。

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****abstract****class** BaseFragment **extends** Fragment \{ 
2.  @Override
3.  **public** View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) \{ 
4.   View view = inflater.inflate(R.layout.fragment, **null**); 
5.   TextView textView = (TextView) view.findViewById(R.id.txt\_content); 
6.   textView.setText(initContent()); 
7.  **return** view; 
8.   \} 
9.  
10. **public****abstract** String initContent(); 
11. \}

(1)关注界面

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** AttentionFragment **extends** BaseFragment \{ 
2.  @Override
3.  **public** String initContent() \{ 
4.  **return**"这是关注我界面"; 
5.   \} 
6.  \}

(2)@界面

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** AtmeFragment **extends** BaseFragment \{ 
2.  
3.  @Override
4.  **public** String initContent() \{ 
5.  **return**"这是@我界面"; 
6.   \} 
7.  \}

(3)评论界面

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** CommentFragment **extends** BaseFragment \{ 
2.  @Override
3.  **public** String initContent() \{ 
4.  **return**"这是评论我界面"; 
5.   \} 
6.  \}

(4)我的界面

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** MyListFragment **extends** BaseFragment \{ 
2.  @Override
3.  **public** String initContent() \{ 
4.  **return**"这是我的列表界面"; 
5.   \} 
6.  \}

(5)全部界面

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** GlobalFragment **extends** BaseFragment \{ 
2.  @Override
3.  **public** String initContent() \{ 
4.  **return**"这是全站界面"; 
5.   \} 
6.  \}

7.我们还需要一个工厂模式，来实现根据下标的位置返回相应的Fragment。像这样

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public****class** FragmentFactory \{ 
2.  **public****static** Fragment getInstanceByIndex(**int** index) \{ 
3.   Fragment fragment = **null**; 
4.  **switch** (index) \{ 
5.  **case**1: 
6.   fragment = **new** AttentionFragment(); 
7.  **break**; 
8.  **case**2: 
9.   fragment = **new** AtmeFragment(); 
10. **break**; 
11. **case**3: 
12.  fragment = **new** CommentFragment(); 
13. **break**; 
14. **case**4: 
15.  fragment = **new** MyListFragment(); 
16. **break**; 
17. **case**5: 
18.  fragment = **new** GlobalFragment(); 
19. **break**; 
20.  \} 
21. **return** fragment; 
22.  \} 
23. \}

8.好了，万事具备只欠东风啦。请回到我们刚开始放出去那段代码，那你就已经完成它了。

9.哦，我们还是放上配置文件，贡大家参考。

**\[java\]** [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
2.  **package**="com.mydream.fragment"
3.   android:versionCode="1"
4.   android:versionName="1.0"> 
5.  
6.   <uses-sdk 
7.   android:minSdkVersion="14"
8.   android:targetSdkVersion="19" /> 
9.  
10.  <application 
11.  android:allowBackup="true"
12.  android:label="@string/app\_name"
13.  android:icon="@drawable/ic\_launcher"> 
14.  <activity 
15.  android:name=".MainActivity"
16.  android:label="@string/app\_name"> 
17.  <intent-filter> 
18.  <action android:name="android.intent.action.MAIN" /> 
19. 
20.  <category android:name="android.intent.category.LAUNCHER" /> 
21.  </intent-filter> 
22.  </activity> 
23.  </application> 
24. 
25. </manifest>

[源代码下载][Link 1]

[Center]: https://img-blog.csdn.net/20131116171603468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvbGluX2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20131116171618593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvbGluX2Jsb2c=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/06bef4281fe947c6a92d478df0700b97.png
[http_developer.android.com_reference_android_app_Fragment.html]: http://developer.android.com/reference/android/app/Fragment.html
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/aa716a785e7c40e19ccf7db251be059b.png
[16911469]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/98225ca8959441b09ec819a206f80b84.png
[view plain]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/98225ca8959441b09ec819a206f80b84.png#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/79670
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/79670/fork
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/dfd634ef07484c1db75c8404b4cfbd86.png
[20131124190153421]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c534acacbcf549fab7c652e8acc3fde2.png
[laugh.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/27bd6914dd194b43bec18240ad56d5ef.png
[Link 1]: http://download.csdn.net/detail/onceing/8874049