一手遮天 Android

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - view（集合类）: ViewFlipper 基础

示例如下:

/view/collection/ViewFlipperDemo1.java

/**
 * ViewFlipper - 页面翻页控件
 *
 * 本例介绍了如何让 ViewFlipper 自动翻页，以及如何通过手势操作翻页 ViewFlipper
 */

package com.webabcd.androiddemo.view.collection;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

import com.webabcd.androiddemo.R;

public class ViewFlipperDemo1 extends AppCompatActivity {

    // 用于演示 ViewFlipper 的自动翻页
    private ViewFlipper mViewFlipper1;
    // 用于演示 ViewFlipper 的手势操作翻页
    private ViewFlipper mViewFlipper2;

    // 用于保存手指触摸屏幕时的 x 坐标
    private float mStartTouchX;

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

        mViewFlipper1 = findViewById(R.id.viewFlipper1);
        mViewFlipper2 = findViewById(R.id.viewFlipper2);

        sample();
    }

    private void sample() {
        /**
         * addView() - 为 ViewFlipper 添加一个子 view
         * setFlipInterval() - 翻页动画的间隔时间，单位：毫秒
         * setInAnimation() - 进入的动画
         * setOutAnimation() - 离开的动画
         * startFlipping() - 启动动画（默认是不会启动动画的）
         * stopFlipping() - 停止动画
         */
        mViewFlipper1.setFlipInterval(3000);
        mViewFlipper1.setInAnimation(this, R.anim.viewflipper_right_in);
        mViewFlipper1.setOutAnimation(this, R.anim.viewflipper_right_out);
        mViewFlipper1.startFlipping();
    }


    // 通过手势控制 ViewFlipper 的翻页
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            // 手指触摸时
            case MotionEvent.ACTION_DOWN: {
                // 保存手指触摸屏幕时的 x 坐标
                mStartTouchX = event.getX();
                break;
            }
            // 手指触摸后移动时
            case MotionEvent.ACTION_MOVE: {
                break;
            }
            // 当手离开时
            case MotionEvent.ACTION_UP: {
                /**
                 * setInAnimation() - 进入的动画
                 * setOutAnimation() - 离开的动画
                 * showNext() - 翻页到 ViewFlipper 中的下一个 view
                 * showPrevious() - 翻页到 ViewFlipper 的上一个 view
                 */

                // 手指从右向左滑动（这里判断手指的横向移动距离要大于 100 才生效）
                if (mStartTouchX - event.getX() > 100) {
                    mViewFlipper2.setInAnimation(this, R.anim.viewflipper_right_in);
                    mViewFlipper2.setOutAnimation(this, R.anim.viewflipper_right_out);
                    mViewFlipper2.showNext();
                }
                // 手指从左向右滑动（这里判断手指的横向移动距离要大于 100 才生效）
                else if (event.getX() - mStartTouchX > 100) {
                    mViewFlipper2.setInAnimation(this, R.anim.viewflipper_left_in);
                    mViewFlipper2.setOutAnimation(this, R.anim.viewflipper_left_out);
                    mViewFlipper2.showPrevious();
                }

                break;
            }
        }

        return true;
    }
}

/layout/activity_view_collection_viewflipperdemo1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ViewFlipper
        android:id="@+id/viewFlipper1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/orange"
        android:padding="24dp"
        android:layout_margin="4dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 1" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 2" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 3" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 4" />
    </ViewFlipper>


    <ViewFlipper
        android:id="@+id/viewFlipper2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/orange"
        android:padding="24dp"
        android:layout_margin="4dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 1" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 2" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 3" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:textColor="@color/white"
            android:textAlignment="center"
            android:text="item 4" />
    </ViewFlipper>

</LinearLayout>

/anim/viewflipper_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>

/anim/viewflipper_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>

/anim/viewflipper_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>

/anim/viewflipper_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>

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd