带有水平GridLayoutManager的RecyclerView将其高度调整为最大行

Question

我想将RecyclerView与GridLayoutManager结合使用以实现类似的目的：

这里是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" />

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

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

Answer 1

假设您知道各个行的高度之间的比率，则可以尝试使用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中的各个行声明更容易。

如果项目类型的数量很大或经常更改（例如，不同屏幕上的不同项目类型），那么您当然也可以在代码中实现上述逻辑，前提是您可以访问各个项目类型的高度。只需对高度求和即可得到分母，然后求出所有高度的最大公约数，然后求和即可得出“简化因子”。

Answer 2

尝试使用StaggeredGridLayoutManager来设置不同的高度。将您的GridLayoutManager替换为下面的StaggeredGridLayoutManager

StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

Answer 3

我认为默认情况下，GridLayoutManager将子视图的大小限制为完全相同。

我调整代码以使用LinearLayoutManager，并且ViewHolder的视图是将两种类型的视图包装到RelativeLayout中。

请参见以下代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/top"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_margin="8dp"
        android:layout_alignParentTop="true"
        android:background="@color/colorAccent" />


    <View
        android:id="@+id/bottom"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:layout_below="@+id/top"
        android:background="@color/colorAccent" />
</RelativeLayout>

RecyclerAdapter：

        View view = LayoutInflater.from(viewGroup.getContext()).inflate(
                R.layout.item_normal,
                viewGroup,
                false
        );
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;

并设置LinearLayoutManager：

        LinearLayoutManager layoutManager = new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);