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