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

最新推荐文章于 2017-09-05 13:28:07 发布

SpeedyCoder

最新推荐文章于 2017-09-05 13:28:07 发布

阅读量1.1k

点赞数

分类专栏： android 高手进阶教程文章标签： android animation import class float up

android 高手进阶教程专栏收录该内容

122 篇文章

订阅专栏

本文介绍了一种自定义Android广告轮播视图的方法，通过触摸屏幕左右滑动实现图片切换，并利用点点提示当前展示的图片序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第四步:运行效果如下: