基于ViewFlipper实现图片浏览组件

转载请说明出处：http://blog.csdn.net/ff20081528

前段时间一个朋友问我有没有做过手机商城的广告浏览的功能，如下图：

我也看了下，基本上所有的商城也都有衣蛾这样的东西。在网上搜了下，开源的也有，网友自己写的也有。但是没有找到完全符合朋友需求的一个组件。为此也就花了点时间帮朋友写了这么一个组件，在此分享出来，希望对一些朋友有用，能省一些开发时间。

组件的功能

1，自动播放功能（带有切换动画）；

2，手指滑动切换（手指效果和动画效果同步）；

3，能够循环滑动和播放；

4，有图片浏览指示标；

组件的实现我在代码里面都有详细的注释，但是要看懂这个组件的源码我还是建议去看看我的上一篇文章《深入了解ViewFlipper工作机制》，要不看起来会很吃力。下面直接贴出源码  转载请说明出处：http://blog.csdn.net/ff20081528

ImageBrowsingViewFlipper.java

package org.sunday.myflipper;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.Animation;
import android.widget.ImageView;
import android.widget.ViewFlipper;

/**
 * 图片浏览类
 * @author sunday
 * 2014-1-13
 * zhengchao1937@163.com
 * qq:804935743
 */
public class ImageBrowsingViewFlipper extends ViewFlipper {
	private final static String TAG = "ImageBrowsingViewFlipper";
	
	/**
	 * VIEW滚动时的默认速度
	 */
	private final static int DEFAULT_CROLL_SPEED = 30;
	
	/**
	 * View滚动时，让线程休眠时间，目的让用户的眼睛可以看到图片滚动的效果
	 */
	private final static int SLEEP_TIME = 20;
	
	/**
	 * 图片资源
	 */
	private Drawable[] imgsDraw;
	
	private Context mContext;
	
	/**
	 * VIEW滚动时的速度，默认值为DEFAULT_CROLL_SPEED
	 */
	private int crollSpeed = DEFAULT_CROLL_SPEED;
	
	/**
	 * 记录手指按下时的X轴的坐标
	 */
	private float xDown;
	
	/**
	 * 记录手指移动的时候的X轴的坐标
	 */
	private float xMove;
	
	/**
	 * 记录手指抬起时的X轴的坐标
	 */
	private float xUp;
	
	/**
	 * ViewFlipperde的宽度
	 */
	private int vfWidth;
	
	/**
	 * 图片的数量
	 */
	private int imgsLen;
	/**
	 * 当前显示的子View
	 */
	private ImageView ivCurr;
	
	/**
	 * 下一个将要显示的子View
	 */
	private ImageView ivNext;
	
	/**
	 * 之前已经显示过的子View
	 */
	private ImageView ivLast;
	
	/**
	 * 当前子View的位置
	 */
	private int currViewPosition;
	
	/**
	 * 回调接口
	 */
	private IImageBrowsingMark mImgBrowsingMark;
	
	/**
	 * ViewFlipper子View切换时将要显示的View的进入动画
	 */
	private Animation lInAnim;
	
	/**
	 * ViewFlipper子View切换时当前显示的View的退出动画
	 */
	private Animation lOutAnim;
	
	public ImageBrowsingViewFlipper(Context context) {
		super(context);
		mContext = context;
		init();
	}
	
	public ImageBrowsingViewFlipper(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		init();
	}
	
	/**
	 * 设置View滚动时的速度
	 * @param crollSpeed
	 */
	public void setCrollSpeed(int crollSpeed) {
		this.crollSpeed = crollSpeed;
	}

	public int getVfWidth() {
		return vfWidth;
	}
	
	public void setImgsDraw(Drawable[] imgsDraw) {
		this.imgsDraw = imgsDraw;
		initImages();
	}

	public void setVfWidth(int vfWidth) {
		this.vfWidth = vfWidth;
	}
	
