图像类组件ImageSwitch

介绍

        图像切换器（ImageSwitcher），用于实现带动画效果的图片切换功能。例如，手机相册中滑动查看相片的功能（如图 6.1 所示）

例子

模拟手机相册的滑动查看相片

创建滑动动画

首先在 res 目录中单击鼠标右键 New → Directory 创建一个名称为 anim 的目录，然后在该目录中单击右键 New → Animation resource file 创建名称为 slide_in_left 的从左平移进入动画。

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

slide_out_left 从左平移退出动画

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

slide_in_right 从右平移进入动画

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

slide_out_right 从右平移退出动画

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

编写布局文件

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

    <!--图像切换器-->
    <ImageSwitcher
        android:id="@+id/imageswitcher"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </ImageSwitcher>

</RelativeLayout>

编写ImageSwitchActivity

实例变量

//声明并初始化一个保存要显示图像ID的数组
private int[] arrayPictures = new int[]{
        R.mipmap.img01, R.mipmap.img02, R.mipmap.img03,
        R.mipmap.img04, R.mipmap.img05, R.mipmap.img06,
        R.mipmap.img07, R.mipmap.img08, R.mipmap.img09,
};

//声明一个图像切换器对象
private ImageSwitcher imageSwitcher;
//要显示的图片在图片数组中的Index
private int pictutureIndex;
//左右滑动时手指按下的X坐标
private float touchDownX;
//左右滑动时手指抬起的X坐标
private float touchUpX;

在onCreate()方法中

1. setFactory()方法 ：在使用 ImageSwitcher 时，必须该方法为 ImageSwitcher 类设置一个ViewFactory，用于将显示的图片和父窗口区分开，对于 setFactory() 方法的参数，需要通过实例化ViewSwitcher.ViewFactory 接口的实现类来指定
2. makeView() 方法：在创建 ViewSwitcher.ViewFactory 接口的实现类时，需要重写该方法，用于创建显示图片的 ImageView。该方法将返回一个显示图片的 ImageView
3. setImageResource()方法：该方法用于指定要在 ImageSwitcher 中显示的图片资源

imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);
//为ImageSwicher设置Factory，用来为ImageSwicher制造ImageView
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
    @Override
    public View makeView() {
        //实例化一个ImageView类的对象
        ImageView imageView = new ImageView(ImageSwitcherActivity.this);
        //根据ID加载默认显示图片
        imageView.setImageResource(arrayPictures[pictutureIndex]);
        return imageView; //返回imageView对象
    }
});

为 imageSwitcher 创建一个触摸事件，首先获取左右滑动按下和抬起的 X 坐标，然后判断当手指从左向右滑动时，设置图片切换的动画为左进右出，相反再判断当手指从右向左滑动时，设置图片切换的动画为右进左出

imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            //取得左右滑动时手指按下的X坐标
            touchDownX = event.getX();
            return true;
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            //取得左右滑动时手指松开的X坐标
            touchUpX = event.getX();
            //从左往右，看下一张
            if (touchUpX - touchDownX > 100) {
                //取得当前要看的图片的index
                pictutureIndex = pictutureIndex == 0 ?
                        arrayPictures.length - 1 : pictutureIndex - 1;
                //设置图片切换的动画
                imageSwitcher.setInAnimation(AnimationUtils.
                        loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));
                imageSwitcher.setOutAnimation(AnimationUtils.
                        loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));
                //设置当前要看的图片
                imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);
                //从右往左，看上一张
            } else if (touchDownX - touchUpX > 100) {
                //取得当前要看的图片index
                pictutureIndex = pictutureIndex == arrayPictures.length - 1
                        ? 0 : pictutureIndex + 1;
                //设置切换动画
                imageSwitcher.setOutAnimation(AnimationUtils.
                        loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));
                imageSwitcher.setInAnimation(AnimationUtils.
                        loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));
                //设置要看的图片
                imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);
            }
            return true;
        }
        return false;
    }
});

效果