ViewFlipper使用详解

一.概述

ViewFlipper是一个切换控件，一般用于图片的切换，当然它是可以添加View的，而不限定只用于ImageView，当然我们也可以自定义View，只是我们经常利用ViewFlipper来实现的是ImageView的切换，如果切换自定义的View，倒还不如使用ViewPager来做。

二.基本实现

先看一下效果图：

1.xml布局

<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"
    tools:context="com.example.viewfliperdemo.MainActivity" >

    <ViewFlipper 
           android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:flipInterval="2000"
        >
        <ImageView 
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ym1"
            />
        <ImageView 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ym2"
              android:scaleType="fitXY"
            />
        <ImageView 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
              android:scaleType="fitXY"
            android:src="@drawable/ym3"
            />
        <ImageView 
            android:layout_width="match_parent"
              android:scaleType="fitXY"
            android:layout_height="match_parent"
            android:src="@drawable/ym4"
            />
    </ViewFlipper>

</RelativeLayout>

在ViewFlipper中，加入四个ImageView控件，其中flipInterval属性是用来设置多少毫秒自动显示下一个示图;

2.JAVA代码

public class MainActivity extends ActionBarActivity {

    private ViewFlipper flipper;

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

通过startFlipping让ViewFlipper自动切换图片。

三.高级实现—–通过手势切换

根据手向左还是向右滑动，切换上一张和下一张图片
布局文件不变。

2.Java代码

public class MainActivity extends Activity {

    private ViewFlipper flipper;
    private GestureDetector detector;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
        detector = new GestureDetector(this,listener);
    }

    SimpleOnGestureListener listener = new SimpleOnGestureListener(){

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            //向右划动
            if(e1.getRawX()<e2.getRawX()&&Math.abs(velocityX)>50){
                //显示上一张图片
                flipper.showPrevious();
            }else if(e1.getRawX()>e2.getRawX()&&Math.abs(velocityX)>50){
                flipper.showNext();
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }
    };
    /**
     * 拦截触摸事件，交给GestureDetector处理
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }
}

四.动态添加图片

上面我们都是把图片写死到ViewFlipper里面的，下面我们看看怎样动态添加图片，此时要用到ViewFlipper的addView方法：

1.xml布局文件

<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"
    tools:context="com.example.viewfliperdemo.MainActivity" >
    <ViewFlipper 
           android:id="@+id/flipper"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:flipInterval="2000"
        >
    </ViewFlipper>
</RelativeLayout>

2.Java代码

public class MainActivity extends Activity {

    private ViewFlipper flipper;
    private GestureDetector detector;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
        detector = new GestureDetector(this,listener);
        flipper.addView(getImageView(R.drawable.ym1));
        flipper.addView(getImageView(R.drawable.ym2));
        flipper.addView(getImageView(R.drawable.ym3));
        flipper.addView(getImageView(R.drawable.ym4));
    }
    private ImageView getImageView(int resId){
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(resId);
        return imageView;
    }
    SimpleOnGestureListener listener = new SimpleOnGestureListener(){

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            //向右划动
            if(e1.getRawX()<e2.getRawX()&&Math.abs(velocityX)>50){
                //显示上一张图片
                flipper.showPrevious();
            }else if(e1.getRawX()>e2.getRawX()&&Math.abs(velocityX)>50){
                flipper.showNext();
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }
    };
    /**
     * 拦截触摸事件，交给GestureDetector处理
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }
}