Android開發之使用ViewPager做引導頁面

引導頁面相信大家都不會陌生，安裝了一個新的App後第一次打開，都會有類似下圖，相當於說明文檔

實現效果

程序目錄結構<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/20140501/2014050109003095.png" alt="\">

在主layout裡main.xml定義一個幀布局，在viewPager上有多少頁就顯示多少個點

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

    
    

    

        

        

        
    

</frameLayout>

每一個View的布局pager1.xml

其它兩個view類似

在主Activity中

package com.example.viewpagerdemo;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private ViewPager viewPager = null;
	private ImageView img1, img2, img3;
	private ArrayList titles;
	private int curIndex = -1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		initWidgets();
		// 把要顯示的View裝入數組
		LayoutInflater li = LayoutInflater.from(this);
		View view1 = li.inflate(R.layout.pager1, null);
		View view2 = li.inflate(R.layout.pager2, null);
		View view3 = li.inflate(R.layout.pager3, null);

		// 添加頁面
		final ArrayList views = new ArrayList();
		views.add(view1);
		views.add(view2);
		views.add(view3);

		// 添加標題
		titles = new ArrayList();
		titles.add("tab1");
		titles.add("tab2");
		titles.add("tab3");

		picViewPagerAdapter pagerAdapter = new picViewPagerAdapter(views);
		viewPager.setAdapter(pagerAdapter);
		curIndex = 1;
		viewPager.setCurrentItem(curIndex);
		img2.setImageResource(R.drawable.page_icon_sel);

		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				switch (arg0) {
				case 0:
					img1.setImageResource(R.drawable.page_icon_sel);
					img2.setImageResource(R.drawable.page_icon);
					img3.setImageResource(R.drawable.page_icon);
					break;
				case 1:
					img2.setImageResource(R.drawable.page_icon_sel);
					img1.setImageResource(R.drawable.page_icon);
					img3.setImageResource(R.drawable.page_icon);
					break;
				case 2:
					img3.setImageResource(R.drawable.page_icon_sel);
					img2.setImageResource(R.drawable.page_icon);
					img1.setImageResource(R.drawable.page_icon);
					break;
				default:
					break;
				}
				curIndex = arg0;
				System.out.println("[MainActivity->]currIndex = " + curIndex);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

	private void initWidgets() {
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		img1 = (ImageView) findViewById(R.id.icon_1);
		img2 = (ImageView) findViewById(R.id.icon_2);
		img3 = (ImageView) findViewById(R.id.icon_3);
	}

	/**
	 * 為ViewPager添加適配器
	 * 
	 * @author Administrator
	 * 
	 */
	class picViewPagerAdapter extends PagerAdapter {

		private List listViews;

		public picViewPagerAdapter(List list) {
			listViews = list;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return listViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

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

		@Override
		public CharSequence getPageTitle(int position) {
			return titles.get(position);
		}

		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(listViews.get(position));
			return listViews.get(position);
		}
	}
}

每個小圓點的改變是通過viewpager監聽器去改變的

viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				switch (arg0) {
				case 0:
					img1.setImageResource(R.drawable.page_icon_sel);
					img2.setImageResource(R.drawable.page_icon);
					img3.setImageResource(R.drawable.page_icon);
					break;
				case 1:
					img2.setImageResource(R.drawable.page_icon_sel);
					img1.setImageResource(R.drawable.page_icon);
					img3.setImageResource(R.drawable.page_icon);
					break;
				case 2:
					img3.setImageResource(R.drawable.page_icon_sel);
					img2.setImageResource(R.drawable.page_icon);
					img1.setImageResource(R.drawable.page_icon);
					break;
				default:
					break;
				}
				curIndex = arg0;
				System.out.println("[MainActivity->]currIndex = " + curIndex);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

完整Demo下載：http://download.csdn.net/detail/deng0zhaotai/7272609