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;          }  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);}@Overridepublic 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;}[java] view plaincopyprint?        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