ViewPager與android.support.design.widget.TabLayout雙向互動關聯切換



ViewPager與android.support.design.widget.TabLayout雙向互動關聯切換

注意：本文是在上一篇文章的基礎上寫的：《Android L、M擴充支援包design中widget：TabLayout （文章連結位址：

http://blog.csdn.net/zhangphil/article/details/48859961

）》。本文所涉及到内容非常依賴上一篇文章的技術點。

通常，android.support.design.widget.TabLayout與Android的ViewPager聯合使用，實作與ViewPager的切換與關聯。

（1）比如，當使用者手指觸摸選擇TabLayout中的某一項時候，ViewPager應當自動切換跳轉到相應的Page頁面；

（2）同樣，當使用者在翻動ViewPager時候，TabLayout也會自動的滾動到與目前ViewPager頁面像對應的子item tab并使該子item tab處于選中狀态。

（1）（2）所要求的需求如圖所示：

現在給出代碼示例，說明如何實作（1）（2）的設計需求。

測試用的主Activity MainActivity.java ：

package zhangphil.tablayout;

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends Activity {

	private final int COUNT = 10;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);

		// for (int i = 0; i < COUNT; i++) {
		// TabLayout.Tab tab = tabLayout.newTab();
		// tab.setText("頁籤槽" + i);
		// tab.setIcon(R.drawable.ic_launcher);
		// tabLayout.addTab(tab);
		// }

		tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

		ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
		viewPager.setAdapter(new MyViewPagerAdapter(this));

		// TabLayout和ViewPager雙向、互動關聯。
		tabLayout.setupWithViewPager(viewPager);
		/*
		 * 以下注釋掉的代碼要實作的功能和 tabLayout.setupWithViewPager(viewPager)類似
		 * 
		 * tabLayout.setOnTabSelectedListener(new
		 * TabLayout.OnTabSelectedListener(){
		 * 
		 * @Override public void onTabReselected(Tab tab) {
		 * 
		 * }
		 * 
		 * @Override public void onTabSelected(Tab tab) { int
		 * pos=tab.getPosition(); viewPager.setCurrentItem(pos); }
		 * 
		 * @Override public void onTabUnselected(Tab tab) {
		 * 
		 * }});
		 * 
		 * //此處代碼實作ViewPager反向控制TabLayout的滑動和自動切換。
		 * TabLayout.TabLayoutOnPageChangeListener listener = new
		 * TabLayout.TabLayoutOnPageChangeListener(tabLayout);
		 * viewPager.addOnPageChangeListener(listener);
		 */
	}

	private class MyViewPagerAdapter extends PagerAdapter {

		private Activity activity;

		public MyViewPagerAdapter(Activity activity) {
			this.activity = activity;
		}

		@Override
		public CharSequence getPageTitle(int pos) {
			return "頁籤槽" + pos;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int pos) {
			TextView tv = new TextView(activity);
			tv.setText("@ViewPager:" + pos);
			tv.setTextSize(30.0f);
			tv.setGravity(Gravity.CENTER);

			container.addView(tv);
			return tv;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}

		@Override
		public int getCount() {
			return COUNT;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
	}
}           

MainActivity.java需要的布局檔案：activity_main.xml：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#ff5252"
        app:tabSelectedTextColor="#2196f3"
        app:tabTextColor="#90caf9" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>           

運作結果就是本文配圖中的結果。