图片切换器(ImageSwitcher)使用

李小白是一只喵

发布于 2020-04-24 08:39:38

2.6K0

发布于 2020-04-24 08:39:38

文章被收录于专栏：算法微时光算法微时光

image.png

ImageSwitcher

ImageSwitcher是一个图片切换器，它间接继承自FrameLayout类，和ImageView相比，多了一个功能，那就是它说显示的图片切换时，可以设置动画效果，类似于淡进淡出效果，以及左进右出滑动等效果。

既然ImageSwitcher是用来显示图片的控件，AndroidAPI为我们提供了三种不同方法来设定不同的图像来源，方法有：

setImageDrawable(Drawable)：指定一个Drawable对象，用来给ImageSwitcher显示。
setImageResource(int)：指定一个资源的ID，用来给ImageSwitcher显示。
setImageURL(URL)：指定一个URL地址，用来给ImageSwitcher显示URL指向的图片资源。

引用方式:

    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </ImageSwitcher>

动画效果

ImageSwitcher可以设置图片切换时，动画的效果。

对于动画效果的支持，是因为它继承了ViewAnimator类，这个类中定义了两个属性，用来确定切入图片的动画效果和切出图片的动画效果：

android:inAnimation：切入图片时的效果。
android:outAnimation：切出图片时的效果。

动画效果，一般定义在android.R.anim类中:

定义	含义
fede_in	淡进。
fade_out	淡出
slide_in_left	从左滑进。
slide_out_right	从右滑出。

使用实例

activity_main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </ImageSwitcher>

</android.support.constraint.ConstraintLayout>

代码：

package com.example.user.viewsw;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.ViewSwitcher;

public class MainActivity extends Activity implements ViewSwitcher.ViewFactory, View.OnTouchListener {
    /**
     * ImagaSwitcher 的引用
     */
    private ImageSwitcher mImageSwitcher;
    /**
     * 图片id数组
     */
    private int[] imgIds;
    /**
     * 当前选中的图片id序号
     */
    private int currentPosition;
    /**
     * 按下点的X坐标
     */
    private float downX;


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

        // 全部的图片资源
        imgIds = new int[]{R.drawable.p001,R.drawable.p002,R.drawable.p003,R.drawable.p004,
                R.drawable.p005, R.drawable.p006, R.drawable.p007, R.drawable.p008,R.drawable.p009,
                R.drawable.p010, R.drawable.p011, R.drawable.p012};


        //实例化ImageSwitcher
        mImageSwitcher  = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
        //设置Factory
        mImageSwitcher.setFactory(this);
        //设置OnTouchListener，我们通过Touch事件来切换图片
        mImageSwitcher.setOnTouchListener(this);

        //初始位置为0
        currentPosition = 0;
        mImageSwitcher.setImageResource(imgIds[currentPosition]);

        //设置动画
        mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in));
        mImageSwitcher.setOutAnimation( AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out));

    }

    @Override
    public View makeView() {
        final ImageView i = new ImageView(this);
        i.setBackgroundColor(0xff000000);
        i.setScaleType(ImageView.ScaleType.CENTER_CROP);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
        return i ;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:{
                //手指按下的X坐标
                downX = event.getX();
                break;
            }
            case MotionEvent.ACTION_UP:{
                float lastX = event.getX();
                //抬起的时候的X坐标大于按下的时候就显示上一张图片
                if(lastX > downX){
                    if(currentPosition > 0){
                        currentPosition --;
                        mImageSwitcher.setImageResource(imgIds[currentPosition]);
                    }else{
                        Toast.makeText(this, "已经是第一张", Toast.LENGTH_SHORT).show();
                    }
                }

                if(lastX < downX){
                    if(currentPosition < imgIds.length - 1){
                        currentPosition ++ ;
                        mImageSwitcher.setImageResource(imgIds[currentPosition]);

                    }else{
                        Toast.makeText(this, "到了最后一张", Toast.LENGTH_SHORT).show();
                    }
                }
            }

            break;
        }

        return true;
    }

}

运行结果：