Android客户端从RESTful服务器下载图片并显示的实现方案问询

嘿Marco！刚好我之前做过类似的需求，给你梳理个清晰的实现思路+代码方案，咱们一步步来：

一、方案选型：别用JSON传图片！ #

RESTful场景下，绝对不要把图片二进制数据塞到JSON里——这会让接口响应体积暴增，传输效率极低，服务器和客户端都扛不住。正确的姿势是：

• 服务器提供一个接口，返回包含所有图片URL的JSON数组（比如["https://xxx.com/img1.jpg", "https://xxx.com/img2.jpg"]）
• 客户端拿到URL列表后，逐个请求图片资源，本地缓存后展示

这种方式既符合REST设计规范，又高效易维护。

二、代码实现步骤 #

1. 添加必要依赖 #

首先在build.gradle(Module level)里加常用的库：

// 网络请求：Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
// 图片加载+缓存：Glide（自带自动缓存、线程管理，不用自己写下载逻辑）
implementation 'com.github.bumptech.glide:glide:4.15.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.15.1'
// 列表展示：RecyclerView
implementation 'androidx.recyclerview:recyclerview:1.3.2'

2. 定义REST接口获取图片URL列表 #

先创建一个Retrofit的接口类，用来请求服务器的图片列表接口：

// ImageApi.kt
import retrofit2.Call
import retrofit2.http.GET

interface ImageApi {
    // 替换成你的服务器接口地址
    @GET("api/images")
    fun getImageUrls(): Call<List<String>>
}

3. 请求URL列表并初始化RecyclerView #

在Activity里发起网络请求，拿到URL列表后配置RecyclerView做网格展示：

// ImageGalleryActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

class ImageGalleryActivity : AppCompatActivity() {
    private lateinit var recyclerView: RecyclerView
    private lateinit var imageAdapter: ImageAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image_gallery)

        recyclerView = findViewById(R.id.recycler_view)
        // 设置网格布局，这里列数设为3，可根据需求调整
        recyclerView.layoutManager = GridLayoutManager(this, 3)

        // 初始化Retrofit
        val retrofit = Retrofit.Builder()
            .baseUrl("https://your-server-domain.com/") // 替换成你的服务器域名
            .addConverterFactory(GsonConverterFactory.create())
            .build()

        val imageApi = retrofit.create(ImageApi::class.java)
        imageApi.getImageUrls().enqueue(object : Callback<List<String>> {
            override fun onResponse(call: Call<List<String>>, response: Response<List<String>>) {
                if (response.isSuccessful) {
                    val imageUrls = response.body() ?: emptyList()
                    // 初始化Adapter并传入URL列表
                    imageAdapter = ImageAdapter(imageUrls)
                    recyclerView.adapter = imageAdapter
                }
            }

            override fun onFailure(call: Call<List<String>>, t: Throwable) {
                // 处理请求失败的情况，比如弹Toast
                t.printStackTrace()
            }
        })
    }
}

对应的Activity布局activity_image_gallery.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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

4. 实现RecyclerView的Adapter加载图片 #

创建Adapter类，用Glide加载并缓存图片：

// ImageAdapter.kt
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.bumptech.glide.load.resource.bitmap.CenterCrop
import com.bumptech.glide.load.resource.bitmap.RoundedCorners
import com.yourpackage.name.databinding.ItemImageBinding // 替换成你的包名

class ImageAdapter(private val imageUrls: List<String>) :
    RecyclerView.Adapter<ImageAdapter.ImageViewHolder>() {

    inner class ImageViewHolder(private val binding: ItemImageBinding) :
        RecyclerView.ViewHolder(binding.root) {

        fun bind(imageUrl: String) {
            // 用Glide加载图片，自动处理缓存、线程、占位图
            Glide.with(itemView.context)
                .load(imageUrl)
                .transform(CenterCrop(), RoundedCorners(16)) // 可选：添加圆角效果
                .placeholder(R.drawable.placeholder_image) // 替换成你的占位图资源
                .error(R.drawable.error_image) // 加载失败时显示的图片
                .into(binding.imageView)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
        val binding = ItemImageBinding.inflate(
            LayoutInflater.from(parent.context),
            parent,
            false
        )
        return ImageViewHolder(binding)
    }

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        holder.bind(imageUrls[position])
    }

    override fun getItemCount() = imageUrls.size
}

对应的Item布局item_image.xml（用ViewBinding更方便）：

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

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:layout_margin="4dp"/>

</layout>

三、进阶优化（练习可选） #

如果想深入学习，可以试试这些点：

• 后台批量下载：用WorkManager实现后台下载，避免前台卡顿，即使App退到后台也能继续下载
• 手动缓存管理：不用Glide，自己用OkHttp下载图片，保存到App私有目录，然后从本地加载
• 图片预加载：提前加载当前屏幕外的几张图片，提升滑动流畅度
• 进度显示：给每个Item添加下载进度条，展示下载状态

内容的提问来源于stack exchange，提问作者Marco