ViewFlipper 简单封装与使用

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

2public 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里的下一个View
showPrevious:调用该方法来显示ViewFlipper的上一个View
setFilpInterval:设置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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值