一、概述
最近在做一个新闻类结合社区的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布局用于展示内容 -->
- <FrameLayout
- android:id="@+id/content_frame"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/transparent" />
- <!-- 直接添加侧滑菜单的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的开与关,这里可以先查以下资料,主要代码:
- @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();// 初始化控件
- initEvents();// 添加DrawerLayout监视器事件setDrawerListener
- }
- /**
- *当程序退出的时候,保存状态
- */
- @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() {
- mDrawerLayout.closeDrawers();
- flage = false;
- }
同理,另外的ContactFragment、DynamicFragment布局一样,把src图片换了就行。
最终测试,效果图如下:
五、推荐阅读
你可能感兴趣的文章
转载请注明出处: https://www.teachcourse.cn/709.html ,谢谢支持!