在水平和垂直的recyclerview中膨胀布局，具有recycler视图的FlexboxLayout添加视图水平自动垂直

Posted 2023-04-19

【中文标题】在水平和垂直的recyclerview中膨胀布局，具有recycler视图的FlexboxLayout添加视图水平自动垂直

【英文标题】：inflating a layout in recyclerview in horizontal and vertical, FlexboxLayout with recycler view add view horizontal automatically vertical

【发布时间】：2019-04-05 19:20:49

【问题描述】：

我有一个在活动中膨胀的布局。现在所有信息都垂直显示，如下所示。 this is how it looks now

但我想要的是三个 textView 应该是水平的，然后接下来的三个应该作为下一行，依此类推。我已经发布了它应该看底部的方式。this is how I want it to look like

这是有recyclerview的布局

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_my_groups"
        android:layout_
        android:layout_
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:reverseLayout="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:visibility="gone"
        android:onClick="onOutsideClick"
        android:orientation="vertical"
        app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
        app:layout_constraintTop_toBottomOf="@id/rv_selected_groups" />

底部是一个单独的布局，只有一个我用来膨胀的 textView。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/tv_group_name"
         android:layout_
         android:layout_
         android:layout_gravity="center"
         android:layout_margin="8dp"
         android:background="@drawable/chip_drawable"
         android:fontFamily="sans-serif-condensed"
         android:gravity="center"
         android:textAllCaps="false"
         android:textColor="@android:color/black"
         android:textSize="14sp" />

还有我夸大布局的 kotlin 活动

 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GroupsViewHolder 
    val view = LayoutInflater.from(parent.context).inflate(R.layout.groups_item_row, parent, false)

    return GroupsViewHolder(view)

对不起，如果我的代码不够用。

需要的输出 有什么办法可以实现

【参考方案1】：

这是一个完整的例子

第 1 步： 在 build.gradle 中添加实现 'com.google.android:flexbox:1.1.0'

请注意，从 1.1.0 开始，该库预计将与 AndroidX 一起使用。如果您使用 1.1.0 或更高版本，请迁移到 AndroidX。

如果您还没有迁移到 AndroidX，请使用 1.0.0。

第 2 步： Activity.xml

<com.google.android.flexbox.FlexboxLayout
    android:layout_
    android:layout_
    app:flexDirection="row_reverse"
    app:justifyContent="center"
    app:alignItems="center"
    app:flexWrap="wrap">

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Android"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="ios"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Windows"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Linux"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Unix"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="MaxOS"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Java"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="C++"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Python"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Kotlin"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Hadoop"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Solr"/>

    <TextView
        android:layout_
        android:layout_
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="Lucene"/>

</com.google.android.flexbox.FlexboxLayout>

第三步 flexbox_item_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/holo_green_light" />

    <corners android:radius="5sp"/>

</shape>

输出：

第 3 步 带有 recyclerview 的 FlexboxLayout

RecyclerView recyclerView = (RecyclerView) 
context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
recyclerView.setLayoutManager(layoutManager);

【讨论】：

兄弟，我希望这可行，但你知道如何在 kotlin 中实现它吗？

您是否面临 kotlin 的任何具体问题，它的 java 代码非常少，如果您将此代码粘贴到 android studio 中，它会自动将代码转换为 kotlin，如果您要复制到 kotlin 文件中。

它显示类型不匹配，当我复制此代码并粘贴此代码时，它转换为 kotlin。像需要的是 RecyclerView.LayoutManager 但在 setLayoutManager() 中传递的 layoutManager 中找到了 FlexboxLayoutManager

你能分享一下快照吗？

如何在这里分享，我应该在我的问题中发布还是有其他方式

【参考方案2】：

我建议为此使用Google's FlexBox。它会以您指定的任何方式自动调整项目以适应屏幕。