Android利用ViewPager實現Tab

Android利用ViewPager實現Tab佈局

以下爲最終結果:

使用Tab類型的發佈項目具有很多,比如典型的微信.. QQ等都具備,這也是手機程序中不可缺少的一種佈局方式。現在就好好聊聊怎麼實現的,其實非常簡單！（想要學習本列, 需要掌握ViewPager'的基本用法）

思路:    1)   我們整體的佈局文件要創建好。 因今天不是講解佈局文件，所以等下我就直接將佈局文件源代碼貼出來。
     2)   在效果圖中可以看出,一直在變化的是中間的ViewPager。
     3)   根據單擊的按鈕不同, 命令ViewPager顯示第幾張佈局。

ps: 要注意,Android studio較低版本的情況下可能找不到ViewPager類; 需導入v4包才能運行

一步一步講解：

1） 整體工程結構圖

2）最終效果圖的佈局文件（直接貼出源代碼）

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="ViewPager impl tab" >
    </TextView>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/hello_world" />

    <LinearLayout
        android:id="@+id/id_linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/id_btn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="btnStartClick"
            android:text="btn1" />

        <Button
            android:id="@+id/id_btn2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="btnStartClick"
            android:text="btn2" />
    </LinearLayout>

</LinearLayout>

3.1) ViewPager中內部的佈局文件(activity_item_one.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="VIEWPAGER1" 
        android:textSize="20pt"/>

</LinearLayout>

3.2) ViewPager中內部的佈局文件(activity_item_two.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="VIEWPAGER2"
        android:textSize="20pt" />

</LinearLayout>

4)操作MainActivity.java文件(所有的控制邏輯

4.1）定義成員屬性

<span style="white-space:pre">	</span>private ViewPager viewPager;
	private List<View> views;
	private PagerAdapter pagerAdapter;

viewPager:  引用配置文件的viewPager，也使用此對象進行tab頁面的切換操作

views: 定義系列view, 保存在viewPager中以便使用

pagerAdapter: 爲ViewPager的適配器

4.2) 創建監聽按鈕的單擊方法（用來通知ViewPager顯示第幾張佈局文件

public void btnStartClick(View v) {

		switch (v.getId()) {
		case R.id.id_btn1:
			viewPager.setCurrentItem(0);
			break;

		case R.id.id_btn2:
			viewPager.setCurrentItem(1);
			break;

		}

	}

4.3)  初始化屬性

// 獲取viewPager
		viewPager = (ViewPager) findViewById(R.id.id_viewpager);
		
		// 初始化集合數據
		views = new ArrayList<View>();
		// 將定義好的兩個佈局文件加載進來, 就是viewPager裏面可以用來顯示的佈局
		views.add(getLayoutInflater().inflate(R.layout.activity_item_one, null));
		views.add(getLayoutInflater().inflate(R.layout.activity_item_two, null));
			
		// viewPager的適配器創建
		pagerAdapter = new PagerAdapter() {
			
			/**
			 * 內部用來決定顯示哪張佈局文件
			 */
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

			/**
			 * 該ViewPager中共具有幾張佈局
			 */
			@Override
			public int getCount() {
				return views.size();
			}

			/**
			 * 開始創建佈局文件的方法. 將返回的view類型對象顯示在ViewPager同等大小的組件上
			 */
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				container.addView(views.get(position));
				return views.get(position);
			}

			/**
			 * 當銷燬時調用的方法
			 */
			@Override
			public void destroyItem(ViewGroup container, int position, Object object) {
				container.removeView(views.get(position));
			}
		};

ps:實現PagerAdapter中instantiateItem和destroyItem方法是用來進行緩存優化使用的。ViewPager的實現原理與ListView的實現原理基本類似。 其清除緩存方式同樣類似

4.4) 綁定適配器

viewPager.setAdapter(pagerAdapter);

至此，我們的所有代碼已經實現,非常簡單的Tab佈局實現方式,仔細看代碼中的註釋基本上就全部明白了。相信有一些基本知識的學習者看過之後就理解了。

除了使用ViewPager實現Tab佈局之外，還有使用Fragment進行實現,下一篇博客我們將會進行講解。

學習者們可以利用現有的知識去實現微信的Tab佈局了。 （唯一需要改變的就只有其佈局文件....