	public IImageBrowsingMark getmImgBrowsingMark() {
		return mImgBrowsingMark;
	}
	
	public void setmImgBrowsingMark(IImageBrowsingMark mImgBrowsingMark) {
		this.mImgBrowsingMark = mImgBrowsingMark;
	}
	
	private void init() {
		//视图树观察者,用于获取ViewFlipper的宽度
		ViewTreeObserver vto = getViewTreeObserver();   
		//当一个视图树将要绘制时，所要调用的回调函数的接口类
		vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {   
			@Override
			public boolean onPreDraw() {
				int height = ImageBrowsingViewFlipper.this.getMeasuredHeight();   
			    int width =ImageBrowsingViewFlipper.this.getMeasuredWidth();
			    Log.e(TAG, "height = " + height + " ; width = " + width);
			    vfWidth = width;
				return true;
			}   
		});   
	}
	
	/**
	 * 初始化Image
	 */
	private void initImages() {
		imgsLen = imgsDraw.length;
		// 添加图片源
		for (int i = 0; i < imgsLen; i++) { 			
			ImageView iv = new ImageView(mContext);
			iv.setOnTouchListener(onTouchListener);
			iv.setImageDrawable(imgsDraw[i]);
			iv.setScaleType(ImageView.ScaleType.FIT_XY);
			addView(iv, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		}
	}
	
	/**
	 * 停止滑动和动画并保存动画
	 */
	private void stopAndSaveAnimation() {
		ImageBrowsingViewFlipper.this.stopFlipping();
		if(lInAnim == null && lOutAnim == null) {
			lInAnim = ImageBrowsingViewFlipper.this.getInAnimation();
			lOutAnim = ImageBrowsingViewFlipper.this.getOutAnimation();
		}
		ImageBrowsingViewFlipper.this.setInAnimation(null);
		ImageBrowsingViewFlipper.this.setOutAnimation(null);
	}
	
	/**
	 * 开启滑动并使用动画
	 */
	private void startAndUseAnimation() {
		ImageBrowsingViewFlipper.this.startFlipping();
		ImageBrowsingViewFlipper.this.setInAnimation(lInAnim);
		ImageBrowsingViewFlipper.this.setOutAnimation(lOutAnim);
	}
	
	/**
	 * 实现OnTouchListener事件
	 */
	private OnTouchListener onTouchListener = new OnTouchListener() {
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			switch (event.getAction()) {
			//手指按下时的逻辑
			case MotionEvent.ACTION_DOWN:
				Log.e(TAG, "MotionEvent.ACTION_DOWN" );
				xDown = event.getRawX();
				stopAndSaveAnimation();
				break;
			//手指移动时的逻辑
			case MotionEvent.ACTION_MOVE:
				Log.e(TAG, "ACTION_MOVE" );
				xMove = event.getRawX();
				//手指滑动的距离
				int xDistance = (int)(xMove - xDown);
				Log.e(TAG, "-----------------  xDown = " + xDown + "; xMove = " + xMove);
				//当前显示的ImageView
				ImageView ivCurr = (ImageView) ImageBrowsingViewFlipper.this.getCurrentView();
				currViewPosition = ImageBrowsingViewFlipper.this.getDisplayedChild();
				//下一个ImageView
				ImageView ivNext = getNextView(currViewPosition);
				//上一个ImageView
				ImageView ivLast = getLastView(currViewPosition);
				
				//在ViewFlipper工作机制中，某一个时间点只有当前的子View是VISIBLE状态，其他的子View都是GONE状态。
				//所以要在滑动的时候看见他们，必须将他们设置为VISIBLE状态
				ivNext.setVisibility(View.VISIBLE);
				ivLast.setVisibility(View.VISIBLE);
				//将当前的ImageView移动到这个(-xDistance, 0)位置
				ivCurr.scrollTo(-xDistance, 0);
				
				//将下一个ImageView移动到(xNext, 0)位置
				int xNext = - vfWidth - xDistance;
				Log.e(TAG, "xNext = " + xNext);
				ivNext.scrollTo(xNext, 0);
				//将上一个ImageView移动到(xLast, 0)位置
				int xLast = vfWidth - xDistance;
				Log.e(TAG, "xLast = " + xLast);
				ivLast.scrollTo(xLast, 0);
				break;
			//手指抬起时的逻辑
			case MotionEvent.ACTION_UP:
				Log.e(TAG, "ACTION_UP" );
				xUp = event.getRawX();
				//判断用户手指的意图，这块可以自己改写逻辑
				if(wantToNext()) {
					Log.e(TAG, "wantToNext-------------");
					new ScrollToNextTask().execute(crollSpeed);
				} else if(wantToLast()) {
					Log.e(TAG, "wantToLast-------------");
					new ScrollToLastTask().execute(crollSpeed);
				} else {
					new ScrollToLastTask().execute(crollSpeed);
				}
				break;
			default:
				break;
			}
			return true;
		}
	};
	
	/**
	 *  判断当前手势的意图是不是想显示上一个子View
	 * @return 当前手势想移动到上一个则返回true，否则返回false。
	 */
	protected boolean wantToLast() {
		return xUp - xDown > 0;
	}
	
	/**
	 *  判断当前手势的意图是不是想显示下一个子View
	 * @return 当前手势想移动到下一个则返回true，否则返回false。
	 */
	protected boolean wantToNext() {
		return xUp - xDown < 0;
	}
	
	/**
	 * 得到上一个子视图的ImageView对象
	 * @param currViewPosition 当前View的位置
	 * @return 子视图对象
	 */
	private ImageView getLastView(int currViewPosition) {
		int lastViewPosition = currViewPosition - 1;
		if(currViewPosition == 0) {
			lastViewPosition = imgsLen - 1;
		}
		Log.e(TAG, "lastViewPosition = " + lastViewPosition);
		return (ImageView) this.getChildAt(lastViewPosition);
	}
	
	/**
	 * 得到下一个子视图的ImageView对象
	 * @param currViewPosition 当前View的位置
	 * @return 子视图对象
	 */
	private ImageView getNextView(int currViewPosition) {
		int nextViewPosition = currViewPosition + 1;
		if(currViewPosition == imgsLen - 1) {
			nextViewPosition = 0;
		}
		Log.e(TAG, "nextViewPosition = " + nextViewPosition);
		return (ImageView) this.getChildAt(nextViewPosition);
	}
	
	/**
	 * 意图显示下一个子View
	 * @author sunday
	 *
	 */
	class ScrollToNextTask extends AsyncTask<Integer, Integer, Integer> {
		@Override
		protected Integer doInBackground(Integer... speed) {
			ivCurr = (ImageView) ImageBrowsingViewFlipper.this.getCurrentView();
			int currViewPosition = ImageBrowsingViewFlipper.this.getDisplayedChild();
			ivNext = getNextView(currViewPosition);
			ivLast = getLastView(currViewPosition);
			
			int xDistance = Math.abs((int)(xUp - xDown));
			while (true) {
				xDistance = xDistance + speed[0];
				if(xDistance > vfWidth) {
					xDistance = vfWidth;
					break;
				}
				publishProgress(xDistance);
				sleep(SLEEP_TIME);
			}
			return xDistance;
		}
		@Override
		protected void onProgressUpdate(Integer... xDistance) {
			int xNext = - vfWidth + xDistance[0];
			Log.e(TAG, "xNext = " + xNext);
			ivCurr.scrollTo(xDistance[0], 0);
			ivNext.scrollTo(xNext, 0);
		}
		@Override
		protected void onPostExecute(Integer xDistance) {
			int xNext = - vfWidth + xDistance;
			Log.e(TAG, "xNext = " + xNext);
			ivCurr.scrollTo(xDistance, 0);
			ivNext.scrollTo(xNext, 0);
			int currPosition = displayedNextChild(currViewPosition);
			ImageBrowsingViewFlipper.this.setDisplayedChild(currPosition);
			ivNext.setVisibility(View.VISIBLE);
			if(null != mImgBrowsingMark.getMarkView())
				mImgBrowsingMark.getMarkView().setMark(currPosition);
			ivCurr.setVisibility(View.GONE);
			ivLast.setVisibility(View.GONE);
			//将当前（移动发生之前）的ImageView移动到（0，0）位置因为在滑动时它的位置被改变
			ivCurr.scrollTo(0, 0);
			//将上一个（移动发生之前）的ImageView移动到（0，0）位置
			ivLast.scrollTo(0, 0);
			startAndUseAnimation();
		}
	}
	
	/**
	 * 意图显示上一个子View
	 * @author sunday
	 *
	 */
	class ScrollToLastTask extends AsyncTask<Integer, Integer, Integer> {
		@Override
		protected Integer doInBackground(Integer... speed) {
			ivCurr = (ImageView) ImageBrowsingViewFlipper.this.getCurrentView();
			int currViewPosition = ImageBrowsingViewFlipper.this.getDisplayedChild();
			ivNext = getNextView(currViewPosition);
			ivLast = getLastView(currViewPosition);
			int xDistance = Math.abs((int)(xUp - xDown));
			while (true) {
				xDistance = xDistance + speed[0];
				if(xDistance > vfWidth) {
					xDistance = vfWidth;
					break;
				}
				publishProgress(xDistance);
				sleep(SLEEP_TIME);
			}
			return xDistance;
		}
		@Override
		protected void onProgressUpdate(Integer... xDistance) {
			int xLast = vfWidth - xDistance[0];
			Log.e(TAG, "xLast = " + xLast);
			ivCurr.scrollTo(-xDistance[0], 0);
			ivLast.scrollTo(xLast, 0);
		}
		@Override
		protected void onPostExecute(Integer xDistance) {
			int xLast = vfWidth - xDistance;
			Log.e(TAG, "xLast = " + xLast);
			ivCurr.scrollTo(-xDistance, 0);
			ivLast.scrollTo(xLast, 0);
			int currPosition = displayedLastChild(currViewPosition);
			ImageBrowsingViewFlipper.this.setDisplayedChild(currPosition);
			ivLast.setVisibility(View.VISIBLE);
			if(null != mImgBrowsingMark.getMarkView())
				mImgBrowsingMark.getMarkView().setMark(currPosition);
			ivCurr.setVisibility(View.GONE);
			ivNext.setVisibility(View.GONE);
			ivCurr.scrollTo(0, 0);
			ivNext.scrollTo(0, 0);
			startAndUseAnimation();
		}
	}
	
	/**
	 * 视图向左滑动将要显示的子视图的位置
	 * @param currViewPosition
	 * @return
	 */
	private int displayedNextChild(int currViewPosition) {
		int nextViewPosition = currViewPosition + 1;
		if(currViewPosition == imgsLen - 1) {
			nextViewPosition = 0;
		}
		return nextViewPosition;
	}
	
	/**
	 * 视图向右滑动将要显示的子视图的位置
	 * @param currViewPosition
	 * @return
	 */
	private int displayedLastChild(int currViewPosition) {
		int lastViewPosition = currViewPosition - 1;
		if(currViewPosition == 0) {
			lastViewPosition = imgsLen - 1;
		}
		return lastViewPosition;
	}
	
	/**
	 * 使当前线程睡眠指定的毫秒数。
	 * 
	 * @param millis
	 *            指定当前线程睡眠多久，以毫秒为单位
	 */
	private void sleep(long millis) {
		try {
			Thread.sleep(millis);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
	}
	
	/**
	 *  解决Receiver not registered: android.widget.ViewFlipper问题，在android2.1,2.2上
	 */
	@Override
	protected void onDetachedFromWindow () {
		try {
			super.onDetachedFromWindow();
		}	catch (IllegalArgumentException e) {
			stopFlipping();
		}
	}
	
	/**
	 * 重写showNext()方法，用于实现图片自动切换时，图片的指示标也跟着切换
	 */
	@Override
	public void showNext() {
		super.showNext();
		if(null != mImgBrowsingMark.getMarkView())
			mImgBrowsingMark.getMarkView().setMark(getDisplayedChild());
	}
	
	/**
	 * 图片浏览指示标的回调接口
	 * @author sunday
	 *
	 */
	public interface IImageBrowsingMark {
		public MarkView getMarkView();
	}
}

 MarkView.java类

