ViewFlipper 简单封装与使用

来源：互联网发布：idc 2012年手机数据编辑：程序博客网时间：2024/05/29 13:27

ViewFlipper 这个控件自带属性无限翻页，和自动轮播，我们可以来简单学习这个空间的特性，在某些开发场合中会用到。

我这个项目要现实现的效果就是，无限左右滑动，当滑到最后一张的时候，下一张就是第一张，还有点击事件

效果：
这里写图片描述

package com.test.scrolltransptoolbar;import android.content.Context;import android.util.AttributeSet;import android.util.Log;import android.util.TypedValue;import android.view.GestureDetector;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.animation.AnimationUtils;import android.widget.ViewFlipper;/** * Created by Administrator on 2017/9/5. */public class ViewFlipperRollView extends ViewFlipper implements View.OnTouchListener, View.OnClickListener {    private Context context;    private GestureDetector mGestureDetector;    private ViewFlipperRollAdater adapter;    private LayoutInflater inflater;    public static final int FLING_MIN_DISTANCE = 80;    public static final int FLING_MIN_VELOCITY = 120;    private  boolean  isFlag=false;    public ViewFlipperRollView(Context context) {        super(context);    }    public ViewFlipperRollView(Context context, AttributeSet attrs) {        super(context, attrs);        this.context = context;        init();    }    private void init() {        inflater = LayoutInflater.from(context);        mGestureDetector = new GestureDetector(new simpleGestureListener());        setOnTouchListener(this);    }    private int dp2px(float dpValue) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,                dpValue,                context.getResources().getDisplayMetrics());    }    public void setAdapter(ViewFlipperRollAdater adapter) {        this.adapter = adapter;        if (adapter != null) {            removeAllViews();            int count = adapter.getCount();            for (int i = 0; i < count; i++) {                View view = adapter.getView(i, this,inflater);                view.setOnClickListener(this);                view.setTag(i);                // 添加到ViewFlipper                ViewFlipperRollView.this.addView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));            }        }    }    @Override    public boolean onTouch(View v, MotionEvent event) {        super.onTouchEvent(event);        return   mGestureDetector.onTouchEvent(event);    }    @Override    public void onClick(View v) {       int position= (int) v.getTag();        if (mOnNoticeClickListener != null) {            if (!isFlag)            {                mOnNoticeClickListener.onNotieClick(position);            }else {                isFlag=false;            }        }    }        private void ToRightAnimation() {        clearAnimation();        setInAnimation(AnimationUtils.loadAnimation(context, R.anim.right_notify_in));        setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.right_notify_out));    }    private void ToLeftAnimation() {        clearAnimation();        setInAnimation(AnimationUtils.loadAnimation(context, R.anim.horizontal_notify_in));        setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.horizontal_notify_out));    }    private class simpleGestureListener extends GestureDetector.SimpleOnGestureListener {        @Override        public boolean onDown(MotionEvent e) {      setClickable(true);            return super.onDown(e);        }        @Override        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {            setClickable(false);            if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                // 当像左侧滑动的时候                ToLeftAnimation();                showNext();                isFlag=true;            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                // 当像右侧滑动的时候                ToRightAnimation();                showPrevious();                isFlag=true;            }else {                isFlag=false;            }            return false;        }    }    public interface ViewFlipperRollAdater {        int getCount();        View getView(int i, ViewFlipperRollView viewFlipperRollView, LayoutInflater inflater);    }    /**     * 通知点击监听接口     */    public interface OnNoticeClickListener {        void onNotieClick(int position);    }    private OnNoticeClickListener mOnNoticeClickListener;    /**     * 设置通知点击监听器     *     * @param onNoticeClickListener 通知点击监听器     */    public void setOnNoticeClickListener(OnNoticeClickListener onNoticeClickListener) {        mOnNoticeClickListener = onNoticeClickListener;    }    public boolean dispatchTouchEvent(MotionEvent ev){        //先执行滑屏事件        mGestureDetector.onTouchEvent(ev);        super.dispatchTouchEvent(ev);        return true;    }}

使用

package com.test.scrolltransptoolbar;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2017/9/5. */public class ViewFlipperRollActivity extends Activity implements ViewFlipperRollView.OnNoticeClickListener {    private List<ImgBean> imgBeens;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_viewflipper_roll);        ViewFlipperRollView  vf = (ViewFlipperRollView) findViewById(R.id.vf);        imgBeens = getList();        vf.setAdapter(new MyAdater());        vf.setOnNoticeClickListener(this);    }    @Override    public void onNotieClick(int position) {        Toast.makeText(ViewFlipperRollActivity.this,"position"+position,Toast.LENGTH_LONG).show();    }    public List<ImgBean> getList() {        List<ImgBean>  imgBeen=new ArrayList<>();        imgBeen.add(new ImgBean(R.mipmap.img1,"美女"));        imgBeen.add(new ImgBean(R.mipmap.img2,"西斯美女"));        imgBeen.add(new ImgBean(R.mipmap.img3,"漂亮美女"));        imgBeen.add(new ImgBean(R.mipmap.img4,"混血美女"));        imgBeen.add(new ImgBean(R.mipmap.img5,"韩国美女"));        imgBeen.add(new ImgBean(R.mipmap.img6,"日本美女"));        return imgBeen;    }    private class MyAdater implements ViewFlipperRollView.ViewFlipperRollAdater {        @Override        public int getCount() {            return imgBeens.size();        }        @Override        public View getView(int i, ViewFlipperRollView viewFlipperRollView, LayoutInflater inflater) {           View  view= inflater.inflate(R.layout.item_vf,null);          ImageView  iv= (ImageView) view.findViewById(R.id.iv);           TextView  tv= (TextView) view.findViewById(R.id.tv);            ImgBean  imgBean=imgBeens.get(i);            iv.setBackgroundResource(imgBean.img);            tv.setText(imgBean.shuoming);            return view;        }    }}

可以看到我们通过暴露一个接口，来让用户自定义布局。

 public interface ViewFlipperRollAdater {        int getCount();        View getView(int i, ViewFlipperRollView viewFlipperRollView, LayoutInflater inflater);    }

将触摸事件，交给GestureDetector手势

    mGestureDetector = new GestureDetector(new simpleGestureListener());

在simpleGestureListener中来处理，翻页逻辑

 if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                // 当像左侧滑动的时候                ToLeftAnimation();                showNext();                isFlag=true;            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {                // 当像右侧滑动的时候                ToRightAnimation();                showPrevious();                isFlag=true;            }else {                isFlag=false;            }

如果我们需要需要翻页，然后再加上点击事件，这个时候就会有一个问题：
ViewFlipper的onClick和onTouch的冲突事件

如何解决：

1：在onDown中设置this.flipper.setClickable(true); 然后在onFling方法中this.flipper.setClickable(false);2：public boolean onTouchEvent(MotionEvent event) {    // 执行touch 事件    super.onTouchEvent(event);    return this.detector.onTouchEvent(event);}//这个方法会先执行，当返回为true时，才执行onTouchEvent 方法public boolean dispatchTouchEvent(MotionEvent ev){    //先执行滑屏事件    detector.onTouchEvent(ev);    super.dispatchTouchEvent(ev);    return true;}

ViewFlipper 的方法说明

setInAnimation：设置View进入屏幕时使用的动画setOutAnimation：设置View退出屏幕时使用的动画showNext：调用该方法来显示ViewFlipper里的下一个ViewshowPrevious：调用该方法来显示ViewFlipper的上一个ViewsetFilpInterval：设置View之间切换的时间间隔setFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行stopFlipping：停止View切换

二、手势滑屏

手势滑动屏幕动画，是通过android.view.GestureDetector类检测各种手势事件实现的，该类有两个回调接口（Interface）

A、GestureDetector.OnDoubleTapListener，用来通知DoubleTap双击事件，类似于鼠标的双击事件，接口三个抽象回调函数如下
1、onDoubleTap(MotionEvent e)：DoubleTap双击手势事件后通知（触发）

2、onDoubleTapEvent(MotionEvent e)：DoubleTap双击手势事件之间通知（触发），包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件，这两个事件由该函数通知）

3、onSingleTapConfirmed(MotionEvent e)：用来判定该次点击是SingleTap而不是DoubleTap，如果连续点击两次就是DoubleTap手势；那么如果只点击一次，系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap，此时触发的就是SingleTapConfirmed事件

B、GestureDetector.OnGestureListener，用来通知普通的手势事件（down、longPress、scroll、up等），接口具体的六个抽象回调函数如下

1、onDown(MotionEvent e)：down事件，表示按下事件

2、onSingleTapUp(MotionEvent e)：一次点击up事件，表示按下后的抬起事件

3、onShowPress(MotionEvent e)：down事件发生而move或则up还没发生前触发该事件，此事件一般用于通知用户press按击事件已发生

4、onLongPress(MotionEvent e)：长按事件，down事件后up事件前的一段时间间隔后（由系统分配，也可自定义），如果仍然按住屏幕则视为长按事件

5、onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑动手势事件，例如scroll事件后突然up，fling的速度大小由e每秒x和y改变大小决定

6、onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件，即down按下点——scroll拖动——up抬起点的move移动事件

本示例的滑动屏幕动画，仅用到了上面的GestureDetector.OnGestureListener及其onFling事件，具体实现步骤如下：
1、Activity实现android.view.GestureDetector.OnGestureListener 监听接口，并声明gestureDetector = new GestureDetector(this); 用于监听手势事件
2、在Activity的成员函数onTouchEvent(MotionEvent event)中，注册GestureDetector.OnGestureListener手势监听的gestureDetector.onTouchEvent(event);事件接口
3、在GestureDetector.OnGestureListener回调函数onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) 中，实现滑屏动画

参考大神：
http://smallwoniu.blog.51cto.com/3911954/1308959

阅读全文

0 0