用Fragment实现如新浪微博一样的底部菜单的切换

像我这个有强迫症的人来说，自从TabActivity抛弃之后，再使用看到一个个警告和一条条划着的横线，心里很不舒服，现在终于下定决心用Fragment来替换掉TabActivity了！我的研究成果如下：

首先是MainActivity，它需要继承FragmentActivity(这里是指：版本是3.0之前的继承FragmentActivity，3.0版本之后的继承Activity就可以)，对于FragmentActivity的声明周期我就不过多介绍了，和Activity差不了多少，自己也能弄明白！下边是MainActivity的代码：

[java] view plaincopy

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.support.v4.app.FragmentActivity;
5. import android.support.v4.app.FragmentManager;
6. import android.support.v4.app.FragmentTransaction;
7. import android.view.Window;
8. import android.widget.RadioButton;
9. import android.widget.RadioGroup;
10. import android.widget.RadioGroup.OnCheckedChangeListener;
11. public class MainActivity extends FragmentActivity {
12. private Fragment[] mFragments;
13. private RadioGroup bottomRg;
14. private FragmentManager fragmentManager;
15. private FragmentTransaction fragmentTransaction;
16. private RadioButton rbOne, rbTwo, rbThree, rbFour;
17. @Override
18. protected void onCreate(Bundle savedInstanceState) {
19. super.onCreate(savedInstanceState);
20. requestWindowFeature(Window.FEATURE_NO_TITLE);
21. setContentView(R.layout.activity_main);
22. mFragments = new Fragment[3];
23. fragmentManager = getSupportFragmentManager();
24. mFragments[0] = fragmentManager.findFragmentById(R.id.fragement_main);
25. mFragments[1] = fragmentManager.findFragmentById(R.id.fragement_search);
26. mFragments[2] = fragmentManager
27. .findFragmentById(R.id.fragement_setting);
28. fragmentTransaction = fragmentManager.beginTransaction()
29. .hide(mFragments[0]).hide(mFragments[1]).hide(mFragments[2]);
30. fragmentTransaction.show(mFragments[0]).commit();
31. setFragmentIndicator();
32. }
33. private void setFragmentIndicator() {
34. bottomRg = (RadioGroup) findViewById(R.id.bottomRg);
35. rbOne = (RadioButton) findViewById(R.id.rbOne);
36. rbTwo = (RadioButton) findViewById(R.id.rbTwo);
37. rbThree = (RadioButton) findViewById(R.id.rbThree);
38. bottomRg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
39. @Override
40. public void onCheckedChanged(RadioGroup group, int checkedId) {
41. fragmentTransaction = fragmentManager.beginTransaction()
42. .hide(mFragments[0]).hide(mFragments[1])
43. .hide(mFragments[2]);
44. switch (checkedId) {
45. case R.id.rbOne:
46. fragmentTransaction.show(mFragments[0]).commit();
47. break;
48. case R.id.rbTwo:
49. fragmentTransaction.show(mFragments[1]).commit();
50. break;
51. case R.id.rbThree:
52. fragmentTransaction.show(mFragments[2]).commit();
53. break;
54. default:
55. break;
56. }
57. }
58. });
59. }
60. }

下边对应的是MainActivity的布局文件activity_main.xml：

[html] view plaincopy

1. <LinearLayout 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="@drawable/activity_bg"
6. android:orientation="vertical" >
7. <!-- 上边主页面 -->
8. <fragment
9. android:id="@+id/fragement_main"
10. android:name="net.loonggg.fragment.FragmentMain"
11. android:layout_width="fill_parent"
12. android:layout_height="fill_parent"
13. android:layout_weight="10" />
14. <fragment
15. android:id="@+id/fragement_search"
16. android:name="net.loonggg.fragment.FragmentSearch"
17. android:layout_width="fill_parent"
18. android:layout_height="fill_parent"
19. android:layout_weight="10" />
20. <fragment
21. android:id="@+id/fragement_setting"
22. android:name="net.loonggg.fragment.FragmentSetting"
23. android:layout_width="fill_parent"
24. android:layout_height="fill_parent"
25. android:layout_weight="10" />
26. <!-- 底部菜单页面 -->
27. <RadioGroup
28. android:id="@+id/bottomRg"
29. android:layout_width="fill_parent"
30. android:layout_height="wrap_content"
31. android:layout_weight="0.5"
32. android:background="@drawable/tab_footer_bg"
33. android:orientation="horizontal" >
34. <RadioButton
35. android:id="@+id/rbOne"
36. style="@style/rg_btn_style"
37. android:checked="true"
38. android:drawableTop="@drawable/rb_one_btn_selector"
39. android:text="首页" />
40. <RadioButton
41. android:id="@+id/rbTwo"
42. style="@style/rg_btn_style"
43. android:drawableTop="@drawable/rb_two_btn_selector"
44. android:text="搜索" />
45. <RadioButton
46. android:id="@+id/rbThree"
47. style="@style/rg_btn_style"
48. android:drawableTop="@drawable/rb_three_btn_selector"
49. android:text="设置" />
50. </RadioGroup>
51. </LinearLayout>

