Android ViewFlipper用法浅析

在Android应用开发中，我们经常会需要实现左右切换视图的功能，这通常需要在LinearLayout、RelativeLayout等布局中添加ImageView来实现。如果每次只需展示一张图片，并可以通过左右滑动屏幕来显示前一张或者后一张图片，就可以通过ViewFlipper或者ViewSwitcher来实现。滑动的手势检测主要通过MotionEvent类来实现，但在本文中是由GestureDetector类来实现的。

当我们需要在两个或更多个视图间滑动显示时，ViewFlipper类通常是最好的选择。使用ViewFlipper需在布局文件中添加相应的ViewFlipper内容：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
    </ViewFlipper>

</RelativeLayout>

可以通过两种方式向ViewFlipper中添加子视图：

> 在布局资源内添加

> 程序化添加

在下面的示例中采用第二种方式。

接下来在Activity中向ViewFlipper程序化添加图片：

public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private GestureDetector gestureDetector;

    int[] resources = {
            R.drawable.one,
            R.drawable.two,
            R.drawable.three,
            R.drawable.four,
            R.drawable.five,
            R.drawable.six
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);

        for (int i = 0; i < resources.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(resources[i]);
            viewFlipper.addView(imageView);
        }
    }
}

至此，运行APP可以看到会显示第一张图片，但滑动屏幕并不能显示其他图片。下面，我们用GestureDetector类来检测滑动动作，首先需要自定义一个继承了SimpleOnGestureListener的类，在其中判断滑动方向并显示相应图片：

class CustomGestureDetector extends GestureDetector.SimpleOnGestureListener {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (e1.getX() > e2.getX()) { //如果初始触点的X坐标比最终触点的X坐标大表示向左滑动
            viewFlipper.showNext();
        }

        if (e1.getX() < e2.getX()) { //如果初始触点的X坐标比最终触点的X坐标小表示向右滑动
            viewFlipper.showPrevious();
        }

        return super.onFling(e1, e2, velocityX, velocityY);
    }
}

最后通过简单代码在onCreate()方法内初始化改监听方法：

CustomGestureDetector customGestureDetector = new CustomGestureDetector();
gestureDetector = new GestureDetector(this, customGestureDetector);

并在onTouchEvent()回调中实现getstureDetector.onTouchEvent(event);

@Override
public boolean onTouchEvent(MotionEvent event){
    gestureDetector.onTouchEvent(event);

    return super.onTouchEvent(event);
}

此外，还可以通过ViewFlipper为图片切换增加动画效果：

viewFlipper.setInAnimation(this, android.R.anim.fade_in);
viewFlipper.setInAnimation(this, android.R.anim.fade_out);

如果希望应用能够自动切换图片，还可以通过ViewFlipper设置图片自动播放和播放时间：

viewFlipper.setAutoStart(true);
viewFlipper.setFlipInterval(2000);

参考：

http://codetheory.in/android-viewflipper-and-viewswitcher/