如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？

目录：

一、概述

最近在做一个新闻类结合社区的APP的时候，需要添加一个侧滑菜单的效果，考虑到可以使用DrawerLayout布局，但是问题是使用了 DrawerLayout布局后，主页内容应该是一个Fragment类，类似QQ主页的效果，那么问题来了，如何在主页的底部添加TabHost导航的 效果呢？之前使用过FragmentTabHost，在我的另一篇文章里，点击这里查看，在一个DrawerLayout里面再使用一个FragmentTabHost添加TabHost导航效果，经过测试，发觉不行，于是考虑使用RadioGroup和RadioButton嵌套到Fragment里面，加载页面的时候，我们可以通过RadioButton选项，切换对应的Fragment，效果图：
使用RadioGroup和RadioButton实现FragmentTabHost效果

使用RadioGroup和RadioButton实现FragmentTabHost效果

使用RadioGroup和RadioButton实现FragmentTabHost效果

二、认识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图片换了就行。
最终测试，效果图如下：
使用RadioGroup和RadioButton实现FragmentTabHost效果

五、参考链接

转载转自TeachCourse博客：TeachCourse博客-做最好的安卓源码分析网站

posted @ 2015-11-11 17:28  我要博客go  阅读(832)  评论(0)  编辑  收藏  举报