Android实现图片浏览功能的示例详解(附带源码)

 更新时间:2025年09月11日 16:34:52   作者:Katie。  
在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一下

一、项目背景详细介绍

在许多应用中,都需要展示图片并支持用户进行浏览:

  • 相册应用:浏览、切换、放大图片;
  • 电商应用:商品详情页查看大图;
  • 新闻/资讯应用:浏览配图。

如果仅仅是显示一张图片,用 ImageView 即可;但 浏览功能 还需要支持 左右滑动切换、缩放、拖动 等操作。

二、项目需求详细介绍

支持展示多张图片;

用户可左右滑动切换图片;

支持双击放大、手势缩放;

支持拖动查看放大的图片;

可从网络/本地加载图片。

三、相关技术详细介绍

ViewPager2 / RecyclerView

横向翻页切换图片。

PhotoView(开源库)

Glide / Picasso

高效加载本地和网络图片,支持缓存。

四、实现思路详细介绍

使用 ViewPager2 承载图片列表,实现左右滑动切换;

每个页面放一个 PhotoView,支持缩放和拖动;

使用 Glide 加载图片(支持网络/本地资源);

可在底部添加指示器(点点或文字)显示当前位置。

五、完整实现代码

// ========================== MainActivity.java ==========================
package com.example.imagebrowser;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import java.util.ArrayList;
import java.util.List;

/**
 * 主界面,展示图片浏览
 */
public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private ImagePagerAdapter adapter;
    private List<String> imageList;

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

        viewPager = findViewById(R.id.viewPager);

        // 模拟数据,可以是本地或网络图片地址
        imageList = new ArrayList<>();
        imageList.add("https://picsum.photos/600/800?random=1");
        imageList.add("https://picsum.photos/600/800?random=2");
        imageList.add("https://picsum.photos/600/800?random=3");
        imageList.add("https://picsum.photos/600/800?random=4");

        adapter = new ImagePagerAdapter(this, imageList);
        viewPager.setAdapter(adapter);
    }
}


// ========================== ImagePagerAdapter.java ==========================
package com.example.imagebrowser;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;

import java.util.List;

import uk.co.senab.photoview.PhotoView;

/**
 * ViewPager2 的适配器
 */
public class ImagePagerAdapter extends RecyclerView.Adapter<ImagePagerAdapter.ViewHolder> {

    private Context context;
    private List<String> imageList;

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

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_image, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        String url = imageList.get(position);
        Glide.with(context)
                .load(url)
                .into(holder.photoView);
    }

    @Override
    public int getItemCount() {
        return imageList.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        PhotoView photoView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            photoView = itemView.findViewById(R.id.photoView);
        }
    }
}


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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>


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

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/photoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:scaleType="fitCenter" />
</FrameLayout>


// ========================== build.gradle (app) ==========================
dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
    implementation 'com.github.bumptech.glide:glide:4.16.0'
}

六、代码详细解读

1.MainActivity

  • 使用 ViewPager2 展示图片集合;
  • 模拟了 4 张网络图片。

2.ImagePagerAdapter

  • 每页一个 PhotoView;
  • Glide 加载图片。

3.PhotoView

支持缩放、拖动、双击放大等操作。

4.布局文件

  • activity_main.xml:容器,只有一个 ViewPager2;
  • item_image.xml:单个页面的图片容器。

七、项目详细总结

本项目实现了一个 完整的图片浏览功能

  • 支持左右滑动切换;
  • 支持手势缩放、双击放大;
  • 使用 Glide 加载网络图片,性能高效。

该功能常用于 相册浏览、商品详情页、图库预览

八、项目常见问题及解答

Q:加载大图会卡顿怎么办?

A:使用 Glide 的缩略图加载 + 占位图,避免白屏。

Q:如何支持本地图片?

A:Glide.with(context).load(new File(path)) 即可。

Q:能否支持无限循环?

A:可以在 Adapter 中对 position 取模,或用第三方 Banner 库。

九、扩展方向与性能优化

添加指示器

在底部显示当前图片位置(1/10)。

支持长按保存

长按图片弹出对话框,保存到相册。

优化加载

使用 Glide 的缓存和缩略图策略。

全屏沉浸式浏览

隐藏状态栏和导航栏,提升沉浸感。

到此这篇关于Android实现图片浏览功能的示例详解(附带源码)的文章就介绍到这了,更多相关Android图片浏览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 为Android Studio编写自定义Gradle插件的教程

    为Android Studio编写自定义Gradle插件的教程

    这篇文章主要介绍了为Android Studio编写自定义Gradle插件的教程,Android Studio现在基本上已经成为了安卓开发的标配IDE,友可以参考下
    2016-02-02
  • Kotlin Flow操作符及基本使用详解

    Kotlin Flow操作符及基本使用详解

    这篇文章主要为大家介绍了Kotlin Flow操作符及基本使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Android开发之SD卡文件操作分析

    Android开发之SD卡文件操作分析

    这篇文章主要介绍了Android开发之SD卡文件操作,结合实例形式分析了Android权限控制及针对SD卡文件操作的相关技巧,需要的朋友可以参考下
    2017-07-07
  • Android自定义相机Camera实现手动对焦的方法示例

    Android自定义相机Camera实现手动对焦的方法示例

    这篇文章主要介绍了Android自定义相机Camera实现手动对焦的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Android编程基于自定义View实现绚丽的圆形进度条功能示例

    Android编程基于自定义View实现绚丽的圆形进度条功能示例

    这篇文章主要介绍了Android编程基于自定义View实现绚丽的圆形进度条功能,结合实例形式详细分析了Android自定义view实现圆形进度条的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • Android如何优雅的处理重复点击

    Android如何优雅的处理重复点击

    这篇文章主要介绍了Android如何优雅的处理重复点击,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下
    2021-03-03
  • android自定义简单时钟

    android自定义简单时钟

    这篇文章主要为大家详细介绍了android自定义简单时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Android  webview和js互相调用实现方法

    Android webview和js互相调用实现方法

    这篇文章主要介绍了 Android webview和js互相调用实现方法的相关资料,需要的朋友可以参考下
    2016-10-10
  • BroadcastReceiver静态注册案例详解

    BroadcastReceiver静态注册案例详解

    这篇文章主要为大家详细介绍了BroadcastReceiver静态注册案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Android Framework层获取及处理按键事件流程

    Android Framework层获取及处理按键事件流程

    本文主要介绍了Android Framework层获取及处理按键事件流程,Android系统的输入事件是InputManagerService服务来监控的,该系统服务在SystemServer的startOtherServices()中初始化,更多介绍需要的小伙伴可以参考一下
    2022-08-08

最新评论