ViewPager的簡單應用

首先來看下什麼是ViewPager。

上面一個標題欄，下面多個頁卡，支持左右滑動。

我們直接來看看實現的步驟 ：

1. 在佈局文件中創建一個ViewPager控件

- 這裏的ViewPager是android.support.v4.view包下的。。這個包是google爲了解決碎片化，兼容等問題所加的一個包。

- 如果我們要顯示上面的標題，那麼在ViewPager中就必須有PagerTabStrip或者PagerTitleStrip，這兩個其實差不多。

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        >
        <android.support.v4.view.PagerTabStrip
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_gravity="top"
            android:id="@+id/pagerTitle">
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>
</LinearLayout>

2. 我們要創建一個ViewPager的適配器。

- 這裏我們自己寫了一個適配器，集成自PagerAdapter，然後重寫了裏面的一些方法，這幾個方法必須重寫。

- 如果不要標題的話，getPageTitle可以省略

- 這裏的構造的兩個參數： 1. 頁卡的集合，即view的集合  2. 標題的集合

package com.example.viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class MyPagerAdapter extends PagerAdapter{
	// view集合
	private List<View> viewList;
	//  title集合
	private List<String> titleList;
	// 有參構造方法
	public MyPagerAdapter(List<View> viewList, List<String> titleList) {
		this.viewList = viewList;
		this.titleList = titleList;
	} 
	/**
	 *  獲取頁卡數量
	 */
	@Override
	public int getCount() {
		return viewList.size();
	}
	/**
	 *  判斷頁卡是否來自一個對象
	 */
	@Override
	public boolean isViewFromObject(View paramView, Object paramObject) {
		return paramView == paramObject;
	}
	/**
	 * 實例化一個頁卡
	 */
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(viewList.get(position));
		return viewList.get(position);
	}
	/**
	 *  銷燬一個頁卡 
	 */
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(viewList.get(position));
	}
	/**
	 * 獲取頁卡標題
	 */
	@Override
	public CharSequence getPageTitle(int position) {
		return titleList.get(position);
	}
}

3. 我們創建幾個View（頁卡），以給PagerAdapter做數據源。

- 這裏我建了四個，不一一展示了

<?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:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一個頁面"
        />
</LinearLayout>

4. 實現

- View.inflate(),可以將一個佈局文件轉成一個View對象

package com.example.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;

public class MainActivity extends Activity {

	// 定義一個ViewPager
	private ViewPager viewPager;
	// 定義一個PagerTitleStrip
	private PagerTabStrip pagerTabStrip;
	// 定義view集合
	private List<View> viewList;
	// 定義標題集合
	private List<String> titleList;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//  初始化控件
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagerTitle);
		//設置pagerTitleStrip的樣式
		pagerTabStrip.setTabIndicatorColor(Color.GREEN); //下劃線爲綠色
		//  初始化view集合
		viewList = new ArrayList<View>();
		viewList.add(View.inflate(MainActivity.this, R.layout.view1, null));
		viewList.add(View.inflate(MainActivity.this, R.layout.view2, null));
		viewList.add(View.inflate(MainActivity.this, R.layout.view3, null));
		viewList.add(View.inflate(MainActivity.this, R.layout.view4, null));
		
		// 初始化 標題集合
		titleList = new ArrayList<String>();
		titleList.add("標題一");
		titleList.add("標題二");
		titleList.add("標題三");
		titleList.add("標題四");
		
		// 實例化一個PagerAdapter
		MyPagerAdapter myPagerAdapter = new MyPagerAdapter(viewList, titleList);
		
		//  將適配器set到viewPager中
		viewPager.setAdapter(myPagerAdapter);
		
	}
}

這裏提供android.support.v4.view包的下載。

http://pan.baidu.com/s/1gezGNOB