首页 > 解决方案 > 具有水平 GridLayoutManager 的 RecyclerView 将其高度调整为最大行

问题描述

我想用RecyclerViewwithGridLayoutManager来实现这样的目标:

目标

这是GridLayoutManager水平方向和2行。对我来说重要的RecyclerView是设置为wrap_content.

所以我试图用这样的代码来实现我的目标:

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private val adapter = Adapter()
    private val layoutManager = GridLayoutManager(this, 2, RecyclerView.HORIZONTAL, false)

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

        recyclerView.adapter = adapter
        recyclerView.layoutManager = layoutManager

        adapter.submitList(listOf(Unit, Unit, Unit, Unit))
    }
}

Adapter.kt

class Adapter : ListAdapter<Any, ItemHolder>(DiffCallback()) {

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

    override fun onBindViewHolder(holder: ItemHolder, position: Int) {
    }

    override fun getItemViewType(position: Int): Int {
        return when {
            position % 2 == 0 -> R.layout.item_small
            else -> R.layout.item_normal
        }
    }

    class DiffCallback : DiffUtil.ItemCallback<Any>() {
        override fun areItemsTheSame(oldItem: Any, newItem: Any) = false
        override fun areContentsTheSame(oldItem: Any, newItem: Any) = false
    }

    class ItemHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

activity_main.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="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

item_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="8dp"
    android:background="@color/colorAccent" />

item_small.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_margin="8dp"
    android:background="@color/colorAccent" />

结果不幸的是,每一行都延伸到网格中的最大行:

当前的

问题是如何删除第一行和第二行之间的间距?请记住,我必须具有可滚动的水平网格,其高度取决于其内容。并且项目必须具有固定大小。

标签: androidkotlinandroid-recyclerviewandroidxgridlayoutmanager

解决方案


假设您知道各个行的高度之间的比率,您可以尝试使用SpanSizeLookup来调整每行的高度。在您的简单情况下,较小的项目(50dp)将占用一行(跨度大小 1),而较大的项目(100dp)将占用两行(跨度大小 2),因此整个网格将包含 3 行。

当然,对于更复杂的行配置,比例可能会稍微复杂一些:假设我想要高度为 32dp/48dp/64dp 的行,那么高度比是 32/144、48/144 和 64/144,我们可以简化为 2/9、3/9、4/9,总共有 9 行,单个项目的跨度大小为 2、3 和 4。在极端情况下,这可能会导致大量行(当分数无法简化时),但假设您使用某种类型的网格(x8、x10 等)并且项目大小合理,它应该仍然是可管理的.

无论如何,在您的情况下,代码将是这样的:

val layoutManager = GridLayoutManager(this, 3, RecyclerView.HORIZONTAL, false)
layoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
    override fun getSpanSize(position: Int) = when (position % 2) {
        0 -> 1 // 50dp item
        else -> 2 // 100dp item
    }
}

给定更多行,when语句将变得更复杂,但如果您手头已有适配器,则可以更轻松地区分语句getItemViewType中的各个行。when

如果项目类型的数量很大或经常变化(例如不同屏幕上的不同项目类型),您当然也可以在代码中实现上述逻辑,假设您可以访问各个项目类型的高度。简单地将高度相加以获得分母,然后找到所有高度的最大公约数和总和以找到“简化因子”。


推荐阅读