使用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