ViewFlipper是Android系统自带的一个多页面管理控件,它可以实现子界面的自动切换。

一. 为ViewFlipper加入View:

(1)方法1. 静态导入:在Layout布局文件中直接导入:

<ViewFlipper
    android:id="@+id/flipper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@mipmap/pic1"/>
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@mipmap/pic2"/>
</ViewFlipper>

(2)方法2. 动态导入:addView()方法

ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper);
flipper.addView(getImageView(R.drawable.pic1);
flipper.addView(getImageView(R.drawable.pic2);

二. ViewFlipper常用方法:

方法 描述
setInAnimation 设置View进入屏幕的时候使用的动画
setOutAnimation 设置View退出屏幕时使用的动画。
showText 条用该函数来显示ViewFlipper里面的下一个View。
showPrevious 调用该函数来显示ViewFlipper里面的上一个View。
setFilpInterval 设置View之间切换的时间间隔。
startFlipping 使用上面设置的时间间隔来开始切换所有的View,切换回循环进行。
stopFlipping 停止View切换。

具体详细的ViewFlipper API可查看官方网站:http://developer.android.com/reference/android/widget/ViewFlipper.html

三. 案例实现

(1)案例一:利用ViewFlipper实现的图片轮播

activity.xml:(采用动态导入ViewFlipper的子View)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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/flipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ViewFlipper>
</LinearLayout>

Flipper切换的属性动画:

anim/left_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" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"
        android:duration="2000" />
</set>

anim/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" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.5"
        android:duration="2000" />
</set>

MainActivity.java:

private ViewFlipper flipper;
private int[] resId = {R.mipmap.pic1, R.mipmap.pic2, R.mipmap.pic3, R.mipmap.pic4};

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

    flipper = (ViewFlipper) findViewById(R.id.flipper);
    // 动态导入的方式为ViewFlipper加入子View
    for(int i = 0; i < resId.length; i++) {
        flipper.addView(getImageView(resId[i]));
    }
    // 为flipper设置动画效果
    flipper.setInAnimation(this, R.anim.left_in);
    flipper.setOutAnimation(this, R.anim.right_out);
    // 设定flipper视图切换的时间
    flipper.setFlipInterval(3000);
    // 开始播放动画
    flipper.startFlipping();
}

private ImageView getImageView(int resId) {
    ImageView image = new ImageView(this);
    /*
    * //按图片原大小展示
    * image.setImageResource(resId);
    **/

    // 全屏显示图片
    image.setBackgroundResource(resId);

源代码下载

此处输入图片的描述

(2)案例二:支持手势滑动的ViewFlipper

手势滑动,只需要在上面案例的基础上,在MainActivity.java中的Activity下重写onTouchEvent()方法,并判断当前是向左或向右滑动。

MainActivity.java:

private float startX;

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch(event.getAction()) {
        // 手指落下
        case MotionEvent.ACTION_DOWN:
            startX = event.getX();
            break;
        // 手指滑动
        case MotionEvent.ACTION_MOVE:
            // 向右滑动,查看上一页
            if(event.getX() - startX > 100) {
                flipper.setInAnimation(this, R.anim.left_in);
                flipper.setOutAnimation(this, R.anim.left_out);
                // 显示前一页
                flipper.showPrevious();
            }

            // 向左滑动,查看下一页
            if(startX - event.getX() > 100) {
                flipper.setInAnimation(this, R.anim.right_in);
                flipper.setOutAnimation(this, R.anim.right_out);
                // 显示下一页
                flipper.showNext();
            }
            break;

        // 手指抬起
        case MotionEvent.ACTION_UP:
            break;
    }
    return super.onTouchEvent(event);
}

源代码下载

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/mobile/703