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

分手后的思念是犯贱 2022-06-11 09:41 267阅读 0赞

第一步:新建Android工程ViewFlipperDemo：

![1339755782_8559.jpg][]

第二步:新建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));
        }
    }

第四步:运行效果如下:

![1339755910_8008.jpg][] ![1339755917_4960.jpg][]

[1339755782_8559.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755782_8559.jpg
[1339755910_8008.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755910_8008.jpg
[1339755917_4960.jpg]: https://img-my.csdn.net/uploads/201206/15/1339755917_4960.jpg