如何在recyclerView android中填充项目宽度子项？

Question

嘿我在安卓工作。我想让孩子们适应 recyclerview android 的整个视图。我有水平回收视图。我将在图表中展示我想要的内容。

场景1

当我在回收视图中有更多项目时，我想在我的回收视图中向孩子们展示这样的内容。

预期输出

场景 2

当我有 三个 项目时我想像这样显示。它将填充 reyclerview 中的整个视图。

预期输出

场景 3

当我在 reyclerview 中有两个项目时，我需要看起来像这样

预期输出

我遇到的问题是我有 3 个项目，视图未完全填充。实际上我想像场景2一样将整个视图拉伸到全宽。

实际输出

item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/drawable_selector"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp" />

        <TextView
            android:id="@+id/subText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/tagContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/tagText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingStart="10dp"
            android:paddingEnd="10dp" />

    </RelativeLayout>

</FrameLayout>

更新

在 @Cheticamp 建议后我做了这个代码

companion object {
        fun bindView(parent: ViewGroup): XYZViewHolder {
            val view = XyzLayoutBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
            val lp = view.container.layoutParams
            lp.width = parent.measuredWidth / 3
            return OptionsViewHolder(
                view
            )
        }
    }

正如你可以看到我的最后一个项目是从 结尾。

我认为在我的框架布局中我使用了 ma​​rginEnd 10 dp 是否会导致问题？如果您需要更多，请参考我的布局。还有一件事我没有划分框架布局，而是将线性布局作为容器。我正在添加我的 github 链接。

Answer 1

您可以在 onCreateViewHolder() 中更改 RecyclerView 项视图的宽度。 ViewGroup 父级是 RecyclerView。

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
    val lp = view.layoutParams
    // Change the width of the item view here
    lp.width = parent.measuredWidth / 3 // width is 1/3 of the width of the RecyclerView
    return ItemViewHolder(view)
}

Answer 2

自定义frameLayout类
使一个类继承 FrameLayout 或您使用的其他布局。

    public class SquareFrameLayout extends FrameLayout {
    public SquareFrameLayout(@NonNull Context context) {
        super(context);
    }

    public SquareFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SquareFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

onMeasure方法很重要。

然后将根布局项recyclerView更改为SquareFrameLayout（现在构建的类）
像这样：

<com.example.app.SquareFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_rv_item"
    android:orientation="vertical"
    android:padding="16dp"
    android:layout_margin="4dp"
    xmlns:tools="http://schemas.android.com/tools">

   
   //your items

</com.example.app.SquareFrameLayout>

Answer 3

您可以使用 Google 提供的 flexbox-layout 库。
您可以根据需要调整项目。
下载该应用程序并查看此演示是否适合您。 https://github.com/google/flexbox-layout

Answer 4

按如下方式更新您的适配器：

class CustomAdapter(
    private val items: List<Item>, 
    private val screenWidth: Int
) : RecyclerView.Adapter<CustomAdapter.CustomViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return CustomViewHolder(view)
    }

    override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {
        val itemWidth = calculateItemWidth()
        holder.itemView.layoutParams = RecyclerView.LayoutParams(itemWidth, RecyclerView.LayoutParams.MATCH_PARENT)
        holder.bindView(items[position])
    }

    override fun getItemCount(): Int = items.size

    private fun calculateItemWidth(): Int {
        return screenWidth / items.size
    }

    class CustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bindView(item: Item) {
            
        }
    }
}

在您的活动/片段中，

val screenWidth = Resources.getSystem().displayMetrics.widthPixels
val adapter = CustomAdapter(items, screenWidth)

recyclerView.layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
recyclerView.adapter = adapter