package org.sunday.myflipper;

import org.sunday.myflipper.R;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.LinearLayout;
/**
 * 图片浏览指示标
 * @author sunday
 *
 */
public class MarkView extends LinearLayout {
	private ImageView[] mImageView;
	private Context context;

	public MarkView(Context context){
		super(context);
		this.context = context;
	}

	public MarkView(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context = context;
	}

	public void setMarkCount(int iCount) {
		mImageView = new ImageView[iCount];
		LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT);
		for (int i = 0; i < iCount; i++) {
			ImageView image = new ImageView(context);
			image.setImageResource(R.drawable.unselected_dot);
			image.setLayoutParams(p);
			mImageView[i] = image;
			image.setId(i);
			addView(image);
		}
	}

	public void setMark(int position) {
		for (int i = 0; i < mImageView.length; i++) {
			if (i == position) {
				mImageView[i].setImageResource(R.drawable.select_dot);
			} else {
				mImageView[i].setImageResource(R.drawable.unselected_dot);
			}
		}
	}

}

 

DemoActivity.java类

package org.sunday.myflipper;

import org.sunday.myflipper.ImageBrowsingViewFlipper.IImageBrowsingMark;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;

public class DemoActivity extends Activity implements IImageBrowsingMark  {
	
	private MarkView markView;
	private Drawable[] imgs;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		imgs = new Drawable[5];
		imgs[0] =  getResources().getDrawable(R.drawable.img1);
		imgs[1] =  getResources().getDrawable(R.drawable.img2);
		imgs[2] =  getResources().getDrawable(R.drawable.img3);
		imgs[3] =  getResources().getDrawable(R.drawable.img4);
		imgs[4] =  getResources().getDrawable(R.drawable.img5);
		
