Android高手进阶教程(二十七)之---基于ViewFlipper实现的自定义新手指引控件.

第一步:新建Android工程ViewFlipperDemo：

第二步:新建AdverView.java代码如下:package com.tutor.viewflipper;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;

/**
* @author frankiewei.
* 广告推荐插件,可以自定义img个数.
*/
public class AdvserView extends FrameLayout {

/**
* 当前索引值.默认第一张图片被选中.
*/
private int mCurrentIndex = 0;

/**
* 上下文.
*/
private Context mContext;

/**
* 点击屏幕的X左边值.
*/
private float startX;

/**
* 设备的宽度.
*/
private int mDisplayWidth;

/**
* 从左到右进入的动画.
*/
private Animation mLeft2RightInAnimation;

/**
* 从左到右出去动画.
*/
private Animation mLeft2RightOutAnimation;

/**
* 从右到左进入动画.
*/
private Animation mRight2LeftInAnimation;

/**
* 从右到左出去动画.
*/
private Animation mRight2LeftOutAnimation;

/**
* 动画播放时间.
*/
private long duration = 1000;

/**
* ViewFlipper控件,继承FrameLayout，图片的容器.
*/
private ViewFlipper mViewFlipper;

/**
* 下面动态生成点点tip的容器.
*/
private LinearLayout mTipLinearLayout;

/**
* 正常点点的Bitmap.
*/
private Bitmap mPointNorBitmap;

/**
* 被选中的点点的Bitmap.
*/
private Bitmap mPointSelBitmap;

/**
* 这里是要显示的广告图片的资源ID，可以自定义个数.
*/
private int[] imgResIds = {R.drawable.test1,R.drawable.test2,R.drawable.test3,
R.drawable.test4,R.drawable.test5};

public AdvserView(Context context) {
super(context);
setupViews();
}

public AdvserView(Context context,AttributeSet attr) {
super(context,attr);
setupViews();
}

private void setupViews(){

mContext = getContext();
mDisplayWidth = getResources().getDisplayMetrics().widthPixels;

mViewFlipper = new ViewFlipper(mContext);
mTipLinearLayout = new LinearLayout(mContext);

mPointNorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.point_normal);

mPointSelBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.point_selected);

//将广告图片加入ViewFlipper.
for(int i = 0; i < imgResIds.length; i++){
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(imgResIds[i]);
mViewFlipper.addView(imageView);
}
//将点点动态加入Linerlayout.
for(int j = 0; j < imgResIds.length; j++){
ImageView imageview = new ImageView(mContext);
if(j == 0){
imageview.setImageBitmap(mPointSelBitmap);
}else{
imageview.setImageBitmap(mPointNorBitmap);
}

mTipLinearLayout.addView(imageview);
}
addView(mViewFlipper);
addView(mTipLinearLayout);
mTipLinearLayout.setGravity(Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);

//初始化动画.
mLeft2RightInAnimation = new TranslateAnimation(-mDisplayWidth, 0, 0, 0);
mLeft2RightInAnimation.setDuration(duration);
mLeft2RightOutAnimation = new TranslateAnimation(0, mDisplayWidth, 0, 0);
mLeft2RightOutAnimation.setDuration(duration);

mRight2LeftInAnimation = new TranslateAnimation(mDisplayWidth, 0, 0, 0);
mRight2LeftInAnimation.setDuration(duration);
mRight2LeftOutAnimation = new TranslateAnimation(0, -mDisplayWidth, 0, 0);
mRight2LeftOutAnimation.setDuration(duration);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
case MotionEvent.ACTION_UP:
ImageView lastSelImageView = (ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);
//判断左右滑动切换图片.
if(event.getX() > startX){
mViewFlipper.setInAnimation(mLeft2RightInAnimation);
mViewFlipper.setOutAnimation(mLeft2RightOutAnimation);
mViewFlipper.showNext();
mCurrentIndex++;
if(mCurrentIndex > imgResIds.length -1){
mCurrentIndex = 0;
}

}else if(event.getX() < startX){
mViewFlipper.setInAnimation(mRight2LeftInAnimation);
mViewFlipper.setOutAnimation(mRight2LeftOutAnimation);
mViewFlipper.showPrevious();
mCurrentIndex--;
if(mCurrentIndex < 0){
mCurrentIndex = imgResIds.length -1;
}
}
ImageView imageview = (ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);
imageview.setImageBitmap(mPointSelBitmap);
lastSelImageView.setImageBitmap(mPointNorBitmap);
break;
default:
break;
}
return true;
}
}


第三步:修改ViewFlipperDemoActivity.java代码如下:

package com.tutor.viewflipper;

import android.app.Activity;
import android.os.Bundle;

public class ViewFlipperDemoActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new AdvserView(this));
}
}

第四步:运行效果如下:
 

原文：http://blog.csdn.net/android_tutor/article/details/7667369