天天看點
傳回

Android開發筆記（一百三十九）可定制可滑動的标簽欄個性化定制标簽頁左右滑動切換标簽頁

App在頁面底部展現标簽欄導航的效果，有多種實作方式，包括TabActivity方式、ActivityGroup方式、FragmentActivity方式等等，具體的實作方案參見之前的博文《Android開發筆記（十九）底部标簽欄》。

一般情況下這種底部标簽欄能夠滿足大部分的業務需求，然而有時客戶的口味比較獨特，固定的幾款套餐已經不能滿足她的胃口了。比如客戶要求做成自助餐形式，同時長條的固定餐台也要換成可以滑動的餐台，因為固定餐台還得客戶左右移步才能夾菜，可滑動的餐台就無需客戶再走來走去。那麼對應到底部标簽欄這裡，便是要求标簽頁的個數允許定制，并且每個頁面除了可以通過标簽頁的點選操作進行切換之外，也允許通過左右滑動來切換。

個性化定制标簽頁

對于個性化定制标簽頁的情況，因為TabActivity方式和ActivityGroup方式必須在布局檔案中指定具體的标簽頁，無法在代碼裡動态生成，這意味着它們兩個無法勝任個性化定制的擔當。剩下的FragmentActivity方式，在布局檔案中隻需聲明一個FragmentTabHost，然後在代碼中為該Host控件調用addTab方法逐個添加标簽頁，是以正好用來個性化定制标簽頁。

作為鋪墊，要先熟悉一下FragmentTabHost的相關方法說明：

setup : 在指定架構布局上設立标簽具體頁面。

newTabSpec : 建立并傳回一個包含具體标記的标簽規格。

addTab : 添加一個标簽頁。第一個參數是标簽規格，第二個參數是标簽頁面的Fragment類，第三個參數是要傳遞給Fragment的包裹。

setCurrentTab : 設定目前顯示哪一個标簽頁。

getCurrentTab : 擷取目前顯示的是哪一個标簽頁。

clearAllTabs : 清除所有的标簽頁。

然後再來考慮個性化定制的具體實作步驟，分步如下：

1、在一個配置頁面勾選需要顯示的标簽頁，并将勾選結果儲存在共享參數SharedPreferences中。

2、從配置頁面傳回到FragmentActivity時，首頁面要從共享參數中讀取最新的标簽頁清單，并構造最新的标簽欄。

3、因為重新構造标簽欄時，預設顯示第一個标簽的Fragment頁，而不是最近一次傳回的Fragment頁；是以要在每次進入Fragment頁時都把該Fragment儲存到全局記憶體，這樣重新建構标簽欄時，才能指定目前要顯示哪個Fragment。

下面是個性化定制标簽頁的效果圖：

Android開發筆記（一百三十九）可定制可滑動的标簽欄個性化定制标簽頁左右滑動切換标簽頁

下面是首頁面的布局檔案内容，跟固定标簽欄的布局是一樣的：

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

	<!-- 
		把FragmentLayout放在FragmentTabHost上面，标簽頁就在頁面底部；
		反之FragmentLayout在FragmentTabHost下面，标簽頁就在頁面頂部。
	-->  
	<FrameLayout
		android:id="@+id/realtabcontent"
		android:layout_width="match_parent"
		android:layout_height="0dp"
		android:layout_weight="1" />

	<android.support.v4.app.FragmentTabHost
		android:id="@android:id/tabhost"
		android:layout_width="match_parent"
		android:layout_height="@dimen/tabbar_height" >
		 
		 <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
	    
	</android.support.v4.app.FragmentTabHost>

</LinearLayout>

複制

下面是個性化定制時的首頁面代碼：

