安卓 ViewFlipper应用 （几种图片循环滚动）（35）

实现一个图片栏滚动（也可以是其他的view），而且可以通过手势进行前后滑动切换图片。

首先在res/anim（没有自己创建）建立几个动画的xml文件：

left_in.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--duration每次切换的时间-->
    <!--fromXDelta toXDelta x轴的移动-->
    <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>

实现一个Activity的布局：

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

    <!--inAnimation为进场动画-->
    <!--outAnimation为出厂动画-->
    <!--flipInterval为切换时间-->
    <ViewFlipper
        android:id="@+id/active_viewflipper"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">
    </ViewFlipper>

</LinearLayout>

Activity实现逻辑：

public class ActiveViewFlipperActivity extends AppCompatActivity {

    private Context mContext;
    private ViewFlipper viewFlipper;
    //把所有图片资源的id放在一个int数组中
    private int[] resId = {R.drawable.bottom_1, R.drawable.bottom_2, R.drawable.bottom_3};

    private final static int MIN_MOVE = 200;
    private MyGestureListener myGestureListener;
    private GestureDetector gestureDetector;

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

        mContext = ActiveViewFlipperActivity.this;

        myGestureListener = new MyGestureListener();
        gestureDetector = new GestureDetector(this, myGestureListener);

        viewFlipper = findViewById(R.id.active_viewflipper);
        for(int i = 0; i < resId.length; i++){
            //在往viewFlipper中加入imageView
            viewFlipper.addView(getImageView(resId[i]));
        }
        //动态设置切换时间为3000ms
        viewFlipper.setFlipInterval(3000);
        //开始自动滚动
        viewFlipper.startFlipping();

        //手势控制进行监听
        viewFlipper.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return gestureDetector.onTouchEvent(event);
            }
        });

    }


    private class MyGestureListener extends GestureDetector.SimpleOnGestureListener{
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            //设置一个最小的移动触发换页距离
            if(e1.getX() - e2.getX() > MIN_MOVE){
                viewFlipper.stopFlipping();
                viewFlipper.setInAnimation(mContext, R.anim.right_in);
                viewFlipper.setOutAnimation(mContext, R.anim.right_out);
                //显示下一个drawable
                viewFlipper.showNext();
                viewFlipper.startFlipping();
                //可以设置延时,就是一个自动与手动之间的切换协调
            }else if(e2.getX() - e1.getX() > MIN_MOVE){
                viewFlipper.stopFlipping();
                viewFlipper.setInAnimation(mContext, R.anim.left_in);
                viewFlipper.setOutAnimation(mContext, R.anim.left_out);
                //显示前一个drawable
                viewFlipper.showPrevious();
                viewFlipper.startFlipping();
            }
            //使viewFlipper每次手动控制之后，自动转动的时候仍为向右滑动。
            viewFlipper.setInAnimation(mContext, R.anim.right_in);
            viewFlipper.setOutAnimation(mContext, R.anim.right_out);
            return true;
        }
    }

    //获取drawable的imageView
    private ImageView getImageView(int resId){
        ImageView img = new ImageView(this);
        img.setImageResource(resId);
        return img;
    }
}