Android ViewFlipper翻转视图的基本使用

前言：

ViewFlipper，它是Android自带的一个多页面管理控件，且可以自动播放！和ViewPager不同，ViewPager是一页页的，而ViewFlipper则是一层层的，和ViewPager一样，很多时候，用来实现进入应用后的引导页，或者用来图片轮播，本次实现图片轮播功能。

一、为ViewFlipper加入View的两种方式

1、静态导入

所谓的静态导入就是像图片这样，把个个页面添加到ViewFlipper的中间！

<ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000"><!--每隔3秒切换一个view-->
        <include layout="@layout/page1"/>
        <include layout="@layout/page2"/>
        <include layout="@layout/page3"/>
        <include layout="@layout/page"/>
    </ViewFlipper>

2、动态导入

通过addView()方法填充View。

viewFlipper=findViewById(R.id.viewFlipper);
viewFlipper.addView(v1);
viewFlipper.addView(v2);
viewFlipper.addView(v3);
viewFlipper.addView(v4);
viewFlipper.startFlipping();

二、常用方法

setInAnimation():设置View进入屏幕时使用的动画
setOutAnimation():设置View退出屏幕时使用的动画
showNext():调整该方法来显示ViewFlipper里的下一个View
showPrevious():调整该方法来显示ViewFlipper里的上一个View
setFilpInterval():设置View之间切换的时间间隔
setFlipping():使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
stopFlipping():停止View切换

三、实例Demo

1、静态导入，使用ViewFlipper实现图片轮播

实现效果：

实现代码：

首先添加四个子布局，每个布局都添加ImageView控件，不贴了吧！

动画anim实现向左翻转：

right_in.xml:

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

View层主布局activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000"><!--每隔3秒切换一个view-->
        <include layout="@layout/page1"/>
        <include layout="@layout/page2"/>
        <include layout="@layout/page3"/>
        <include layout="@layout/page"/>
    </ViewFlipper>

</LinearLayout>

Control层MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;//翻转视图类
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper=findViewById(R.id.view_flipper);
        viewFlipper.startFlipping();//开启viewFlipper
    }
}

2、动态导入，支持手势滑动的ViewFlipper

实现效果图：

实现代码：应为可以左右滑动，因此需要添加两个向右的动画。

left_in.xml:

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

left_out.xml:

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

Control层 DynamicViewFlipperActivity.java：

public class DynamicViewFlipperActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private int[] resId={R.mipmap.nature,R.mipmap.sun,R.mipmap.waterfall,R.mipmap.flowers};
    private final static  int MIN_MOVE=200;//最小距离
    private GestureDetector mDetector;//识别一些基本的触摸手势
    private MyGestureListener myGestureListener;//触摸手势监听
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dynamic_view_flipper);
        init();
    }
    private void init(){
        viewFlipper=findViewById(R.id.viewFlipper);
        myGestureListener=new MyGestureListener();
        mDetector=new GestureDetector(this,myGestureListener);
        for (int i=0;i<resId.length;i++){
            viewFlipper.addView(getImageView(resId[i]));
        }
    }
    //重写onTouchEvent触发MyGestureListener里的方法
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mDetector.onTouchEvent(event);
    }
    //获取图片
    private ImageView getImageView(int resId){
        ImageView image=new ImageView(this);
        image.setImageResource(resId);
        return image;
    }
    //自定义一个GestureListener,这个是View类下的
    private class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
        //onFling():鼠标手势相当于一个向量（当然有可能手势是曲线），e1为向量的起点，e2为向量的终点，
        // velocityX为向量水平方向的速度，velocityY为向量垂直方向的速度
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            if(e1.getX()-e2.getX()>MIN_MOVE){
                viewFlipper.setInAnimation(DynamicViewFlipperActivity.this,R.anim.right_in);
                viewFlipper.setOutAnimation(DynamicViewFlipperActivity.this,R.anim.right_out);
                viewFlipper.showNext();
            }else if (e2.getX()-e1.getX()>MIN_MOVE){
                viewFlipper.setInAnimation(DynamicViewFlipperActivity.this,R.anim.left_in);
                viewFlipper.setOutAnimation(DynamicViewFlipperActivity.this,R.anim.left_out);
                viewFlipper.showPrevious();
            }
            return true;
        }
    }
}

问题：图片不能全屏显示

解决办法：让类继承Activity，而不是AppCompatActivity(v7包下）；在Android配置文件application中添加Android自带主题：

android:theme="@android:style/Theme.NoTitleBar"