public class TabCustomActivity extends FragmentActivity {
	private static final String TAG = "TabCustomActivity";
	private FragmentTabHost mTabHost;
	private Bundle mBundle = new Bundle();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab_custom);
		mBundle.putString("tag", TAG);
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
	}

	@Override
	protected void onResume() {
		mTabHost.clearAllTabs();
		Log.d(TAG, "TabName=" + MainApplication.getInstance().TabCreateName);
		int tabPos = 0;
		// addTab(标題，跳轉的Fragment，傳遞參數的Bundle)
		String tabInfo = TabUtil.readTabInfo(this);
		for (int i = 0, j = 0; i < tabInfo.length(); i++) {
			if (tabInfo.substring(i, i + 1).equals("1")) {
				mTabHost.addTab(getTabView(TabUtil.TabNameArray[i],
						TabUtil.TabSelectorArray[i]), TabUtil.TabClassArray[i], mBundle);
				if (MainApplication.getInstance().TabCreateName.equals(TabUtil.TabClassArray[i].getName())) {
					tabPos = j;
				}
				j++;
			}
		}
		mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
		mTabHost.setCurrentTab(tabPos);
		super.onResume();
	}
	
	private TabSpec getTabView(int textId, int imgId) {
		String text = getResources().getString(textId);
		Drawable drawable = getResources().getDrawable(imgId);
		//必須設定圖檔大小，否則不顯示
		drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
		View item_tabbar = getLayoutInflater().inflate(R.layout.item_tabbar, null);
		TextView tv_item = (TextView) item_tabbar.findViewById(R.id.tv_item_tabbar);
		tv_item.setText(text);
		tv_item.setCompoundDrawables(null, drawable, null, null);
		TabSpec spec = mTabHost.newTabSpec(text).setIndicator(item_tabbar);
		return spec;
	}
	
}

複制

左右滑動切換标簽頁

左右滑動切換頁面，很容易想到使用ViewPager，而且确實是可行的。既然使用ViewPager做為标簽内容頁的載體，那麼首頁面的布局檔案就把FrameLayout節點換成android.support.v4.view.ViewPager，具體布局如下所示：

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

	<android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

	<android.support.v4.app.FragmentTabHost
		android:id="@android:id/tabhost"
		android:layout_width="match_parent"
		android:layout_height="50dp">
		 
		 <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
	    
	</android.support.v4.app.FragmentTabHost>

</LinearLayout>

複制

接下來，還要在首頁面代碼中給ViewPager補充幾個碎片内容頁的擴充卡。因為ViewPager和FragmentTabHost二者之間不是天生一對（ViewPager和PagerTabStrip才是鴛鴦配），而是我們把它倆個強行拉郎配，是以标簽頁面的切換動作無法自動完成，隻能開發者手工替它們包辦了。具體地說，就是分别給它倆個注冊頁面切換監聽器，并設定頁面切換需要處理的事務，詳述如下：

1、對于ViewPager來說，需要實作OnPageChangeListener監聽器，一旦監聽到頁面滑動，就在onPageSelected方法中指定FragmentTabHost的目前頁，即調用FragmentTabHost對象的setCurrentTab方法；

2、對于FragmentTabHost來說，需要實作OnTabChangeListener監聽器，一旦監聽到頁面切換，就在onTabChanged方法中指定ViewPager的目前頁，即調用ViewPager對象的setCurrentItem方法；

折騰一番，改造後的首頁面代碼如下所示：

