1. 程式人生 > >用Fragment製作的Tab頁面產生的UI重疊問題

用Fragment製作的Tab頁面產生的UI重疊問題

在用Fragment做Tab頁面,發現有時候進入應用會同時顯示多個Tab內容,UI發生重疊。

直接back鍵退出應用再進入時,則沒有出現該問題。

後面才知道,當應用被強行關閉後(通過手機管家軟體手動強關,或系統為節省記憶體自動關閉應用),再次進入應用時,每次都有這現象。

如下圖:

頁面1:

頁面3:


強關應用後進入應用,發生頁面重疊:


該介面有一個Activity,三個Tab對應有三個Fragment, 第一次進入應用時,根據選擇的tab分別建立對應的Fragment,之後每次選擇頁面時隱藏其他tab內容

Activity程式碼:

public class TestFragmentTab extends FragmentActivity {
	
	private static final String TAG = "TestFragmentTab";
	
	private int tabIds[] = new int[]{
			R.id.home_tab_main,
			R.id.home_tab_search,
			R.id.home_tab_category,
	};
	
	private FragmentTab1 mTab1;
	private FragmentTab2 mTab2;
	private FragmentTab3 mTab3;

	@Override
	public void onAttachFragment(Fragment fragment) {
		// TODO Auto-generated method stub
		super.onAttachFragment(fragment);
		Log.d(TAG,"onAttachFragment");
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
		Log.d(TAG,"onDestroy");
	}

	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		super.onPause();
		Log.d(TAG,"onPause");
	}

	@Override
	protected void onResume() {
		// TODO Auto-generated method stub
		super.onResume();
		Log.d(TAG,"onResume");
	}

	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
		Log.d(TAG,"onStart");
	}

	@Override
	protected void onStop() {
		// TODO Auto-generated method stub
		super.onStop();
		Log.d(TAG,"onStop");
	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		Log.d(TAG,"onCreate");
		setContentView(R.layout.layout_test_fragment_tab);
		
		RadioGroup tabButtonGroup = (RadioGroup) findViewById(R.id.bottom_bar);
		tabButtonGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				for (int i = 0; i < tabIds.length; i++) {
					if (tabIds[i] == checkedId) {
						setSelection(i);
						break;
					}
				}
			}
		});
		
		setSelection(0);
	}
	
	private void setSelection(int position){
		
		FragmentManager fm = getSupportFragmentManager();
		FragmentTransaction ft = fm.beginTransaction();
		hideAllFragments(ft);
		
		switch (position) {
		case 0:
			if (mTab1 == null) {
				mTab1 = new FragmentTab1();
				ft.add(R.id.content, mTab1);
			}else {
				ft.show(mTab1);
			}
			break;
			
		case 1:
			if (mTab2 == null) {
				mTab2 = new FragmentTab2();
				ft.add(R.id.content, mTab2);
			}else {
				ft.show(mTab2);
			}
			break;
			
		case 2:
			if (mTab3 == null) {
				mTab3 = new FragmentTab3();
				ft.add(R.id.content, mTab3);
			}else {
				ft.show(mTab3);
			}
			break;

		default:
			break;
		}
		
		ft.commit();
	}
	
	private void hideAllFragments(FragmentTransaction ft){
		if (mTab1 != null) {
			ft.hide(mTab1);
		}
		
		if (mTab2 != null) {
			ft.hide(mTab2);
		}
		
		if (mTab3 != null) {
			ft.hide(mTab3);
		}
	}

}


通過分析發現,正常back鍵退出應用時,Activity及Fragment物件會被銷燬,因此再次進入時會在切換到Tab時建立對應的Fragment物件。

但是當強行關閉應用後,Activity雖然被回收,但Fragment物件仍然保持,再次進入應用時,系統會分別呼叫Fragment的onAttach方法將其附加到Activity上,

02-08 12:41:24.107: D/FragmentTab1(7032): onAttach

02-08 12:41:24.107: D/FragmentTab3(7032): onAttach

這裡對應的就是強行關閉應用前的fragment物件,

後面會分別呼叫兩個fragment的onCreateView方法,因此這兩個Fragment對應的View層次結構都會加到Activity的View層次中。

雖然setSelection方法會把所有fragment先隱藏再顯示選中的物件,但由於此時Activity中Fragment物件的成員變數還未初始化,因此會再次例項化fragment物件,

之後add、show及hide的都是在第二次建立的物件上操作的,而之前被保持的fragment物件的檢視層次已經反映到Activity檢視中並且不會被hide,因此發生了上述重疊現象。

解決方法:

在Activity的onAttachFragment方法中,有一個fragment引數,它就是onAttach方法對應的Fragment物件,

通過判斷這個fragment物件,如果屬於我們的FragmentTabX類並且該類還未被例項化過,則將Activity的成員變數mFragmentTabX指向該fragment物件,這樣就可以在原來的fragment物件上操作add/show/hide,因此不會有重疊現象

@Override
	public void onAttachFragment(Fragment fragment) {
		// TODO Auto-generated method stub
		super.onAttachFragment(fragment);
		Log.d(TAG,"onAttachFragment");
		
		if (mTab1 == null && fragment instanceof FragmentTab1) {
			mTab1 = (FragmentTab1)fragment;
		}else if (mTab2 == null && fragment instanceof FragmentTab2) {
			mTab2 = (FragmentTab2)fragment;
		}else if (mTab3 == null && fragment instanceof FragmentTab3) {
			mTab3 = (FragmentTab3)fragment;
		}
	}


通過以上也可知,某些情況當系統需要將Activity回收以便節省記憶體時,Activity內部保持的fragment不會被銷燬,可用於儲存/恢復資料。