十四、ImageSwitcher用法详解

ImageSwitcher由FrameLayout派生而出，ImageSwitcher组件和ImageView很相似，它们都可用于显示图片，但ImageSwitcher比普通ImageView多一个功能：它所显示的图片切换时可以设置动画效果。
使用ImageSwitcher时往往需要为它设置一个ViewSwitcher.ViewFactory，实现ViewSwitcher.ViewFactory时需要实现一个makeView()方法，该方法通常会返回一个ImageView，而ImageSwitcher则负责显示这个ImageView。

废话不多说，直接上代码：

    private int[] images = {
          R.drawable.switcher1,
          R.drawable.switcher2,
          R.drawable.switcher3,
          R.drawable.switcher4,
          R.drawable.switcher5
    };

    private ImageSwitcher imageSwitcher;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity7);
        imageSwitcher = findViewById(R.id.imageSwitcher);
        //设置图片更换动画效果
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(context,
                android.R.anim.slide_in_left));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(context,
                android.R.anim.fade_out));
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(context);
                imageView.setBackgroundColor(0xff0000);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT));
                return imageView;
            }
        });
        imageSwitcher.setImageResource(images[0]);
    }

    public void selectImage(View view){
        switch (view.getId()){
            case R.id.image1:
                changeImage(0);
                break;
            case R.id.image2:
                changeImage(1);
                break;
            case R.id.image3:
                changeImage(2);
                break;
            case R.id.image4:
                changeImage(3);
                break;
            case R.id.image5:
                changeImage(4);
                break;
        }
    }

    private void changeImage(int position){
        imageSwitcher.setImageResource(images[position]);
    }

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="parent" />

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:layout_marginTop="20dp"
        android:scrollbars="none"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageSwitcher">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:onClick="selectImage"
                app:srcCompat="@drawable/switcher1" />

            <ImageView
                android:id="@+id/image2"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:onClick="selectImage"
                app:srcCompat="@drawable/switcher2" />

            <ImageView
                android:id="@+id/image3"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:onClick="selectImage"
                app:srcCompat="@drawable/switcher3" />

            <ImageView
                android:id="@+id/image4"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:onClick="selectImage"
                app:srcCompat="@drawable/switcher4" />

            <ImageView
                android:id="@+id/image5"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:onClick="selectImage"
                app:srcCompat="@drawable/switcher5" />

        </LinearLayout>

    </HorizontalScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

效果如图：

ImageSwitcher.jpg