如何将Retrofit获取的API数据填充到ViewPager2轮播布局中

1. Retrofit接口定义与API返回结构完全不匹配 #

当前接口声明返回Call<List<CarouselItem>>，但Flickr interestingness接口的实际返回为嵌套JSON结构，顶层存在photos节点、节点内嵌套photo数组，直接反序列化会因结构不匹配解析失败，返回空响应体。

修正要点： #

• 新增对应嵌套结构的响应包装类，避免将业务实体直接作为顶层响应体
• 调整业务数据模型字段，匹配接口返回的title、id、url_s字段，移除仅适配本地图片的Int image硬编码字段
• 将原硬拼接在@GET注解内的查询参数，改为@Query注解传参形式，规避路径拼接编码错误

对应修正后的代码：

// 接口顶层响应包装
data class FlickrResponse(
    val photos: FlickrPhotosWrapper
)
data class FlickrPhotosWrapper(
    val photo: List<CarouselItem>
)

// 修正后的业务数据模型
data class CarouselItem(
    val title: String,
    val id: String,
    val url_s: String,
    @Transient var placeholderRes: Int = 0
)

// 修正后的API接口定义
interface FlickrApi {
    @GET("services/rest/")
    suspend fun getCarouselItem(
        @Query("method") method: String = "flickr.interestingness.getList",
        @Query("api_key") apiKey: String = "你的私有访问密钥",
        @Query("format") format: String = "json",
        @Query("nojsoncallback") noJsonCallback: Int = 1,
        @Query("extras") extras: String = "url_s"
    ): Response<FlickrResponse>

    companion object {
        fun create() : FlickrApi {
            val retrofit = Retrofit.Builder()
                .addConverterFactory(GsonConverterFactory.create())
                .baseUrl(BASE_URL)
                .build()
            return retrofit.create(FlickrApi::class.java)
        }
    }
}

2. ViewPager2适配器存在多处实现硬伤 #

现有适配器的问题包括：

• 构造传入的可变列表被赋值为不可变List类型，后续addAll操作会直接触发编译错误
• ViewHolder中硬编码调用setImageResource，仅支持本地图片加载逻辑，未引入网络图片加载能力
• 未对外提供数据更新入口，外部请求拿到数据后无法同步到适配器
• 无限轮播逻辑靠反复对列表做全量addAll实现，会导致列表长度持续膨胀、内存占用逐步升高

修正后的适配器实现： #

class ItemAdapter : RecyclerView.Adapter<ItemAdapter.ItemPagerViewHolder>() {
    // 内部维护可变列表，支持动态数据更新
    private val carouselItems = mutableListOf<CarouselItem>()

    // 对外提供统一的数据替换方法
    fun updateData(newItems: List<CarouselItem>) {
        carouselItems.clear()
        carouselItems.addAll(newItems)
        notifyDataSetChanged()
    }

    inner class ItemPagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val photo: RoundedImageView = itemView.findViewById(R.id.picture)
        private val title: TextView = itemView.findViewById(R.id.photo_name)

        fun bind(carouselItem: CarouselItem) {
            // 用Glide加载网络图片URL，替代原有本地资源加载逻辑
            Glide.with(photo.context)
                .load(carouselItem.url_s)
                .placeholder(carouselItem.placeholderRes)
                .into(photo)
            title.text = carouselItem.title
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemPagerViewHolder {
        return ItemPagerViewHolder(
            LayoutInflater.from(parent.context).inflate(
                R.layout.carousel_item_container,
                parent,
                false
            )
        )
    }

    override fun onBindViewHolder(holder: ItemPagerViewHolder, position: Int) {
        // 用位置取模映射真实数据项，替代原有的全量列表重复逻辑
        if (carouselItems.isEmpty()) return
        val realPosition = position % carouselItems.size
        holder.bind(carouselItems[realPosition])
    }

    override fun getItemCount(): Int {
        // 空数据时不渲染，有数据时返回大数量值支撑无限滑动
        return if (carouselItems.isEmpty()) 0 else Int.MAX_VALUE
    }
}

3. Activity层网络请求逻辑未形成闭环 #

现有代码的问题包括：

• 网络请求逻辑全程处于注释状态，未实际触发请求
• 未持有适配器实例成员，就算放开回调也无法找到适配器入口触发UI更新
• 回调代码中引用了未定义的itemAdapter变量，存在编译错误

修正后的Activity实现： #

class CarouselActivity : AppCompatActivity() {
    private lateinit var viewPager: ViewPager2
    // 持有适配器实例，方便后续动态更新数据
    private val carouselAdapter = ItemAdapter()

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

        viewPager = findViewById(R.id.viewPager_ImageSlider)
        supportActionBar?.hide()

        // 给ViewPager初始化空适配器，等数据返回后再刷新内容
        viewPager.adapter = carouselAdapter

        viewPager.clipToPadding = false
        viewPager.clipChildren = false
        viewPager.offscreenPageLimit = 3
        viewPager.getChildAt(0).overScrollMode = RecyclerView.OVER_SCROLL_NEVER

        val compositePageTransformer = CompositePageTransformer()
        compositePageTransformer.addTransformer(MarginPageTransformer(30))
        compositePageTransformer.addTransformer { page, position ->
            val r = 1 - abs(position)
            page.scaleY = 0.85f + r * 0.25f
        }
        viewPager.setPageTransformer(compositePageTransformer)

        // 用协程发起网络请求，替代原有嵌套式Callback
        lifecycleScope.launch {
            try {
                val response = FlickrApi.create().getCarouselItem()
                if (response.isSuccessful) {
                    val photoList = response.body()?.photos?.photo ?: emptyList()
                    // 为每个数据项配置本地占位图
                    val mappedItems = photoList.map {
                        it.copy(placeholderRes = R.drawable.bcw_38)
                    }
                    // 触发适配器数据更新，自动刷新UI
                    carouselAdapter.updateData(mappedItems)
                    // 初始化轮播位置到中间区间，实现双向无限滑动
                    viewPager.setCurrentItem(mappedItems.size * 10000, false)
                }
            } catch (e: Exception) {
                // 请求失败时展示本地兜底数据
                val fallbackList = listOf(
                    CarouselItem("Image 1", "1", "", R.drawable.bcw_38),
                    CarouselItem("Image 2", "2", "", R.drawable.bcw_39),
                    CarouselItem("Image 3", "3", "", R.drawable.bcw_40)
                )
                carouselAdapter.updateData(fallbackList)
            }
        }
    }
}

4. 落地注意事项 #

• 网络图片加载必须通过Glide等图片加载框架完成，直接将网络URL传入setImageResource会触发应用崩溃
• 为图片加载流程配置占位图、错误图，避免加载过程中出现UI空白
• 采用取模映射的方式实现无限轮播，不要靠反复复制列表元素撑长列表，避免性能损耗
• Gson映射实体类时要移除构造器的internal访问修饰符，避免反射创建实例失败

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