最近在做一个新闻类结合社区的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()方法，比如：

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中引用即可，如下
图：

<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，如下：

<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

android:id="@+id/content_frame"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/transparent" >

</FrameLayout>

<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的开与关，这里可以先查以下资料，主要代码：

@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控件，设置一张图片效果演示，如下：

<?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博客-做最好的安卓源码分析网站