2-5-5 ViewFlipper

标注：本文为个人学习使用，仅做自己学习参考使用，请勿转载和转发
2018-06-22: 初稿。参考博主coder-pig

0. 引言

• 该组件ViewFlipper为Android自带的多页面管理控件，且可以自动播放。
• ViewPager是一页一页的，而ViewFlipper则是一层一层的。
• 和ViewPager一样，很多时候，用来实现进入应用后的引导页，或者用于图片轮播。
• 官方的API：ViewFlipper

1. ViewFlipper加入View的两种方法

1.1 静态导入

• 静态导入指的是，直接在代码中将界面添加到ViewFlipper中。

  
  

1.2 动态导入

• 通过addView方法填充view

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

2. 常用的方法

    // 设置View进入屏幕时使用的动画
1. setInAnimation：
    // 设置View退出屏幕时使用的动画
2. setOutAnimation：
    // 调用该方法来显示ViewFlipper里的下一个View
3. showNext：
    // 调用该方法来显示ViewFlipper的上一个View
4. showPrevious：
    // 设置View之间切换的时间间隔
5. setFilpInterval：
    // 使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
6. setFlipping：
    // 停止View切换
7. stopFlipping： 

3. 应用示例

3.1 ViewFlipper实现图片轮播

• 采用静态导入
  实现效果图：
  
• 实现代码
  每个页面的布局都是一个简单的ImageView，这里就不贴了~先贴下两个进入以及 离开的动画：
  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>

• 然后是activity_main.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=".MainActivity">

    <ViewFlipper
        android:id="@+id/vflp_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">

        <include layout="@layout/page_help_one" />
        <include layout="@layout/page_help_two" />
        <include layout="@layout/page_help_three" />
        <include layout="@layout/page_help_four" />

    </ViewFlipper>

</RelativeLayout>

• 这里我们设置了flipInterval = 3000，即每隔3000ms切还一个~ 最后我们只需在MainActivity.java中调用ViewFlipper的startFlipping()方法开始滑动！
  MainActivity.java：

public class MainActivity extends AppCompatActivity {

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

3.2 ViewFliper 实现手势滑动

• 采用动态导入
  实现效果图：
  
• 代码实现：
  因为我们分为进入上一页，进入下一页，所以除了上面的两个动画外，我们再添加两个动画：
  left_in.xml：

• left_out.xml：

• MainActivity.java：

代码要点解析：

1. 这里我们通过动态的方法添加View，这里只是简单的ImageView，可根据自己需求进行扩展！

2. 相信细心的你发现了，这里我们的手势用的不是通过onTouchEvent直接判断的，然后重写 onTouch事件，对Action进行判断，然后如果是MotionEvent.ACTION_MOVE的话，就执行下述代码：

   
   

3. 后来发现，模拟器上因为是鼠标的关系，并不会频繁的抖动，而真机上，因为手指一直是颤抖的 所以ACTION_MOVE会一直触发，然后View一直切换，后来加入了 一个值来进行判断，就是添加一个标志：

   
   
4. 可以是可以，不过感觉还是有点不流畅，怪怪的，后来想想还是用手势类，直接在onFling处理 就好，于是就有了上面的代码，运行起来杠杠滴~ 当然，如果你对Gesture手势不熟悉的话，可以参见之前写过的一篇文章： Android基础入门教程——3.8 Gesture(手势)