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 还可以处理图片的缓存和加载失败的情况。

相关推荐
m0_7482336416 分钟前
RabbitMQ 进阶
android·前端·后端
Mr.pyZhang4 小时前
Android构建系统 - 04 编译产物
android·linux
守城小轩10 小时前
Brave 132 编译指南 Android 篇 - 编译准备:系统要求与推荐工具 (三)
android·chrome·chrome devtools·指纹浏览器·浏览器开发·brave
m0_7482384210 小时前
MySQL Workbench菜单汉化为中文
android·数据库·mysql
程序员江同学11 小时前
Kotlin 技术月报 | 2025 年 2 月
android·kotlin
甜于酸13 小时前
MuMu模拟器Pro for Mac 安卓手机平板模拟器
android·macos·智能手机
顾林海15 小时前
深入解析 Android Activity 生命周期
android
XuanRanDev17 小时前
【构建工具】Gradle Kotlin DSL中的大小写陷阱:BuildConfigField
android·开发语言·kotlin
Nathan2024061620 小时前
Room - 基本使用及使用问题
android·面试·android jetpack
攻城狮_Dream21 小时前
基于 Python 的项目管理系统开发
android·数据库·python