RadioGroup+Fragment实现Tab切换

第一次写博客 激动啊 - -!

话不多说了，直接上代码：

HomeActivity代码：

package com.example.lenovo.bottomtab;

import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.Window;
import android.widget.RadioGroup;

public class HomeActivity extends FragmentActivity{
private FragmentManager manager;
private FragmentTransaction transaction;
private RadioGroup radioGroup;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
manager = getSupportFragmentManager();
/**
* 设置每个RadioButton的监听事件，然后切换对应的Fragment
*/
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
//开启事务
transaction = manager.beginTransaction();
switch (i) {
case R.id.weixin:
transaction.replace(R.id.content, new WeixinFragment());
break;
case R.id.tongxunlu:
transaction.replace(R.id.content, new TongxunluFragment());
break;
case R.id.friendcircle:
transaction.replace(R.id.content, new FriendFragment());
break;
case R.id.setting:
transaction.replace(R.id.content, new SettingFragment());
break;
}
//事务提交
transaction.commit();
}
});
}

/**
* 一进入主页的时候，自动加载第一页tab
*/
@Override
protected void onResume() {
super.onResume();
weixin.setChecked(true);
}
}

接下来是四个Tab选项（在这就写一个，剩下3个大同小异）

public class WeixinFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_weixin,null);
}
}

首页xml(顶部和底部事先写好 ，然后直接include即可,中部是一个FrameLayout占位，然后transaction.replace()替换即可)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".HomeActivity">
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000"
android:layout_marginBottom="5dp"/>
<include layout="@layout/bottom"></include>
</LinearLayout>

这是顶部的ActionBar：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="微信"
android:textSize="20sp"
android:gravity="center_horizontal"
android:textStyle="bold"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textColor="#ffffff"
android:background="#969696"/>
</LinearLayout>

这是底部的RadioGroup

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/weixin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp"
android:textColor="@color/ziti_color"
android:drawableTop="@drawable/weixin_selctor"
android:gravity="center_horizontal"
android:button="@null"
android:text="微信"/>
<RadioButton
android:id="@+id/tongxunlu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp"
android:textColor="@color/ziti_color"
android:drawableTop="@drawable/address_selctor"
android:gravity="center_horizontal"
android:button="@null"
android:text="通讯录"/>
<RadioButton
android:id="@+id/friendcircle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp"
android:textColor="@color/ziti_color"
android:drawableTop="@drawable/find_selctor"
android:gravity="center_horizontal"
android:button="@null"
android:text="朋友圈"/>
<RadioButton
android:id="@+id/setting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp"
android:textColor="@color/ziti_color"
android:drawableTop="@drawable/setting_selctor"
android:gravity="center_horizontal"
android:button="@null"
android:text="设置"/>
</RadioGroup>
</LinearLayout>

PS：RadioButton图片跟字体颜色需单独设置selector，代码如下

图片selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed"></item>
<item android:drawable="@drawable/tab_weixin_normal"></item>
</selector>

字体颜色selector（在res资源目录里创建一个color的文件夹，然后里面创建字体颜色的selector即可）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#00ff00" android:state_checked="true"></item>
<item android:color="#969696"></item>
</selector>

————————————————————————————————————————————————————————————————

补充：在实际开发的时候，有时候需要进行tab选项状态的保存或者特殊需求，用replace就不合适了，毕竟反复的createView也会浪费流量啥的，因为每次都会去重新CreateView，此时用hide和show的方法就比较合适了。只是单纯的隐藏和显示，而并没有DestroyView。

RadioGroup的点击事件的代码就是这样写了：

rg_tab.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
mTransaction = getFragmentManager().beginTransaction();
if(fragment_shouye!=null){
mTransaction.hide(fragment_shouye);
}
if(fragment_washer!=null){
mTransaction.hide(fragment_washer);
}
if(fragment_recharge!=null){
mTransaction.hide(fragment_recharge);
}
if(fragment_my!=null){
mTransaction.hide(fragment_my);
}
switch (checkedId){
case R.id.shouye:
if(fragment_shouye==null){
fragment_shouye = new ShouYeFragment();
mTransaction.add(R.id.content_fragment,fragment_shouye,"shouye");
}else {
mTransaction.show(fragment_shouye);
}
SharedPreferencesUtil.put(HomeActivity.this,"value",1);
break;
case R.id.washer:
if(fragment_washer==null){
fragment_washer = new WasherFragment();
mTransaction.add(R.id.content_fragment,fragment_washer,"washer");
}else {
mTransaction.show(fragment_washer);
}
SharedPreferencesUtil.put(HomeActivity.this,"value",2);
break;
case R.id.recharge:
if(fragment_recharge==null){
fragment_recharge = new RechargeFragment();
mTransaction.add(R.id.content_fragment,fragment_recharge,"recharge");
}else {
mTransaction.show(fragment_recharge);
}
SharedPreferencesUtil.put(HomeActivity.this,"value",3);
break;
case R.id.my:
if(fragment_my==null){
fragment_my = new MyFragment();
mTransaction.add(R.id.content_fragment,fragment_my,"my");
}else {
mTransaction.show(fragment_my);
}
SharedPreferencesUtil.put(HomeActivity.this,"value",4);
break;
}
mTransaction.commit();
}
});

/**
* 一进入主页的时候，自动加载首页tab
*/
@Override
protected void onStart() {
super.onStart();
int index  = (int) SPUtil.get(this,"value",0);
switch (index){
case 1:
rg_tab.check(R.id.shouye);
break;
case 2:
rg_tab.check(R.id.washer);
break;
case 3:
rg_tab.check(R.id.recharge);
break;
case 4:
rg_tab.check(R.id.my);
break;
}
}

但是，有时会出现Fragment重叠的现象，原因是什么，网上说明很多，不做说明，解决办法使用最多的也是2种，也不多说。我使用的这种：

@Override
protected void onSaveInstanceState(Bundle outState) {
//        super.onSaveInstanceState(outState);
}

PS：

1、在Fragment的切换之间，只有在第一次切换到一个Fragment的时候，会走一次生命周期，以后再切换回来的时候，是不会走任何生命周期的，但是从其他地方（比如别的Activity）退出到Fragment的时候，是会走onResume的，所以，如果需要执行相应的代码逻辑的时候，就可以写在onResume方法里了。

2、在单纯的Fragment切换之间，虽然不走生命周期，但是会走下面这个方法：

@Override
public void onHiddenChanged(boolean hidden) {
super.onHiddenChanged(hidden);
if(hidden){
//相当于Fragment的onPause()了
}else{
//刷新数据
}
}

相应的逻辑代码就可以写在这了。