改善 recyclerView 项目之间的间距

Question

我有一个带有 recycleView 的 activity 这是我应该在设计中展示的内容

我用这段代码来展示一下

    val arr:ArrayList<string> = arrayListOf("English","Intermediate","English","English","arr","UICollectionViewFlowLayoutFlowFlowFlow","English","UICollectionViewDelegate","English","Intermediate","UIViewController","viewDidLoad","Intermediate","String","Intermediate","arr","Intermediate","UIKit","Intermediate","English","columnLayout","English","languageLabel")

    recyclerView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL)

    recyclerView.layoutManager = GridLayoutManager(this, 3)

    adaAdapter = CustomAdapter(this, arr)

    recyclerView.adapter = adaAdapter

使用此适配器

class CustomAdapter(val context: DreamsActivity, val items: ArrayList<String>) : RecyclerView.Adapter<CustomAdapter.ViewHolderProductList>() {

    // holds this device's screen width,
    private var screenWidth = 0

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderProductList {

        val displayMetrics = DisplayMetrics()

        context.windowManager.getDefaultDisplay().getMetrics(displayMetrics)

        screenWidth = displayMetrics.widthPixels

        val layoutInflater = LayoutInflater.from(parent.context)

        val cellForRow = layoutInflater.inflate(R.layout.dreams_collection,parent, false)

        val devicewidth: Int = (displayMetrics.widthPixels / 3) - 10

        val params = cellForRow.getLayoutParams() as GridLayoutManager.LayoutParams

        params.width = devicewidth

        cellForRow.setLayoutParams(params)

        return ViewHolderProductList(cellForRow)

    }

    override fun getItemCount(): Int {
        return items.size
    }

    override fun onBindViewHolder(holder: ViewHolderProductList, position: Int) {

        val item = items[position]

        holder.typeTv.text = item

    }

    inner class ViewHolderProductList(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var typeTv: TextView =  itemView.findViewById(R.id.typeTv)
        var mainL: ConstraintLayout =  itemView.findViewById(R.id.mainL)


    }
}

有了这个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">
  
    <RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="15dp"
        android:background="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" /> 

</androidx.constraintlayout.widget.ConstraintLayout>

和项目布局

<?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:id="@+id/mainL"
    android:layout_width="60dp"
    android:padding="10dp"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/typeTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginBottom="5dp"
            android:text="TextView"
            android:textSize="14sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

但是我明白了

并且不知道该怎么做，因为我需要根据文本长度动态设置项目数，但 GridLayoutManager 仅将列数设置为静态。

非常感谢任何帮助

Answer 1

所需的布局往往是 Chips 而不是 RecyclerView

这是一个演示：

Material 应用 gradle 依赖：implementation 'com.google.android.material:material:1.4.0'

布局：

<com.google.android.material.chip.ChipGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_chip_group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    app:chipSpacing="16dp"
    app:chipSpacingHorizontal="4dp"
    app:chipSpacingVertical="4dp" />

添加筹码：

val arr =
    arrayListOf(
        "English",
        "Intermediate",
        "English",
        "English",
        "arr",
        "UICollectionViewFlowLayoutFlowFlowFlow",
        "English",
        "UICollectionViewDelegate",
        "English",
        "Intermediate",
        "UIViewController",
        "viewDidLoad",
        "Intermediate",
        "String",
        "Intermediate",
        "arr",
        "Intermediate",
        "UIKit",
        "Intermediate",
        "English",
        "columnLayout",
        "English",
        "languageLabel"
    )

fun addChips(context: Context) {
    val chipGroup = findViewById<ChipGroup>(R.id.my_chip_group)
    
    for (i in 0 until arr.size) {
        val chip = Chip(context)
        chip.layoutParams = FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
        chip.text = arr[i]
        chipGroup.addView(chip)
    }
}

Answer 2

您要的是具有来自 Material Components 的 Chip 视觉外观的东西。虽然 Chips 的文档建议将它们放在 ChipGroup 中，但是如果您有足够多的视图来覆盖屏幕，这将失去回收视图的好处。另一方面，如果它们需要表现得像 RadioGroup，您一次只能 select 切换一个，那么 ChipGroup 会更容易使用。

要使用 RecylerView 执行此操作，您可以更改项目视图布局以使用 Chip 而不是 TextView。将项目的布局宽度设置为 wrapContent。然后使用 Google 的 Flexbox Layout 库来获取可变长度项目的布局。

在 Gradle 依赖项中：implementation 'com.google.android.flexbox:flexbox:3.0.0'

在你的 activity:

recyclerView.layoutManager = FlexboxLayoutManager(this)
    .apply { flexDirection = FlexDirection.ROW }

结果：

有一个很有用。

改善 recyclerView 项目之间的间距

Improve spacing between recycleView items

android

kotlin

android-recyclerview