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

2015-11-10 21:09 阅读 11,709 次 评论 0 条

一、概述

最近在做一个新闻类结合社区的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. radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){  
  2.     @Override  
  3.     public void onCheckedChanged(RadioGroup group, int checkedId) {  
  4.            // 获取变更后的选项的ID  
  5.       int radioButtonId = group.getCheckedRadioButtonId();  
  6.         switch (radioButtonId) {  
  7.             case R.id.message_radiobtn:  
  8.                 mFragment = new MessageFragment();  
  9.             break;  
  10.             case R.id.contact_radiobtn:  
  11.                 mFragment = new ContactFragment();  
  12.             break;  
  13.             case R.id.dynamic_radiobtn:  
  14.                 mFragment = new DynamicFragment();  
  15.             break;  
  16.                 default:  
  17.             break;  
  18.         }  
  19.         getActivity().getSupportFragmentManager().beginTransaction().replace(R.id.realtabcontent, mFragment).commit();  
  20.     }  
  21. });  

OnCheckedChangeListener(RadioGroup,int)中有两个参数，RadioGroup表示当前哪个选项组，指定选项组下的选项，int表示是否选中状态。

三、自定义RadioButton

RadioButton默认状态下，前面带一个小圆点，文字在小圆点的右边，同时设置的图片也不是刚好在文字上面，而我们的TabHost导航中不需要小圆点，如何去掉小圆点并让文字居中显示，我们可以自定义一个样式，命名：tabstyle，然后我们直接在RadioButton中引用即可，如下图：

  1. <style name="tabstyle">  
  2.     <item name="android:button">@null</item>  
  3.     <item name="android:textColor">@color/nav_text_color_selec</item>  
  4.     <item name="android:gravity">center</item>  
  5. </style>  

下面是引用自定义样式的布局文件

  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. <FrameLayout  
  7.     android:id="@+id/realtabcontent"  
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="fill_parent"  
  10.     android:layout_above="@+id/main_radiogroup"  
  11.     android:layout_alignParentTop="true"/>  
  12.   
  13. <RadioGroup  
  14.     android:id="@+id/main_radiogroup"  
  15.     android:layout_width="match_parent"  
  16.     android:layout_height="wrap_content"  
  17.     android:layout_alignParentBottom="true"  
  18.     android:layout_gravity="bottom"  
  19.     android:gravity="bottom"  
  20.     android:orientation="horizontal" >  
  21.   
  22. <RadioButton  
  23.     android:id="@+id/message_radiobtn"  
  24.     android:layout_weight="1"  
  25.     android:checked="true"  
  26.     android:drawableTop="@drawable/community_main_btn"  
  27.     android:text="消息"  
  28.     style="@style/tabstyle"/>  
  29.   
  30. <RadioButton  
  31.     android:id="@+id/contact_radiobtn"  
  32.     android:layout_weight="1"  
  33.     android:drawableTop="@drawable/goverment_main_btn"  
  34.     android:text="联系人"  
  35.     style="@style/tabstyle"/>  
  36.   
  37. <RadioButton  
  38.     android:id="@+id/dynamic_radiobtn"  
  39.     android:layout_weight="1"  
  40.     android:drawableTop="@drawable/news_main_btn"  
  41.     android:text="动态"  
  42.     style="@style/tabstyle"/>  
  43.   
  44. </RadioGroup>  
  45.   
  46. </RelativeLayout>  

四、测试

1、在我的案例里面，主布局文件（activity_drawer_layout.xml）使用DrawerLayout，然后添加策划的一个Fragment，在FrameLayout中加载单选按钮选中的Fragment，如下：

  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2. xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_drawerLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     tools:context="cn.teachcourse.www.DrawerLayoutActivity" >  
  7.   
  8. <!-- FrameLayout布局用于展示内容 -->  
  9.   
  10. <FrameLayout  
  11.     android:id="@+id/content_frame"  
  12.     android:layout_width="match_parent"  
  13.     android:layout_height="match_parent"  
  14.     android:background="@android:color/transparent" />  
  15.   
  16. <!-- 直接添加侧滑菜单的MenuFragment到布局中 -->  
  17.   
  18. <fragment  
  19.     android:id="@+id/id_left_menu"  
  20.     android:name="cn.teachcourse.www.ui.main.MenuFragment"  
  21.     android:layout_width="240dp"  
  22.     android:layout_height="match_parent"  
  23.     android:layout_gravity="start"  
  24.     android:tag="LEFT" />  
  25.   
  26. </android.support.v4.widget.DrawerLayout>  

2、下面开始介绍Activity的编程，在主Activity中还算是比较简单，加载activity_drawer_layout.xml布局文件，然后获取DrawerLayout控件，控制策滑Fragment的开与关，这里可以先查以下资料，主要代码：

  1. @Override  
  2. protected void onCreate(Bundle savedInstanceState) {  
  3.     super.onCreate(savedInstanceState);  
  4.     setContentView(R.layout.activity_drawer_layout);  
  5.     // 从保存中状态中获取实例化的Fragment对象  
  6.     if (savedInstanceState != null) {  
  7.         mContent = (Fragment) getSupportFragmentManager().getFragment(  
  8.         savedInstanceState, "mContent");  
  9.     }  
  10.   
  11.     if (mContent == null) {  
  12.         mContent = new ContentFragment();  
  13.         mFragment=new MainTabHostActivity();  
  14.   
  15.     }  
  16.     // 开启事务，替换，提交  
  17.     getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, mContent).commit();  
  18.     initView();// 初始化控件  
  19.     initEvents();// 添加DrawerLayout监视器事件setDrawerListener  
  20. }  
  21. /** 
  22.  *当程序退出的时候，保存状态 
  23.  */  
  24. @Override  
  25. public void onSaveInstanceState(Bundle outState) {  
  26.     super.onSaveInstanceState(outState);  
  27.     getSupportFragmentManager().putFragment(outState, "mContent", mContent);  
  28. }  
  29.   
  30. /** 
  31.  *开启菜单 
  32.  */  
  33. public void openMenu() {  
  34.     flage = true;  
  35.     mDrawerLayout.openDrawer(Gravity.LEFT);  
  36.     mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.RIGHT);  
  37.   
  38. }  
  39.   
  40. /** 
  41.  *关闭菜单 
  42.  */  
  43. public void closeMenu() {  
  44.     mDrawerLayout.closeDrawers();  
  45.     flage = false;  
  46. }  

同理，另外的ContactFragment、DynamicFragment布局一样，把src图片换了就行。
最终测试，效果图如下：
使用RadioGroup和RadioButton实现FragmentTabHost效果

五、推荐阅读

《Fragment+FragmentTabHost实现仿QQ底部菜单栏》

你可能感兴趣的文章

来源：TeachCourse， 每周一次，深入学习Android教程，关注（QQ158#9359$239或公众号TeachCourse）
转载请注明出处： https://www.teachcourse.cn/709.html ，谢谢支持！

资源分享

CSDN下载
分类：Android 标签：, ,
Android系统搜索框架实战：提示最近查询内容 Android系统搜索框架实战：提示
项目中提示“AndroidManifest.xml file missing”解决办法 项目中提示“AndroidManifest.
Android开发之枚举（Enum）在实际项目中的应用 Android开发之枚举（Enum）在实
如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？ 如何使用RadioGroup和RadioB