用户向导左右滑动页面实现之ViewPager

接着上一篇博客。上一篇博客是用ImageSwitcher实现用户向导功能，如今用ViewPager实现同样的功能。

直接看代码：

布局文件activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <LinearLayout
        android:id="@+id/dots"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

ViewPager页面的切换用小圆点来表示当前是第几页，这里使用drawable.xml文件去绘制的。例如以下：

dot_focus.xml

<?xml version="1.0" encoding="utf-8"?

>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
      <corners android:radius="5dip" />
      <solid android:color="#FF930000" />
</shape>

dot_nomal.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
      <corners android:radius="5dip" />
      <solid android:color="#FF3C3C3C" />
</shape>

在Activity中例如以下代码：

package com.example.viewpagerautoswitch;

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

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

@SuppressLint("HandlerLeak")
public class MainActivity extends Activity {
	private ViewPager mViewPager ;
	private MyPagerAdapter mViewPagerAdapter ;
	private LinearLayout mLinearLayout ;
	private ImageView[] mImageDots ;
	private Context mContext ;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mContext = MainActivity.this ;
		mViewPager = (ViewPager)findViewById(R.id.viewpager);
		mLinearLayout = (LinearLayout)findViewById(R.id.dots);
		initViewPager(getImageItem() ,0);
	}

	public void initViewPager(List<ImageView> mList ,int position){
		mImageDots = new ImageView[mList.size()];
		for(int i=0 ;i<mList.size() ;i++){
			ImageView image = new ImageView(mContext);
			image.setLayoutParams(new LayoutParams(10, 10));
			image.setBackgroundResource(R.drawable.dot_nomal);
			mImageDots[i] = image ;
			mLinearLayout.addView(image);
			TextView tv = new TextView(mContext);
			tv.setLayoutParams(new LayoutParams(20, 10));
			mLinearLayout.addView(tv);
		}
		mViewPagerAdapter = new MyPagerAdapter(mContext,mList);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			// onPageScrollStateChanged --> onPageSelected --> onPageScrolled -->onPageScrollStateChanged
			@Override
			public void onPageSelected(int position) {
				for(int i=0 ;i<mImageDots.length ;i++){
					if(i == position){
						mImageDots[i].setBackgroundResource(R.drawable.dot_focus);
					}else{
						mImageDots[i].setBackgroundResource(R.drawable.dot_nomal);
					}
				}
			}

			@Override
			public void onPageScrolled(int current_position, float persent, int px) {
			}

			@Override
			public void onPageScrollStateChanged(int state) {

			}
		});

		mViewPager.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View view) {
			}
		});

		mViewPager.setAdapter(mViewPagerAdapter);
		mViewPager.setCurrentItem(position);
		mImageDots[position].setBackgroundResource(R.drawable.dot_focus);
	}

	public List<ImageView> getImageItem(){
		List<ImageView> list = new ArrayList<ImageView>();
		ImageView img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.img1);
		list.add(img);
		img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.img2);
		list.add(img);
		img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.img3);
		list.add(img);
		return list ;
	}

	@Override
	public void finish() {
		super.finish();
	}
}

这里ViewPager和ImageSwitcher不同的地方在于ViewPager是用Adapter去封装须要加装的页面。而ImageSwitcher使用ViewFactory去加装图片的。所以使用viewPager时须要集成PagerAdapter实现对应的接口就可以。例如以下：

MyPagerAdapter.java

package com.example.viewpagerautoswitch;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MyPagerAdapter extends PagerAdapter {

	private List<ImageView> items ;
	private Context mContext ;

	public MyPagerAdapter(Context context,List<ImageView> item){
		mContext = context ;
		items = item ;
	}

	@Override
	public int getCount() {
		return items == null ?

0 : items.size();
	}

	@Override
	public boolean isViewFromObject(View view, Object obj) {
		return view == (View)obj;
	}

	 @Override
	 public Object instantiateItem (ViewGroup container, int position) {
	        ImageView image = items.get(position);
	        ((ViewPager)container).addView(image, 0);
	        return image;
	 }  

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

这样就能够实现用户向导的功能了。详细的页面效果例如以下：图片显示的是第二张pager的情况，这个是android手机上的demo,假设是Android机顶盒上使用的话，能够捕捉左右键去时间滑动。

有时候，在应用中不不过为了能够切换图片，也许这个Pager他有点击事件所表示的意思。比方点击之后跳转到某个网页，这么办。？ 这里能够封装你的Adapter数据，将ImageView。替换成你定义的封装数据，在Adapter中重写的instantiateItem()中去实例化一个View，然后返回就可以，因为初始化Adapter的list在MainActivity中有原始数据，那么当用户在点击某个pager时，提取这个Pager所表示的信息。比方一个网址链接等。

事实上，如今好多app中使用了自己主动循环切换的效果，这个效果不外乎就是用计时器+Handler实现。仅仅须要加入例如以下代码就可以：

private Timer mTimer ;
	private void startTimer(){
		if(mTimer == null){
			mTimer = new Timer(true);
		}
		mTimer.schedule(new TimerTask(){
			@Override
			public void run() {
				mHandler.sendEmptyMessage(0);
			}
		}, 1000, 4000) ;// 延迟1秒開始运行。循环运行时间是4秒
	}

	private void stopTimer(){
		if(mTimer != null){
			mTimer.cancel() ;
			mTimer = null ;
		}
	}

	@SuppressLint("HandlerLeak")
	Handler mHandler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			if(msg.what == 0){
                 int mViewPagerCurrentIndex = mViewPager.getCurrentItem();
                 mViewPagerCurrentIndex = (++mViewPagerCurrentIndex) % mViewPager.getAdapter().getCount() ;
                 mViewPager.setCurrentItem(mViewPagerCurrentIndex, true);
			}
		};
	};

这段代码中提供了開始和停止自己主动循环切换的开关startTimer()、stopTimer()，通过这两个方法。能够更具需求对ViewPager是否须要自己主动切换做操作。

此外，ImageSwitcher的自己主动切换相同能够使用此代码去控制。