		setContentView(R.layout.demo);
		
		ImageBrowsingViewFlipper ibvf = (ImageBrowsingViewFlipper) findViewById(R.id.viewflipper);
		//设置图片浏览指示标接口
		ibvf.setmImgBrowsingMark(this);
		//设置图片
		ibvf.setImgsDraw(imgs);
		
		markView = (MarkView) findViewById(R.id.markView);
		markView.setMarkCount(imgs.length);
		//起始位置设置为0
		markView.setMark(0);
		
		// 向左滑动左侧进入的渐变效果（alpha 0.1  -> 1.0）
		Animation lInAnim = AnimationUtils.loadAnimation(this, R.anim.push_left_in);		
		// 向左滑动右侧滑出的渐变效果（alpha 1.0  -> 0.1）
		Animation lOutAnim = AnimationUtils.loadAnimation(this, R.anim.push_left_out); 	

		ibvf.setInAnimation(lInAnim);
		ibvf.setOutAnimation(lOutAnim);
		// 设置自动播放功能
		ibvf.setAutoStart(true);			
		if(ibvf.isAutoStart() && !ibvf.isFlipping()){
			ibvf.startFlipping();
		}
	}
	
	@Override
	public MarkView getMarkView() {
		return markView;
	}
}

 demo：http://download.csdn.net/detail/ff20081528/6843885