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

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

实现双列图片瀑布流布局，关键在于 RecyclerView 的 StaggeredGridLayoutManager 和图片的动态加载。以下是实现步调：

---

1. 添加须要依靠

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

1. implementation 'com.github.bumptech.glide:glide:4.15.1'
2. annotationProcessor 'com.github.bumptech.glide:compiler:4.15.1'

复制代码

2. 布局文件

主布局文件（activity_main.xml）

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     tools:context=".MainActivity">
9.     <androidx.recyclerview.widget.RecyclerView
10.         android:id="@+id/recyclerView"
11.         android:layout_width="match_parent"
12.         android:layout_height="match_parent"
13.         android:scrollbars="vertical" />
15. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

子项布局文件（item_staggered_image.xml）

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="match_parent"
5.     android:layout_height="wrap_content"
6.     android:orientation="vertical"
7.     android:padding="4dp">
9.     <ImageView
10.         android:id="@+id/image_view"
11.         android:layout_width="match_parent"
12.         android:layout_height="wrap_content"
13.         android:scaleType="centerCrop" />
15. </LinearLayout>

复制代码

3. RecyclerView 配置

1. package com.check.waterfall
3. import androidx.appcompat.app.AppCompatActivity
4. import android.os.Bundle
6. import androidx.recyclerview.widget.RecyclerView
7. import androidx.recyclerview.widget.StaggeredGridLayoutManager
9. class MainActivity : AppCompatActivity() {
11.     override fun onCreate(savedInstanceState: Bundle?) {
12.         super.onCreate(savedInstanceState)
13.         setContentView(R.layout.activity_main)
15.         val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
17.         // 设置 StaggeredGridLayoutManager 为双列
18.         recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
20.         // 模拟图片数据
21.         val imageUrls = listOf(
22.             "https://via.placeholder.com/300x200",
23.             "https://via.placeholder.com/300x300",
24.             "https://via.placeholder.com/300x400",
25.             "https://via.placeholder.com/300x500",
26.             "https://via.placeholder.com/300x600",
27.             "https://via.placeholder.com/300x700",
28.             "https://via.placeholder.com/300x800",
29.             "https://via.placeholder.com/300x900",
30.             "https://via.placeholder.com/300x1000",
31.             "https://via.placeholder.com/300x1100",
32.             "https://via.placeholder.com/300x1200",
33.             "https://via.placeholder.com/300x1300",
34.             "https://via.placeholder.com/300x1400",
35.             "https://via.placeholder.com/400x300",
36.             "https://via.placeholder.com/400x600",
37.             "https://via.placeholder.com/400x900",
38.             "https://via.placeholder.com/400x1200",
39.         )
41.         // 设置 Adapter
42.         recyclerView.adapter = StaggeredImageAdapter(imageUrls)
43.     }
44. }

复制代码

4. 创建 RecyclerView Adapter

1. package com.check.waterfall
3. import android.view.LayoutInflater
4. import android.view.View
5. import android.view.ViewGroup
6. import android.widget.ImageView
7. import androidx.recyclerview.widget.RecyclerView
8. import com.bumptech.glide.Glide
10. class StaggeredImageAdapter(private val imageUrls: List<String>) :
11.     RecyclerView.Adapter<StaggeredImageAdapter.ViewHolder>() {
13.     private val itemHeights = mutableMapOf<Int, Int>() // 缓存每个位置的高度
15.     class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
16.         val imageView: ImageView = view.findViewById(R.id.image_view)
17.     }
19.     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
20.         val view = LayoutInflater.from(parent.context)
21.             .inflate(R.layout.item_staggered_image, parent, false)
22.         return ViewHolder(view)
23.     }
25.     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
26.         // 动态设置高度，使用缓存高度
27.         val params = holder.imageView.layoutParams
28.         if (!itemHeights.containsKey(position)) {
29.             itemHeights[position] = (400..800).random() // 仅随机生成一次高度
30.         }
31.         params.height = itemHeights[position] ?: 400
32.         holder.imageView.layoutParams = params
34.         // 使用 Glide 加载图片
35.         Glide.with(holder.itemView.context)
36.             .load(imageUrls[position])
37.             .placeholder(android.R.drawable.progress_indeterminate_horizontal)
38.             .error(android.R.drawable.stat_notify_error)
39.             .into(holder.imageView)
40.     }
42.     override fun getItemCount(): Int = imageUrls.size
43. }

复制代码

5. 添加网络权限

1. <uses-permission android:name="android.permission.INTERNET" />

复制代码

6. 效果展示

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。