ViewFlipper+ImageView实现切换动画

效果图：

先建立布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.viewflipperapplication.MainActivity">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/m3"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/m2"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/m1"/>

            <Button
                android:id="@+id/btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="立即使用"
                android:textSize="24dp"
                android:padding="20dp"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>
    </ViewFlipper>

</LinearLayout>

然后是MainActivity：

public class MainActivity extends AppCompatActivity {
    private ViewFlipper myFlipper;
    private float startX; //手指按下时的x坐标
    private float endX; //手指抬起时的x坐标
    private float moveX = 100F; //判断是否切换页面的标准值
    private Button myBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化flipper
        myFlipper = (ViewFlipper) findViewById(R.id.flipper);

//使用触摸监听事件实现
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();//手指按下时的X坐标
                break;
            case MotionEvent.ACTION_UP:
                endX = event.getX();//手指抬起时的X坐标
                if(startX-endX> moveX){//向左滑
                    myFlipper.setInAnimation(this,R.anim.right_in);
                    myFlipper.setOutAnimation(this,R.anim.left_out);
                    myFlipper.showNext();
                }
                if(endX - startX > moveX){//向右滑
                    myFlipper.setInAnimation(this,R.anim.left_in);
                    myFlipper.setOutAnimation(this,R.anim.right_out);
                    myFlipper.showPrevious();
                }
                break;
        }
        return super.onTouchEvent(event);
    }
}

这里需要注意还有四个布局文件，在在Android Studio的res中创建如下图的文件：

第一个文件名为left_in.xml

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

第二个文件名为left_out.xml

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

第三个文件名为right_in.xml

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

其中：
fromXDelta 属性为动画起始时 X坐标上的位置
toXDelta 属性为动画结束时 X坐标上的位置
fromYDelta 属性为动画起始时 Y坐标上的位置
toYDelta 属性为动画结束时 Y坐标上的位置

duration 属性为动画持续时间 （ 时间以毫秒为单位）

在这些属性里面还可以加上%和p,例如:

android:toXDelta=”100%”,表示自身的100%,也就是从View自己的位置开始。

android:toXDelta=”80%p”,表示父层View的80%,是以它父层View为参照的。