public class TabSlidingActivity extends FragmentActivity implements 
		OnTabChangeListener, OnPageChangeListener {
	private static final String TAG = "TabSlidingActivity";
	private FragmentTabHost mTabHost;
	private Bundle mBundle = new Bundle();
	private ViewPager vp_main;
	private ArrayList<String> mNameArray = new ArrayList<String>();
	private ArrayList<Fragment> mTabList = new ArrayList<Fragment>();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_tab_sliding);
		mBundle.putString("tag", TAG);
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
       	mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
       	vp_main = (ViewPager) findViewById(R.id.vp_main);
	}

	@Override
	protected void onResume() {
		mNameArray.clear();
		mTabList.clear();
		mTabHost.clearAllTabs();
		Log.d(TAG, "TabName="+MainApplication.getInstance().TabPagerName);
		int tabPos = 0;
		//addTab(标題，跳轉的Fragment，傳遞參數的Bundle)
       	String tabInfo = TabUtil.readTabInfo(this);
       	for (int i=0, j=0; i<tabInfo.length(); i++) {
       		if (tabInfo.substring(i, i+1).equals("1")) {
       			mTabHost.addTab(getTabView(TabUtil.TabNameArray[i], TabUtil.TabSelectorArray[i]), 
       					TabUtil.TabClassArray[i], mBundle);
       			if (MainApplication.getInstance().TabPagerName.equals(TabUtil.TabClassArray[i].getName())) {
       				tabPos = j;
       			}
       			j++;
       			mTabList.add(Fragment.instantiate(this, TabUtil.TabClassArray[i].getName()));
       		}
       	}
		mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
		mTabHost.setOnTabChangedListener(this);
		
		vp_main.setAdapter(new MainTabAdapter(getSupportFragmentManager(), mTabList, mBundle));
		vp_main.addOnPageChangeListener(this);
		vp_main.setCurrentItem(tabPos);
		super.onResume();
	}
	
	private TabSpec getTabView(int textId, int imgId) {
		String text = getResources().getString(textId);
		mNameArray.add(text);  //滑動頁面需要添加這行
		Drawable drawable = getResources().getDrawable(imgId);
		//必須設定圖檔大小，否則不顯示
		drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
		View item_tabbar = getLayoutInflater().inflate(R.layout.item_tabbar, null);
		TextView tv_item = (TextView) item_tabbar.findViewById(R.id.tv_item_tabbar);
		tv_item.setText(text);
		tv_item.setCompoundDrawables(null, drawable, null, null);
		TabSpec spec = mTabHost.newTabSpec(text).setIndicator(item_tabbar);
		return spec;
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	@Override
	public void onPageSelected(int arg0) {
		if (mTabHost.getCurrentTab() != arg0) {
			mTabHost.setCurrentTab(arg0);
		}
	}

	@Override
	public void onTabChanged(String tabId) {
		int position = mNameArray.indexOf(tabId);
		if (vp_main.getCurrentItem() != position) {
			vp_main.setCurrentItem(position);
		}
	}

}

複制

下面是個即可點選标簽切換，也可左右滑動切換的截圖：

Android開發筆記（一百三十九）可定制可滑動的标簽欄個性化定制标簽頁左右滑動切換标簽頁

如果你以為左右滑動切換标簽頁就此完成的話，那可大錯特錯了。自古包辦婚姻多不幸，ViewPager和FragmentTabHost也不例外，問題出在首頁面的下面這行代碼：

mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

複制

這句代碼把标簽内容頁建造在了編号為android.R.id.tabcontent的視圖上，也就是布局檔案中寬度和高度都是0dp的架構布局。這麼做是為了隐藏FragmentTabHost的原配，然後讓ViewPager出來抛頭露面。然而原配的Fragment隻是外面看不到罷了，私底下要做的事一個都不落下。如果隻是界面上的控件，反正使用者也看不到原配，她長什麼模樣自然也無人知曉，可你若是來個夫唱婦随的橋段，原配與ViewPager一齊放聲歌唱，那豈不是在使用者面前露餡了？以App的界面行為舉例，如果開發者在Fragment内部的onCreateView方法彈出一個提示對話框，勢必會同時顯示兩個對話框，這就亂套了。

是以，像彈出對話框這種事務，必須控制隻有ViewPager才能做；除此之外，倘若Fragment要執行分線程操作、背景服務等等額外工作，好比織毛衣縫被子什麼的，那原配最好也不要做了，一律由ViewPager來做。是以，Fragment内部需要區分自己是FragmentTabHost的原配，還是ViewPager派來的，隻有ViewPager來源的才允許做事情。區分兩種來源倒也不難，通過重寫setUserVisibleHint方法即可，因為ViewPager來源的Fragment在每次呈現界面時都會調用setUserVisibleHint方法，而FragmentTabHost的原配無論何時都不會調用setUserVisibleHint方法。

下面是個彈出對話框的Fragment代碼，其中對兩種來源作了區分：

