Android之ViewFlipper的简单使用

你们都使用过ViewPager，可是ViewPager还有一个兄弟，那就是ViewFlipper。二者的名字很是类似，咱们能够将ViewPager理解成“一页一页的视图”，ViewFlipper则是“快速翻转的视图”，但后者的使用率却远不及前者，不过这并不意味着ViewFlipper就弱了。如今咱们就来拜访一下常常被冷落的ViewFlipper。

一、建立工程及页面视图布局

在Android Studio中新建一个工程，实现这样一个效果：建立红、橙、绿、蓝四种颜色的页面，而后经过ViewFlipper让它们来回切换。四个页面布局文件的名称以下所示：

item_view1.xml的代码以下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@android:color/holo_red_light"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

另外三个布局的代码只要把背景色换掉就能够了。

二、添加布局至ViewFlipper

页面建立好了，那咱们怎么把它放置到ViewFlipper中呢？很简单，ViewFlipper支持include标签添加页面，咱们只需在activity_main.xml中将四个布局依次include进去便可。

直接运行就能够看到下面的效果了：

除了直接在布局文件中添加页面外，也能够在代码中添加，把activity_mai.xml中include标签注释掉，而后在MainActivity中初始化ViewFlipper以后再添加以下的代码：

//要添加的页面布局ID
    private int viewIds[] = {R.layout.item_view1, R.layout.item_view2, R.layout.item_view3, R.layout.item_view4};
    /**
     * 将页面添加进ViewFlipper
     */
    private void addViews() {
        View itemView;
        for (int viewId : viewIds) {
            itemView = View.inflate(this,viewId,null);
            viewFlipper.addView(itemView);
        }
    }

而后在onCreate中调用addViews方法便可。

三、添加页面切换动画

页面切换的效果咱们是实现了，可是没有变化过程，看起来太生硬了，累眼睛。若是能有动画效果的话就会舒服不少。这里，咱们就要用到两个新属性了：

• inAnimation：视图进入时的动画效果

• outAnimation：视图退出时的动画效果
  这两个属性也能够在代码中设置的，稍后咱们会用到。如今，咱们就建立所须要的动画文件。好比，我想要实现左右循环滑动的动画效果，那么就能够分红两种状况来讨论：一种是新的视图从左边进入，原有的视图从右边退出，即从左往右滑动；另外一种是新视图从右边进入，原有的视图从左边退出，即从右往左滑动。弄清楚全部的动画效果以后，咱们就在res文件夹下新建一个anim文件夹，建立以下以下四种动画效果：

left_in.xml
视图从左边进入界面的动画：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%p"
        android:toXDelta="0"/>
</set>

left_out.xml
视图从左边退出界面的动画：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p"/>
</set>

right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0"/>
</set>

right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p"/>
</set>

如今咱们先来试试从左往右转的动画效果。在布局中给ViewFlipper加上以下的属性:

android:inAnimation="@anim/left_in"
        android:outAnimation="@anim/right_out"

运行一下，就能够实现从左往右滑动的动画效果了（GIF图有点失真，不过效果是没问题的）。

相信不用我说，你也知道怎么让它从右往左滑动了吧？

四、手指左右滑屏一（使用触摸监听事件实现）

看着画面自顾自地滑动，是否是心痒痒的？不要紧，下面咱们就来让它响应咱们手指的滑动。在此以前，先作点准备工做：前往布局文件，去掉动画属性，并将autoStart属性设为false。

要让它遵从“指挥”，咱们能够先继承OnTouchListener接口，而后实现onTouch方法：

private float startX; //手指按下时的x坐标
    private float endX; //手指抬起时的x坐标
    private float moveX = 100f; //判断是否切换页面的标准值
    /**
     * 触摸监听事件
     * @param v
     * @param event
     * @return
     */
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //手指按下时获取起始点坐标
                startX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                //手指抬起时获取结束点坐标
                endX = event.getX();
                //比较startX和endX，判断手指的滑动方向
                if (endX - startX > moveX) { //手指从左向右滑动
                    viewFlipper.setInAnimation(this, R.anim.left_in);
                    viewFlipper.setOutAnimation(this, R.anim.right_out);
                    viewFlipper.showPrevious();
                } else if (startX - endX > moveX) { //手指向右向左滑动
                    viewFlipper.setInAnimation(this, R.anim.right_in);
                    viewFlipper.setOutAnimation(this, R.anim.left_out);
                    viewFlipper.showNext();
                }
                break;
        }
        return true;
    }

上面的代码不难，注释也写得比较清楚了。整体的思路就是获取手指按下和抬起时的坐标，而后判断是向左仍是向右滑动。值得注意的是showPrevious和showNext方法，前者是显示上一个视图，后者则是显示后一个视图。最后还要记住，返回值要改成true，不然触摸事件是没法响应的。

效果图以下，能够向左，也能够向右。

五、手指左右滑屏二（使用手势监听事件实现）

除了触摸监听事件以外，咱们也能够用手势监听事件OnGestureListener实现一样的效果，但继承了该接口以后要实现一连串的方法，代码一会儿膨胀起来了，而咱们须要的只是其中一个方法啊。好在Android还提供了一个类SimpleOnGestureListener，这样咱们只要自定义一个类继承它，而后实现咱们须要的方法就能够了：

//建立手势监听器
    GestureDetector gestureDetector = new GestureDetector(this, new MyGestureListener());

    /**
     * 自定义手势监听类
     */
    class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            if (e2.getX() - e1.getX() > moveX){
                viewFlipper.setInAnimation(MainActivity.this, R.anim.left_in);
                viewFlipper.setOutAnimation(MainActivity.this, R.anim.right_out);
                viewFlipper.showPrevious();
            } else if (e2.getX() - e1.getX() < moveX){
                viewFlipper.setInAnimation(MainActivity.this, R.anim.right_in);
                viewFlipper.setOutAnimation(MainActivity.this, R.anim.left_out);
                viewFlipper.showNext();
            }
            return true;
        }
    }

这里的onFling方法得解释一下，它表示的是手指在屏幕上移动而后松开的手势，也就是滑动。前面两个参数分别表示手指按下和松开时的事件，经过它们的对象去调用getX()方法就能够获取滑动先后的坐标了。后面的步骤就跟咱们在触摸事件里面的同样，相信你能理解的。

我一开始觉得到这里就大功告成了，可运行以后却纹丝不动！仔细查看文档，发现还必须到触摸监听方法中调用onTouchEvent方法才行，不然触摸事件不会起做用的。

@Override
    public boolean onTouch(View v, MotionEvent event) {
        gestureDetector.onTouchEvent(event);
        return true;
    }

六、后记

ViewFlipper的用法就告一段落了，写这篇文章的时候我还顺便复习了手势监听事件等知识，也但愿你能有所收获。下面是源码：
ViewFlipperDemo

七、参考文章

谷歌官方文档之ViewFlipper
Android的手势操做识别