摸鱼学Android 十八（翻转视图）

UI控件之八

ViewFlipper(翻转视图)

1 基本属性

• inAnimation：设置进入动画
• outAnimation：设置离开动画
• flipInterval：设置翻转间隔(毫秒)

2 常用方法

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

3 使用

3.1 静态导入

在布局中添加页面

<ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        <include layout="@layout/page_one" />
        <include layout="@layout/page_two" />
        <include layout="@layout/page_three" />
        <include layout="@layout/page_four" />
    </ViewFlipper>

3.2 动态导入

代码添加View

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

4 实例1-自动滑动

1. 创建进入动画 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>

2. 创建离开动画 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>

3. activity_main.xml，静态导入layout下的4个页面（都是ImageView）

    <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inAnimation="@anim/right_in"
            android:outAnimation="@anim/right_out"
            android:flipInterval="2000">

        <include layout="@layout/page_one" />
        <include layout="@layout/page_two" />
        <include layout="@layout/page_three" />
        <include layout="@layout/page_four" />
        
    </ViewFlipper>

4. MainActivity.java设置开始滑动

public class MainActivity extends AppCompatActivity {

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

5.运行App，显示每2秒切换一张图片

5 实例2-手动滑动

复用上面的代码。

1. 增加向左滑动的进入动画，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>

2. 增加向左滑动的离开动画，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>

3. 动态导入4个页面

public class MainActivity extends AppCompatActivity  {

    private Context mContext;
    private ViewFlipper flipper;
    private int[] resId = {R.drawable.p1, R.drawable.p2,
            R.drawable.p3, R.drawable.p4};

    private final static int MIN_MOVE = 200;   //最小距离
    private MyGestureListener mgListener;
    private GestureDetector mDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        //实例化SimpleOnGestureListener与GestureDetector对象
        mgListener = new MyGestureListener();
        mDetector = new GestureDetector(this, mgListener);
        flipper = (ViewFlipper) findViewById(R.id.flipper);
        //动态导入添加子View
        for(int i = 0;i < resId.length;i++){
            flipper.addView(getImageView(resId[i]));
        }

    }

    //重写onTouchEvent触发MyGestureListener里的方法
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mDetector.onTouchEvent(event);
    }

    //自定义手势监听，GestureListener
    private class MyGestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float v, float v1) {
            //左滑/右滑200dp
            if(e1.getX() - e2.getX() > MIN_MOVE){
                flipper.setInAnimation(mContext,R.anim.right_in);
                flipper.setOutAnimation(mContext, R.anim.right_out);
                flipper.showNext();
            }else if(e2.getX() - e1.getX() > MIN_MOVE){
                flipper.setInAnimation(mContext,R.anim.left_in);
                flipper.setOutAnimation(mContext, R.anim.left_out);
                flipper.showPrevious();
            }
            return true;
        }
    }

    private ImageView getImageView(int resId){
        ImageView img = new ImageView(this);
        img.setBackgroundResource(resId);
        return img;
    }
}

4. 运行App，按住鼠标向左或向右滑动，可以看到对应的切换