如何在 Android 中将不同项目大小调整为不同大小的网格回收器视图？

Question

我需要创建这种网格回收器视图：

第一项比其他项最大的地方。网格可能只有 6 个项目，尺寸可能是这个：

第一个的宽度 = 320，高度 = 220。

其他人将有宽度 = 100 和高度 = 150。

我的 recyclerView 项目 XML：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/home_items_space">

<ImageView
    android:id="@+id/lookImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:scaleType="centerCrop"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

我的 recyclerView 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="@dimen/looks_grid_height"
android:paddingHorizontal="12dp">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/looksGrid"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
    app:layout_constraintTop_toTopOf="parent"
    app:spanCount="2"
    tools:itemCount="6" />
</androidx.constraintlayout.widget.ConstraintLayout>

我的适配器代码：

class LooksAdapter :
ListAdapter<HomeLook, LooksAdapter.LooksViewHolder>(DiffCallback()) {

companion object {
    private val FIRST_ITEM_INDEX = 0
}

var listener: ((HomeLook) -> Unit)? = null

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LooksViewHolder {
    return LooksViewHolder(
        ItemHomeLooksBinding.inflate(LayoutInflater.from(parent.context), parent, false)
    )
}

override fun onBindViewHolder(holder: LooksViewHolder, position: Int) {
    holder.bind(getItem(position), position)
}

class LooksViewHolder(private val binding: ItemHomeLooksBinding) :
    RecyclerView.ViewHolder(binding.root) {

    fun bind(look: HomeLook, index: Int) {

        if (index == FIRST_ITEM_INDEX) {
            binding.root.updateLayoutParams {
                width = binding.root.width / 2
                height = 310
            }
        } else {
            binding.root.updateLayoutParams {
                width = 100
                height = 150
            }
        }

        binding.lookImage.load(look.lookImage) {
            fallback(R.drawable.ic_camera_placeholder)
            error(R.drawable.ic_camera_placeholder)
        }
    }
}

我的 ViewHolder 代码：

class LooksHomeViewHolder(
    val binding: LooksGridViewBinding
) : RecyclerView.ViewHolder(binding.root) {

    companion object {
        fun from(parent: ViewGroup): LooksHomeViewHolder {
            return LooksHomeViewHolder(
            LooksGridViewBinding.inflate(LayoutInflater.from(parent.context), parent, false),
        )
    }
}

private val adapter = LooksAdapter().apply {
    stateRestorationPolicy = RecyclerView.Adapter.StateRestorationPolicy.PREVENT_WHEN_EMPTY
}

init {
    binding.looksGrid.adapter = adapter
    binding.looksGrid.itemAnimator = DefaultItemAnimator().apply {
        supportsChangeAnimations = false
    }
}

fun bind(
    lookBookEntry: HomeEntity.LookBookEntry,
    listener: (HomeLook) -> Unit,
    addPhotoListener: () -> Unit
) {
    adapter.submitList(lookBookEntry.looks)
    adapter.listener = listener
    binding.addLookButton.setOnClickListener { addPhotoListener.invoke() }
    binding.noLooksPlaceholder.isVisible = lookBookEntry.looks.isEmpty()
    }
}

我尝试使用 StaggerManager 并更改 imageView 和根大小。但这无济于事。

Answer 1

基本上你需要使用StaggeredLayoutManager来实现这个输出。您可以查看下面提到的链接

例子 ：- https://www.geeksforgeeks.org/recyclerview-as-staggered-grid-in-android-with-example/

文档：- https://developer.android.com/reference/androidx/recyclerview/widget/StaggeredGridLayoutManager