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

目录：

一、概述

最近在做一个新闻类结合社区的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博客-做最好的安卓源码分析网站

转载于:https://www.cnblogs.com/dazhao/p/4956592.html