完美实现tab和Fragment的联动效果

完美实现RadioGroup与Fragment的联动效果

关于RadioGroup的与Fragment的实现，在许多博客中都能看到，它的实现也很简单。我这里介绍的是如何保证Fragment的状态会被保存，而不会在加载时从新创建一个新的Fragment，其实细心的朋友可能已经发现了。在Fragment创建的时候，它要显示在当前的Activity上时，会执行它的attach方法，而在退出时会执行它的detach方法。我们都知道Fragment的管理都是借助FragmentManager来实现的，那么只要能在切换Fragment的时候我们使用attach切换到已经存在的Fragment，那么这个Fragment就不会被从新创建，当我们退出这个Fragment的时候就调用detach断开当前与Fragment的连接。废话不多说，直接上代码：

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/fragmentlayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RadioGroup
        android:id="@+id/rg_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/message_tab"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="消息" />

        <RadioButton
            android:id="@+id/contact_tab"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="联系人" />

        <RadioButton
            android:id="@+id/discover_tab"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="发现" />
    </RadioGroup>

</LinearLayout>

MainActivity.java

<pre name="code" class="java">package com.example.tabdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends FragmentActivity {
	
	RadioGroup radioGroup;
	//现在要显示的Fargment
	Fragment fragment;
	//用于记录上一个Fragment
	Fragment preFragment;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//初始化View
		initView();
	}
	private void initView() {
		radioGroup=(RadioGroup) findViewById(R.id.rg_tab);
		//添加选择事件
		radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				//替换对应的Fragment
				changeFragment(checkedId);
			}
		});
		//初始化显示的fragment数据，判断是否为空，为空加载，不为空直接显示
		FragmentTransaction transaction = getSupportFragmentManager()
				.beginTransaction();
		fragment = getSupportFragmentManager().findFragmentByTag("message");
		if (fragment == null) {
			fragment=getFragment(R.id.message_tab);
			preFragment=fragment;
			transaction.add(R.id.fragmentlayout, fragment);
		} else {
			transaction.attach(fragment);
		}
		preFragment=fragment;
		transaction.commit();
	}
	/**
	 * 根据Id获取对应的Fragment
	 * @param checkedId
	 */
	private void changeFragment(int checkedId) {
		//获取与Fragment对应的Tag
		String tag = getTag(checkedId);
		FragmentTransaction ft=getSupportFragmentManager().beginTransaction();
		if(preFragment!=null){
			ft.detach(preFragment);
		}
		//通过Tag获取与之对应的Fragment
		fragment=getSupportFragmentManager().findFragmentByTag(tag);
		if (fragment == null) {
			fragment=getFragment(checkedId);
			ft.add(R.id.fragmentlayout, fragment, tag);
		} else {
			ft.attach(fragment);
		}
		ft.commit();
		preFragment=fragment;
	}
	/**
	 * 通过id获取与之对应的Tag
	 * @param id
	 * @return
	 */
	private String getTag(int id) {
		String tag = null;
		switch (id) {
		case R.id.message_tab:
			tag = "message";
			break;
		case R.id.contact_tab:
			tag = "contact";
			break;
		case R.id.discover_tab:
			tag = "discover";
			break;
		}
		return tag;
	}
	/**
	 * 通过id获得对应的Fragment
	 * @param checkId
	 * @return
	 */
	private Fragment getFragment(int checkId){
		Fragment fragment=null;
		switch (checkId) {
		case R.id.message_tab:
			fragment=new MessageFrament();
			break;
		case R.id.contact_tab:
			fragment=new ContactFrament();
			break;
		case R.id.discover_tab:
			fragment=new DiscoverFrament();
			break;
		}
		return fragment;
	}
}

Fragment.java

public class MessageFrament extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_message, null);
	}
}

fragment_message.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" >
    
	<TextView 
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:text="消息模块"/>
</LinearLayout>

其他两个Fragment与这个Fragment的代码相同，所以就不另外给出了。下面附上效果图：