如何为ViewPager中的每张图片关联声音

在Android应用开发中，ViewPager是实现图片轮播的常用组件，很多时候我们需要让轮播的每张图片对应播放不同的声音，比如电子相册、儿童认知类应用等场景。要实现这个功能，核心思路是建立图片资源和声音资源的映射关系，再通过ViewPager的页面切换回调控制声音的播放与停止。

实现前的准备工作

首先需要准备好对应的资源，将图片和声音文件分别放到对应的资源目录下：

• 图片文件放到res/drawable或者res/mipmap目录下，建议统一命名规则，比如img_1.jpg、img_2.jpg
• 声音文件放到res/raw目录下，同样采用对应命名规则，比如sound_1.mp3、sound_2.mp3

建立图片与声音的映射关系

我们可以通过集合来维护图片资源ID和声音资源ID的对应关系，这样在切换页面时就能快速拿到当前页面对应的声音资源。

// 图片资源列表
List<Integer> imageList = new ArrayList<>();
// 声音资源列表，索引和图片列表一一对应
List<Integer> soundList = new ArrayList<>();

// 初始化资源
imageList.add(R.drawable.img_1);
soundList.add(R.raw.sound_1);

imageList.add(R.drawable.img_2);
soundList.add(R.raw.sound_2);

imageList.add(R.drawable.img_3);
soundList.add(R.raw.sound_3);

自定义ViewPager适配器

适配器需要加载图片资源，同时我们可以在适配器中处理图片的显示逻辑，不过声音的控制更适合放在页面切换的监听中。

public class ImagePagerAdapter extends PagerAdapter {
    private Context context;
    private List<Integer> imageResList;

    public ImagePagerAdapter(Context context, List<Integer> imageResList) {
        this.context = context;
        this.imageResList = imageResList;
    }

    @Override
    public int getCount() {
        return imageResList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(imageResList.get(position));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }
}

设置ViewPager页面切换监听控制声音

我们使用MediaPlayer来播放声音，在ViewPager的页面切换回调中，停止之前的声音，播放当前页面对应的声音。

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private MediaPlayer mediaPlayer;
    private List<Integer> imageList;
    private List<Integer> soundList;

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

        initRes();
        initViewPager();
    }

    private void initRes() {
        imageList = new ArrayList<>();
        soundList = new ArrayList<>();

        imageList.add(R.drawable.img_1);
        soundList.add(R.raw.sound_1);

        imageList.add(R.drawable.img_2);
        soundList.add(R.raw.sound_2);

        imageList.add(R.drawable.img_3);
        soundList.add(R.raw.sound_3);
    }

    private void initViewPager() {
        viewPager = findViewById(R.id.view_pager);
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageList);
        viewPager.setAdapter(adapter);

        // 设置页面切换监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                // 切换页面时先释放之前的MediaPlayer
                releaseMediaPlayer();
                // 播放当前页面对应的声音
                playSound(soundList.get(position));
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        // 初始加载第一页时播放对应声音
        playSound(soundList.get(0));
    }

    private void playSound(int soundResId) {
        mediaPlayer = MediaPlayer.create(this, soundResId);
        mediaPlayer.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                releaseMediaPlayer();
            }
        });
        mediaPlayer.start();
    }

    private void releaseMediaPlayer() {
        if (mediaPlayer != null) {
            if (mediaPlayer.isPlaying()) {
                mediaPlayer.stop();
            }
            mediaPlayer.release();
            mediaPlayer = null;
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        releaseMediaPlayer();
    }
}

注意事项

• 每次切换页面或者退出页面时，一定要释放MediaPlayer资源，否则会造成内存泄漏，甚至声音重叠播放的问题
• 如果声音文件较大，建议提前预加载，避免切换页面时播放延迟
• 如果ViewPager开启了自动轮播，需要额外处理轮播暂停时的声音停止逻辑，避免后台继续播放声音
• 声音播放前最好做资源有效性判断，避免资源不存在导致应用崩溃

ViewPagerAndroidMediaPlayer图片轮播声音播放修改时间：2026-07-07 01:12:26