学步园

在Eclipse中查看ViewFlipper的类关系图：

ViewFlipper，不妨把它看做一个容器吧，你可以把许多的View放在这个容器中，让它展示给用户，虽然它每次只展示一个view，我感觉它的用途更好是作为广告展示，比如类似购物网站那样的广告滚动展示。这个demo是一个手动滑动屏幕查看图片的例子，共有10张图片，左右滑动可以查看图片，效果不是很好。其实用ViewPager会更好些。

程序运行截图：

这个是Main类，它是点击icon就运行的主Activity，它只是负责把ViewFlipperView展示给用户。

public class Main extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(new ViewFlipperView(this));
	}
}

这是最关键的ViewFlipperView，展示图片的同时，也用一排点点来告诉用户已经展示到第几张图片了。

/**
 * 这是一个类似于ViewFlipper的Wiget。
 * @author haozi
 *
 */
public class ViewFlipperView extends FrameLayout implements IAdImages {

	private Context context;                           // 调用方的上下文
	private int currentAdImgIndex;                     // 当前广告图片索引
	private Animation left2RightInAnimation;           // 广告图片从左到右进入屏幕动画
	private Animation left2RightOutAnimation;          // 广告图片从左到右出去屏幕动画
	private Animation right2LeftInAnimation;           // 广告图片从右到左进入屏幕动画
	private Animation right2LeftOutAnimation;          // 广告图片从右到左出去屏幕动画
	private int animationDuration = 500;               // 动画花费时间500毫秒
	private ViewFlipper mViewFlipper;                  // 滑动页面控件
	private LinearLayout mTipLinearLayout;             // 下方点点控件
	private float startX = 0;                          // touch action down 时的x坐标
	private float endX = 0;                            // touch action up 时的x坐标
	
	
	public ViewFlipperView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		this.context = context;
		setView();
	}

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

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

	/**
	 * 显示View
	 */
	private void setView(){
		
		// 初始化
		int screenWidth = getResources().getDisplayMetrics().widthPixels;
		mViewFlipper = new ViewFlipper(context);
		mTipLinearLayout = new LinearLayout(context);
		// 初始化动画
		left2RightInAnimation = new TranslateAnimation(-screenWidth, 0, 0, 0);
		left2RightInAnimation.setDuration(animationDuration);
		left2RightOutAnimation = new TranslateAnimation(0, screenWidth, 0, 0);
		left2RightOutAnimation.setDuration(animationDuration);
		right2LeftInAnimation = new TranslateAnimation(screenWidth, 0, 0, 0);
		right2LeftInAnimation.setDuration(animationDuration);
		right2LeftOutAnimation = new TranslateAnimation(0, -screenWidth, 0, 0);
		right2LeftOutAnimation.setDuration(animationDuration);

		
		// 将广告图片加入ViewFlipper
		for(int i=0; i<adImages.length; i++){
			ImageView image = new ImageView(context);
			image.setImageResource(adImages[i]);
			mViewFlipper.addView(image);
		}
		addView(mViewFlipper);
		
		// 将图片索引点动态加入
		for(int i=0; i<adImages.length; i++){
			ImageView image = new ImageView(context);
			if(i == 0){
				image.setImageResource(R.drawable.point_selected);
			}else{
				image.setImageResource(R.drawable.point_normal);
			}
			image.setPadding(5, 0, 5, 20);
			mTipLinearLayout.addView(image);
		}
		// 点点放置在屏幕下方
		mTipLinearLayout.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
		addView(mTipLinearLayout);
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			
			startX = event.getX();
			
			break;
		case MotionEvent.ACTION_UP:
			
			endX = event.getX();
			// 先保存上一个点
			ImageView lastTipImageView = (ImageView) mTipLinearLayout.getChildAt(currentAdImgIndex);
			
			if(currentAdImgIndex > 0 && endX > startX){// 查看前一页的广告

				mViewFlipper.setInAnimation(left2RightInAnimation);
				mViewFlipper.setOutAnimation(left2RightOutAnimation);
				mViewFlipper.showPrevious();
				currentAdImgIndex--;
				if(currentAdImgIndex < 0){
					currentAdImgIndex = 0;
				}
			}
			
			if(currentAdImgIndex < adImages.length-1 && endX < startX){// 查看后一页的广告

				mViewFlipper.setInAnimation(right2LeftInAnimation);
				mViewFlipper.setOutAnimation(right2LeftOutAnimation);
				mViewFlipper.showNext();
				currentAdImgIndex++;
				if(currentAdImgIndex > adImages.length-1){
					currentAdImgIndex = adImages.length-1;
				}
			}
			
			// 根据currentAdImgIndex改变底部点的状态
			ImageView currTipImageView = (ImageView) mTipLinearLayout.getChildAt(currentAdImgIndex);
			lastTipImageView.setImageResource(R.drawable.point_normal);
			currTipImageView.setImageResource(R.drawable.point_selected);
			
			break;		
		}	
		return true;
	}
}

这个是接口IAdImages，它保存要展示的图片id

/**
 * 图片信息接口
 * @author haozi
 *
 */
public interface IAdImages {

	/**
	 * 广告图片
	 */
	int[] adImages = {
			R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05,
			R.drawable.img06, R.drawable.img07, R.drawable.img08, R.drawable.img09, R.drawable.img10
	};
}

源码下载地址：http://download.csdn.net/detail/hello_haozi/4815524