Android 实现双列图片瀑布流式布局

Android 实现双列图片瀑布流式布局

实现双列图片瀑布流布局,关键在于 RecyclerViewStaggeredGridLayoutManager 和图片的动态加载。以下是实现步骤:


1. 添加必要依赖

使用 Glide 加载图片。确保在 build.gradle 中添加依赖:

xml 复制代码
implementation 'com.github.bumptech.glide:glide:4.15.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.15.1'

2. 布局文件

主布局文件(activity_main.xml
XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</androidx.constraintlayout.widget.ConstraintLayout>
子项布局文件(item_staggered_image.xml
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="wrap_content"
    android:orientation="vertical"
    android:padding="4dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />

</LinearLayout>

3. RecyclerView 配置

kotlin 复制代码
package com.check.waterfall

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.StaggeredGridLayoutManager

class MainActivity : AppCompatActivity() {

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

        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)

        // 设置 StaggeredGridLayoutManager 为双列
        recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)

        // 模拟图片数据
        val imageUrls = listOf(
            "https://via.placeholder.com/300x200",
            "https://via.placeholder.com/300x300",
            "https://via.placeholder.com/300x400",
            "https://via.placeholder.com/300x500",
            "https://via.placeholder.com/300x600",
            "https://via.placeholder.com/300x700",
            "https://via.placeholder.com/300x800",
            "https://via.placeholder.com/300x900",
            "https://via.placeholder.com/300x1000",
            "https://via.placeholder.com/300x1100",
            "https://via.placeholder.com/300x1200",
            "https://via.placeholder.com/300x1300",
            "https://via.placeholder.com/300x1400",
            "https://via.placeholder.com/400x300",
            "https://via.placeholder.com/400x600",
            "https://via.placeholder.com/400x900",
            "https://via.placeholder.com/400x1200",
        )

        // 设置 Adapter
        recyclerView.adapter = StaggeredImageAdapter(imageUrls)
    }
}

4. 创建 RecyclerView Adapter

kotlin 复制代码
package com.check.waterfall

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide

class StaggeredImageAdapter(private val imageUrls: List<String>) :
    RecyclerView.Adapter<StaggeredImageAdapter.ViewHolder>() {

    private val itemHeights = mutableMapOf<Int, Int>() // 缓存每个位置的高度

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val imageView: ImageView = view.findViewById(R.id.image_view)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_staggered_image, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        // 动态设置高度,使用缓存高度
        val params = holder.imageView.layoutParams
        if (!itemHeights.containsKey(position)) {
            itemHeights[position] = (400..800).random() // 仅随机生成一次高度
        }
        params.height = itemHeights[position] ?: 400
        holder.imageView.layoutParams = params

        // 使用 Glide 加载图片
        Glide.with(holder.itemView.context)
            .load(imageUrls[position])
            .placeholder(android.R.drawable.progress_indeterminate_horizontal)
            .error(android.R.drawable.stat_notify_error)
            .into(holder.imageView)
    }

    override fun getItemCount(): Int = imageUrls.size
}

5. 添加网络权限

XML 复制代码
<uses-permission android:name="android.permission.INTERNET" />

6. 效果展示

运行上述代码后,RecyclerView 将展示双列的瀑布流布局,图片加载时的高度随机化。使用 Glide 还可以处理图片的缓存和加载失败的情况。

相关推荐
Jackilina_Stone10 小时前
【faiss】用于高效相似性搜索和聚类的C++库 | 源码详解与编译安装
android·linux·c++·编译·faiss
棒棒AIT11 小时前
mac 苹果电脑 Intel 芯片(Mac X86) 安卓虚拟机 Android模拟器 的救命稻草(下载安装指南)
android·游戏·macos·安卓·mac
fishwheel11 小时前
Android:Reverse 实战 part 2 番外 IDA python
android·python·安全
消失的旧时光-194314 小时前
Android网络框架封装 ---> Retrofit + OkHttp + 协程 + LiveData + 断点续传 + 多线程下载 + 进度框交互
android·网络·retrofit
zcychong14 小时前
Handler(二):Java层源码分析
android
Chef_Chen16 小时前
从0开始学习R语言--Day58--竞争风险模型
android·开发语言·kotlin
用户20187928316717 小时前
演员的智能衣橱系统之Selector选择器
android
CYRUS_STUDIO17 小时前
OLLVM 混淆 + VMP 壳照样破!绕过加壳 SDK 的核心检测逻辑
android·逆向·汇编语言
Kapaseker17 小时前
憋了一周了,12000字深入浅出Android的Context机制
android