完美實現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的代碼相同，所以就不另外給出了。下面附上效果圖：