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

2015-11-10 21:09 阅读 6,322 次 评论 0 条
版权声明:本文著作权归TeachCourse所有,未经许可禁止转载,谢谢支持!
转载请注明出处:http://teachcourse.cn/709.html

一、概述

最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了DrawerLayout布局后,主页内容应该是一个Fragment类,类似QQ主页的效果,那么问题来了,如何在主页的底部添加TabHost导航的效果呢?之前使用过FragmentTabHost,在我的另一篇文章里,点击这里查看,在一个DrawerLayout里面再使用一个FragmentTabHost添加TabHost导航效果,经过测试,发觉不行,于是考虑使用RadioGroupRadioButton嵌套到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底部菜单栏

关注公众号 扫一扫二维码,加我QQ

如果文章对你有帮助,欢迎点击上方按钮关注作者

来源:TeachCourse每周一次,深入学习Android教程,关注(QQ1589359239或公众号TeachCourse)
转载请注明出处:http://teachcourse.cn/709.html

资源分享

CSDN下载
分类:Android 标签:, ,
Android Debug Bridge Android Debug Bridge
浅谈XML的封装与解析 浅谈XML的封装与解析
调试最快的Android模拟器-Genymotion常见问题 调试最快的Android模拟器-Geny
三步帮你快速集成友盟消息推送功能 三步帮你快速集成友盟消息推送功

发表评论

呲牙 憨笑 坏笑 偷笑 色 微笑 抓狂 睡觉 酷 流汗 鼓掌 大哭 可怜 疑问 晕 惊讶 得意 尴尬 发怒 奋斗 衰 骷髅 啤酒 吃饭 礼物 强 弱 握手 OK NO 勾引 拳头 差劲 爱你

表情