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

问题描述 投票:0回答:4

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

场景1

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

预期输出

enter image description here

场景2

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

预期输出

enter image description here

场景3

当我在 reyclerview 中有 Two 项目时,我需要看起来像这样

预期输出

enter image description here

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

实际产量

enter image description here

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
            )
        }
    }

正如你所看到的,我的最后一项是从末尾切掉的。

enter image description here

我认为在我的框架布局中我使用了marginEnd 10 dp 会导致问题吗?如果您需要更多,请参考我的布局。还有一件事,我没有划分框架布局,而是将线性布局作为container。我正在添加我的 github link

android android-layout android-recyclerview android-linearlayout android-constraintlayout
4个回答
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)
}

1
投票

自定义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>

0
投票

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


0
投票

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

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
© www.soinside.com 2019 - 2024. All rights reserved.