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);// 添加到ViewFlipperViewFlipperRollView.this.addView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));}}}@Overridepublic boolean onTouch(View v, MotionEvent event) {super.onTouchEvent(event);return   mGestureDetector.onTouchEvent(event);}@Overridepublic 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 {
    @Overridepublic boolean onDown(MotionEvent e) {setClickable(true);return super.onDown(e);}@Overridepublic 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;@Overrideprotected 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);}@Overridepublic 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 {
    @Overridepublic int getCount() {return imgBeens.size();}@Overridepublic 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里的下一个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