目录：
一、概述
最近在做一个新闻类结合社区的APP的时候，需要添加一个侧滑菜单的效果，考虑到可以使用DrawerLayout布局，但是问题是使用了 DrawerLayout布局后，主页内容应该是一个Fragment类，类似QQ主页的效果，那么问题来了，如何在主页的底部添加TabHost导航的 效果呢？之前使用过FragmentTabHost，在我的另一篇文章里，点击这里查看，在一个DrawerLayout里面再使用一个FragmentTabHost添加TabHost导航效果，经过测试，发觉不行，于是考虑使用RadioGroup和RadioButton嵌套到Fragment里面，加载页面的时候，我们可以通过RadioButton选项，切换对应的Fragment，效果图：
二、认识RadioGroup和RadioButton
RadioButton在做表单的时候经常用到，在安卓开发中，RadioButton需要和RadioGroup一起使用，表示在一组可选项中， 只有一个可以被选中，RadioGroup状态改变的一个监视器OnCheckedChangeListener，RadioGroup使用的时候调用 setOnCheckedChangeListener()，然后重写OnCheckedChangeListener中的 onCheckedChanged()方法，比如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // 获取变更后的选项的ID int radioButtonId = group.getCheckedRadioButtonId(); switch (radioButtonId) { case R.id.message_radiobtn: mFragment = new MessageFragment(); break; case R.id.contact_radiobtn: mFragment = new ContactFragment(); break; case R.id.dynamic_radiobtn: mFragment = new DynamicFragment(); break; default: break; } getActivity().getSupportFragmentManager().beginTransaction() .replace(R.id.realtabcontent, mFragment).commit(); }}); |
OnCheckedChangeListener(RadioGroup,int)中有两个参数，RadioGroup表示当前哪个选项组，指定选项组下的选项，int表示是否选中状态。
三、自定义RadioButton
RadioButton默认状态下，前面带一个小圆点，文字在小圆点的右边，同时设置的图片也不是刚好在文字上面，而我们的TabHost导航中不 需要小圆点，如何去掉小圆点并让文字居中显示，我们可以自定义一个样式，命名：tabstyle，然后我们直接在RadioButton中引用即可，如下 图：
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<style name="tabstyle"> <item name="android:button">@null</item> <item name="android:textColor">@color/nav_text_color_selec</item> <item name="android:gravity">center</item> </style><!--下面是引用自定义样式的布局文件--><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:id="@+id/realtabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/main_radiogroup" android:layout_alignParentTop="true"/> <RadioGroup android:id="@+id/main_radiogroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:gravity="bottom" android:orientation="horizontal" > <RadioButton android:id="@+id/message_radiobtn" android:layout_weight="1" android:checked="true" android:drawableTop="@drawable/community_main_btn" android:text="消息" style="@style/tabstyle"/> <RadioButton android:id="@+id/contact_radiobtn" android:layout_weight="1" android:drawableTop="@drawable/goverment_main_btn" android:text="联系人" style="@style/tabstyle"/> <RadioButton android:id="@+id/dynamic_radiobtn" android:layout_weight="1" android:drawableTop="@drawable/news_main_btn" android:text="动态" style="@style/tabstyle"/> </RadioGroup></RelativeLayout> |
四、测试
1、在我的案例里面，主布局文件（activity_drawer_layout.xml）使用DrawerLayout，然后添加策划的一个Fragment，在FrameLayout中加载单选按钮选中的Fragment，如下：
|
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
|
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/id_drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="cn.teachcourse.www.DrawerLayoutActivity" > <!-- FrameLayout布局用于展示内容 --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" > </FrameLayout> <!-- 直接添加侧滑菜单的MenuFragment到布局中 --> <fragment android:id="@+id/id_left_menu" android:name="cn.teachcourse.www.ui.main.MenuFragment" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:tag="LEFT" /></android.support.v4.widget.DrawerLayout> |
2、下面开始介绍Activity的编程，在主Activity中还算是比较简单，加载activity_drawer_layout.xml布局文件，然后获取DrawerLayout控件，控制策滑Fragment的开与关，这里可以先查以下资料，主要代码：
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drawer_layout); // 从保存中状态中获取实例化的Fragment对象 if (savedInstanceState != null) { mContent = (Fragment) getSupportFragmentManager().getFragment( savedInstanceState, "mContent"); } if (mContent == null) { mContent = new ContentFragment(); mFragment=new MainTabHostActivity(); } // 开启事务，替换，提交 getSupportFragmentManager().beginTransaction() .replace(R.id.content_frame, mContent).commit(); // 初始化控件 initView(); // 添加DrawerLayout监视器事件setDrawerListener initEvents(); } // 当程序退出的时候，保存状态 @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); getSupportFragmentManager().putFragment(outState, "mContent", mContent); } // 开启菜单 public void openMenu() { flage = true; mDrawerLayout.openDrawer(Gravity.LEFT); mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT); } // 关闭菜单 public void closeMenu() { // TODO Auto-generated method stub mDrawerLayout.closeDrawers(); flage = false; } |
3、在单选项中，我们定义了三个Fragment，分别为：MessageFragment，ContactFragment和DynamicFragment，在三个Fragment中都放置一个ImageView控件，设置一张图片效果演示，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!--message_fragment.xml--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" ><ImageView android:src="@drawable/qq_message" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"/></LinearLayout> |
同理，另外的ContactFragment、DynamicFragment布局一样，把src图片换了就行。
最终测试，效果图如下：
五、参考链接
转载转自TeachCourse博客：TeachCourse博客-做最好的安卓源码分析网站