ViewFlipper实现图片的轮播

之前一直使用ViewPager进行图片的轮播实现，今天看慕课网的视频才发现还有这样的控件可以实现图片的轮播。

首先使用ViewFlipper进行基本的图片切换，在xml中我们可以直接定义ViewFlipper的属性和其中的具体图片。

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/t1" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/t2" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/t3" />

    </ViewFlipper>

在Activity中通过findViewById获取控件后，我们只需要设置图片切换的间隔时间与开始切换就可以实现最基本的效果。

        viewFlipper = (ViewFlipper)findViewById(R.id.view_flipper);
        viewFlipper.setFlipInterval(2000);
        viewFlipper.startFlipping();

这时图片只是生硬的一张张的切换，我们可以通过设置动画来实现图片切换时进出的效果。

对动画的设置可以通过xml和代码两种方式，在ViewFlipper中提供两个方法来设置进出的动画，分别是setInAnimation和setOutAnimation。

现在我们需要在图片切换时设置进出的动画效果，即当前图片平移出左侧屏幕，下张图片从右侧屏幕平移进入。

        TranslateAnimation inAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        inAnim.setDuration(1000);

        TranslateAnimation outAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        outAnim.setDuration(1000);

        viewFlipper.setInAnimation(inAnim);
        viewFlipper.setOutAnimation(outAnim);

在这里将动画的时长设置为1000ms，然后设置图片进出的动画效果，我们可以发现现在图片的切换就拥有了我们需要的循环轮播效果。

最后，我们需要实现通过手指的滑动来控制图片的循环播放。

首先需要向左滑动和向右滑动时的两种不同情况的动画。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);

        // 图片从右侧滑入
        rightInAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        rightInAnim.setDuration(1000);

        // 图片从左侧滑出
        leftOutAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        leftOutAnim.setDuration(1000);

        // 图片从右侧滑出
        rightOutAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        rightOutAnim.setDuration(1000);

        // 图片从左侧滑入
        leftInAnim = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -1.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f,
                Animation.RELATIVE_TO_PARENT, 0.0f);
        leftInAnim.setDuration(1000);

        // 正常情况左侧划出，右侧滑入
        viewFlipper.setOutAnimation(leftOutAnim);
        viewFlipper.setInAnimation(rightInAnim);

        viewFlipper.setFlipInterval(2000);
        viewFlipper.startFlipping();
    }

并在初始情况下默认设置为右侧滑入，左侧划出。我们通过手指的滑动来改变图片滚动的方向。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                viewFlipper.stopFlipping();// 当手指按下时，停止图片的循环播放。并记录当前x坐标
                currentX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                if (event.getX() - currentX > 100) { // 手指向右滑动，左侧滑入，右侧滑出
                    viewFlipper.setInAnimation(leftInAnim);
                    viewFlipper.setOutAnimation(rightOutAnim);
                    viewFlipper.showPrevious();
                    viewFlipper.startFlipping();
                } else if (currentX - event.getX() > 100) {// 手指向左滑动，右侧滑入，左侧滑出
                    viewFlipper.setInAnimation(rightInAnim);
                    viewFlipper.setOutAnimation(leftOutAnim);
                    viewFlipper.showNext();
                    viewFlipper.startFlipping();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

对onTouchEvent方法进行重写，当手指按下时，停止图片的循环滚动，用变量currentX记录按下的位置，再当手指抬起时根据当前的x坐标与currentX的值进行对比，改变viewFlipper滑动的方向，判断显示前一张或者后一张图片，最后恢复ViewFlipper的滚动。

当手指按下却没有移动相应的距离时，图片轮播会停止。

最后的效果