这里为了大家方便，展示一下项目的布局图：

再下边是要设计的首页界面，它是继承的Fragment，具体看代码：

[java] view plaincopy

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.TextView;
8. public class FragmentMain extends Fragment {
9. private TextView tv;
10. @Override
11. public View onCreateView(LayoutInflater inflater, ViewGroup container,
12. Bundle savedInstanceState) {
13. return inflater.inflate(R.layout.fragment_main, container, false);
14. }
15. @Override
16. public void onActivityCreated(Bundle savedInstanceState) {
17. super.onActivityCreated(savedInstanceState);
18. tv = (TextView) getView().findViewById(R.id.titleTv);
19. tv.setText("首页");
20. }
21. }

接着是对应的布局文件代码fragment_main.xml：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6. <include
7. android:id="@+id/one_title"
8. layout="@layout/title_bar" />
9. <TextView
10. android:layout_width="fill_parent"
11. android:layout_height="fill_parent"
12. android:gravity="center"
13. android:text="这是首页"
14. android:textColor="#000000" />
15. </LinearLayout>

再接着是：搜索界面的代码：

[java] view plaincopy

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.TextView;
8. public class FragmentSearch extends Fragment {
9. private TextView tv;
10. @Override
11. public View onCreateView(LayoutInflater inflater, ViewGroup container,
12. Bundle savedInstanceState) {
13. return inflater.inflate(R.layout.fragment_search, container, false);
14. }
15. @Override
16. public void onActivityCreated(Bundle savedInstanceState) {
17. super.onActivityCreated(savedInstanceState);
18. tv = (TextView) getView().findViewById(R.id.titleTv);
19. tv.setText("搜索");
20. }
21. @Override
22. public void onPause() {
23. super.onPause();
24. }
25. }

如上是对应的布局文件的代码fragment_search.xml：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical" >
6. <include layout="@layout/title_bar" />
7. <TextView
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:gravity="center"
11. android:text="这是搜索界面"
12. android:textColor="#000000" />
13. </LinearLayout>

紧跟着是：设置界面的代码：

[java] view plaincopy

1. package net.loonggg.fragment;
2. import android.os.Bundle;
3. import android.support.v4.app.Fragment;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.TextView;
8. public class FragmentSetting extends Fragment {
9. private TextView tv;
10. @Override
11. public View onCreateView(LayoutInflater inflater, ViewGroup container,
12. Bundle savedInstanceState) {
13. return inflater.inflate(R.layout.fragment_setting, container, false);
14. }
15. @Override
16. public void onActivityCreated(Bundle savedInstanceState) {
17. super.onActivityCreated(savedInstanceState);
18. tv = (TextView) getView().findViewById(R.id.titleTv);
19. tv.setText("设置");
20. }
21. }

当然一样，下边对应的是设置界面的布局文件代码fragment_setting.xml：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical" >
6. <include layout="@layout/title_bar" />
7. <TextView
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:gravity="center"
11. android:text="这是设置页面"
12. android:textColor="#000000" />
13. </LinearLayout>

最后是我用的title_bar.xml文件，这个文件是嵌入到各个界面中的那个顶部的标题的布局文件，代码如下：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:background="@drawable/title_bg"
6. android:gravity="center"
7. android:orientation="vertical" >
8. <TextView
9. android:id="@+id/titleTv"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:layout_gravity="center"
13. android:gravity="center"
14. android:textColor="#ffffff"
15. android:textSize="20sp" />
16. </LinearLayout>

到这里就基本完成了！！！你会了吗?

• 上一篇Android (shape,gradient)使用总结
• 下一篇Android学习笔记（一）之仿正点闹钟时间齿轮滑动的效果