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

第一步:新建Android工程ViewFlipperDemo：

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

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

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));    }}

第四步:运行效果如下:

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

更多相关文章

随机推荐