【例6-5】用ImageSwitcher展示相册示例

准备一组图片，复制到资源drawable目录。安排一个图片切换器ImageSwitcher和布局容器HorizontalScrollView，单击布局容器里的小图片，就会在图片切换器中出现放大的图片，效果如图所示。

教学视频

布局文件image_show.xml的源代码

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <ImageSwitcher

        android:id="@+id/switcher"

        android:layout_width="match_parent"

        android:layout_height="600dp"/>

    <HorizontalScrollView

        android:id="@+id/gallery"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:padding="3pt">

    </HorizontalScrollView>

</LinearLayout>

控制文件ImageShowActivity.java的源代码如下：

package com.example.chap06;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.HorizontalScrollView;

import android.widget.ImageSwitcher;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.ViewSwitcher;

import androidx.appcompat.app.AppCompatActivity;

//【例6-5】用ImageSwitcher展示相册示例。

public class ImageShowActivity extends AppCompatActivity

        implements  ViewSwitcher.ViewFactory

{

    private Integer[] mThumbIds = {    //采用24节气的小图

            R.drawable.sample_thumb_01, R.drawable.sample_thumb_02,

            R.drawable.sample_thumb_03, R.drawable.sample_thumb_04,

            R.drawable.sample_thumb_05, R.drawable.sample_thumb_06,

            R.drawable.sample_thumb_07, R.drawable.sample_thumb_08,

            R.drawable.sample_thumb_09, R.drawable.sample_thumb_10,

            R.drawable.sample_thumb_11, R.drawable.sample_thumb_12};

    private Integer[] mImageIds = {   //采用24节气的大图

            R.drawable.sample_01, R.drawable.sample_02,

            R.drawable.sample_03, R.drawable.sample_04,

            R.drawable.sample_05, R.drawable.sample_06,

            R.drawable.sample_07, R.drawable.sample_08,

            R.drawable.sample_09, R.drawable.sample_10,

            R.drawable.sample_11, R.drawable.sample_12};

    private ImageSwitcher mSwitcher;

    private HorizontalScrollView hsv ;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.image_show);

        mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);

        mSwitcher.setFactory(this);

        hsv = (HorizontalScrollView) findViewById(R.id.gallery);

        initView();

    }

    public void initView() { //水平滚动视图里面放一系列小图片

        final LinearLayout layout = new LinearLayout(this);

        //添加子View

        for (int i = 0; i < mThumbIds.length; i++) {

            Log.i("mThumbIds",Integer.toString(i));

            ImageView img = new ImageView(this);

            img.setId(i);

            img.setImageResource(mThumbIds[i]);

            layout.addView(img);

            img.setOnClickListener(new View.OnClickListener() {

                public void onClick(View v) {                    

                    //根据小图的id取出大图数组中相应的图片

                    mSwitcher.setImageResource(mImageIds[v.getId()]);

                }

            });

        }

        hsv.addView(layout);

        mSwitcher.setImageResource(R.drawable.sample_01);

    }

    @Override

    public View makeView() {

        ImageView img = new ImageView(this);

        //img.setBackgroundColor(Color.WHITE); //设置背景色

        //img.setScaleType(ImageView.ScaleType.FIT_CENTER); //设置图片显示的缩放方式

        //设置显示的图片在容器中的填充方式

        img.setLayoutParams(new ImageSwitcher.LayoutParams(

                LinearLayout.LayoutParams.MATCH_PARENT,

                LinearLayout.LayoutParams.MATCH_PARENT));

        return img;

    }

}

打开项目配置文件AndroidManifest.xml，配置要启动的Activity类名为 ImageShowActivity。