public class TabFirstFragment extends Fragment {
	protected View mView;
	protected Context mContext;
	private String mTitle;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mContext = getActivity();
		mView = inflater.inflate(R.layout.fragment_tab_first, container, false);
		mTitle = mContext.getResources().getString(R.string.menu_first);
		MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();
		return mView;
	}

	@Override
	public void setUserVisibleHint(boolean isVisibleToUser) {
		super.setUserVisibleHint(isVisibleToUser);
		//隻在ViewPager中顯示提示對話框
		if (isVisibleToUser) {
			MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();
			AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
			builder.setTitle(mTitle).setMessage("提示資訊")
				.setNegativeButton("取消", null);
			builder.create().show();
		}
	}

}

複制

但是實際運作時發現偶爾會閃退，日志報錯java.lang.NullPointerException，原因是建構對話框時發現mContext為空。既然如此，那就補充mContext是否為空的判斷好了，隻有mContext非空時才顯示對話框，修改後的Fragment代碼如下所示：

public class TabFirstFragment extends Fragment {
	protected View mView;
	protected Context mContext;
	private String mTitle;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mContext = getActivity();
		mView = inflater.inflate(R.layout.fragment_tab_first, container, false);
		mTitle = mContext.getResources().getString(R.string.menu_first);
		MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();
		return mView;
	}

	@Override
	public void setUserVisibleHint(boolean isVisibleToUser) {
		super.setUserVisibleHint(isVisibleToUser);
		//隻在ViewPager中顯示提示對話框
		if (isVisibleToUser) {
			MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();
			//mContext可能為空，原因是首次打開時，setUserVisibleHint在onCreateView之前
			if (mContext != null) {
				AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
				builder.setTitle(mTitle).setMessage("提示資訊")
					.setNegativeButton("取消", null);
				builder.create().show();
			}
		}
	}

}

複制

改完代碼再次運作，這下不會閃退了。然而又有新問題出現，就是第一次打開該頁面時，總是沒有彈出對話框；隻有當使用者切換到其它标簽頁，再切回該頁面時，才會顯示對話框。究其原因，是setUserVisibleHint造成的。平常使用者點開某個标簽頁，該标簽頁的setUserVisibleHint便被調用；可是第一次打開标簽首頁面時，預設顯示第一個标簽頁，此時标簽頁的生命周期為onAttach->setUserVisibleHint->onCreateView，顯然開發者在setUserVisibleHint方法中彈窗時，App還沒來得及在onCreateView方法中給mContext指派；是以要想正常使用setUserVisibleHint，必須在一開始的onAttach方法中就要對mContext指派。

修改後的Fragment代碼如下所示，現在标簽頁面的對話框可以正常工作了吧：

public class TabFirstFragment extends Fragment {
	protected View mView;
	protected Context mContext;
	private String mTitle;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mContext = getActivity();
		mView = inflater.inflate(R.layout.fragment_tab_first, container, false);
		mTitle = mContext.getResources().getString(R.string.menu_first);
		MainApplication.getInstance().TabCreateName = TabFirstFragment.class.getName();
		return mView;
	}

	@Override
	public void setUserVisibleHint(boolean isVisibleToUser) {
		super.setUserVisibleHint(isVisibleToUser);
		//隻在ViewPager中顯示提示對話框
		if (isVisibleToUser) {
			MainApplication.getInstance().TabPagerName = TabFirstFragment.class.getName();
			//mContext可能為空，原因是首次打開時，setUserVisibleHint在onCreateView之前
			if (mContext != null) {
				AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
				builder.setTitle(mTitle).setMessage("提示資訊")
					.setNegativeButton("取消", null);
				builder.create().show();
			}
		}
	}

	@Override
	public void onAttach(Context context) {
		//初始生命周期流程為onAttach->setUserVisibleHint->onCreateView
		mContext = context;
		mTitle = mContext.getResources().getString(R.string.menu_first);
		super.onAttach(context);
	}
	
}

複制

點選下載下傳本文用到的可定制可滑動标簽欄的工程代碼

點此檢視Android開發筆記的完整目錄

上一篇: Android開發筆記（一百零四）消息推送SDK推送的內建極光推送個推
下一篇: Android開發筆記（一百零三）地圖與定位SDK內建地圖SDK顯示地圖和定位POI搜尋測距、測面積