使用ViewPager实现图片自动切换

1、ViewPager讲解

   ViewPager是<android.support.v4.view.ViewPager/>中的控件，使用时直接在布局文件中引用，跟正常控件一样。但是，要给ViewPager设置适配器PagerAdapter，其中有四个方法是适配器PagerAdapter必须实现的，以下列出：

（1）public int getCount()
：返回要滑动的VIew的个数;
（2）public void destroyItem(ViewGroup container, int position, Object object)：从当前container中删除指定位置（position）的
        View;
（3）public Object instantiateItem(ViewGroup container, int position)：做了两件事，第一：将当前视图添加到container中，第
   二：返回代表当前View的一个键值，可以是View本身;
（4）public boolean isViewFromObject(View arg0, Object arg1)：代表了当前的页面是否与给定的键相关联。

官方文档中这样解释的：
   ViewPager不直接处理每一个视图而是将各个视图与一个键联系起来。这个键用来跟踪且唯一代表一个页面，不仅如此，该键还独立于这个页面所在adapter的位置。当PagerAdapter将要改变的时候他会调用startUpdate函数，接下来会调用一次或多次的instantiateItem或者destroyItem。最后在更新的后期会调用finishUpdate。当finishUpdate返回时
instantiateItem返回的对象应该添加到父ViewGroup destroyItem返回的对象应该被ViewGroup删除。methodisViewFromObject(View, Object)代表了当前的页面是否与给定的键相关联。

2、应用ViewPager实现图片自动切换

先给出页面布局的代码，在布局文件中直接引用ViewPager：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.wlx.activity.HomeActivity"
tools:ignore="MergeRootFrame"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="@+id/imageViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="23dp"
android:gravity="center"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:background="#33000000"
>
<View
android:id="@+id/dot_0"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_1"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_2"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_3"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_4"
android:layout_width="7dp"
android:layout_height="7dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="5dp"
android:background="@drawable/dot_normal"
/>
</LinearLayout>

</FrameLayout>
</LinearLayout>

       然后在Acticity里，在onStart（）函数中，创建一个的任务，这个任务的作用是向Handler发送消息，告诉Handler现在要更换图片了，Handler接收到消息之后就把Viewpager中的图片切换掉（当然这里可以加入自己想要的动画，这样不会显得很突兀）。把这个任务你想要的频率执行就可以了。代码如下：

package com.wlx.activity;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import com.example.hangzhouapp.R;
import com.example.hangzhouapp.R.id;
import com.example.hangzhouapp.R.layout;
import com.example.hangzhouapp.R.menu;

import android.R.integer;
import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
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.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.os.Build;

public class HomeActivity extends Activity {

private List<ImageView> imageViewList;
private List<View> dotList;
private int prePosition;
private int curPosition;

private ViewPager imageViewPager;
private ViewPagerAdapter imageViewPagerAdapter;
private ScheduledExecutorService scheduledExecutorService;

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

initView();

imageViewPagerAdapter = new ViewPagerAdapter();
imageViewPager.setAdapter(imageViewPagerAdapter);

imageViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub

dotList.get(prePosition).setBackgroundResource(R.drawable.dot_normal);
dotList.get(position).setBackgroundResource(R.drawable.dot_focused);

prePosition = position;
curPosition = position;

}

@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

}
});

}
@Override
public void onStart()
{
super.onStart();
//创建大小为1的固定线程池
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
//使得ScollImageTask()每隔两秒执行一次
scheduledExecutorService.scheduleWithFixedDelay(new ScollImageTask(), 2, 2, TimeUnit.SECONDS);
}
Handler hander = new Handler(){
@Override
public void handleMessage(Message msg)
{
imageViewPager.setCurrentItem(curPosition);
}
};
private void initView() {
// TODO Auto-generated method stub
imageViewList = new ArrayList<ImageView>();
imageViewList.add(CreateImageView(R.drawable.a));
imageViewList.add(CreateImageView(R.drawable.b));
imageViewList.add(CreateImageView(R.drawable.c));
imageViewList.add(CreateImageView(R.drawable.d));
imageViewList.add(CreateImageView(R.drawable.e));

dotList = new ArrayList<View>();
dotList.add(findViewById(R.id.dot_0));
dotList.add(findViewById(R.id.dot_1));
dotList.add(findViewById(R.id.dot_2));
dotList.add(findViewById(R.id.dot_3));
dotList.add(findViewById(R.id.dot_4));

dotList.get(0).setBackgroundResource(R.drawable.dot_focused);
imageViewPager = (ViewPager) findViewById(R.id.imageViewPager);
}
private ImageView CreateImageView(int resourceId)
{
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(resourceId);
return imageView;
}
private class ViewPagerAdapter extends PagerAdapter
{
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(imageViewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(imageViewList.get(position));
return imageViewList.get(position);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return imageViewList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
}
private class ScollImageTask implements Runnable
{
@Override
public void run() {
// TODO Auto-generated method stub
curPosition = (curPosition + 1) % imageViewList.size();
hander.obtainMessage().sendToTarget();
}
}
}

         在图片的右下角有圆点会跟随图片的滑动而改变，这里定义了两种圆点的样式，代码如下：
dot_normal.xml

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

dot_focused.xml

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

效果图如下：



参考博客：http://blog.csdn.net/harvic880925/article/details/38487149
                 http://www.cnblogs.com/androidez/archive/2013/03/12/2956107.html