раздувая компоновку в представлении реселлера по горизонтали и вертикали, FlexboxLayout с представлением рециркулятора добавляет представление по горизонтали автоматически по вертикали

Question

У меня есть макет, который раздувается в деятельности. Теперь вся информация отображается по вертикали, как показано ниже. вот так это выглядит

но я хочу, чтобы три textView должны располагаться горизонтально, а затем следующие три должны быть следующей строкой и так далее. Я написал так, как это должно выглядеть внизу. Вот как я хочу, чтобы это выглядело

это макет, который имеет recyclerview

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_my_groups"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        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_width="wrap_content"
         android:layout_height="wrap_content"
         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)
}

извините, если моего кода недостаточно.

Требуемый выход Есть ли способ, которым я мог бы реализовать это

Answer 1

вот полный пример

Шаг 1: добавить реализацию "com.google.android:flexbox:1.1.0" в build.gradle

Обратите внимание, что начиная с версии 1.1.0 библиотека должна использоваться с AndroidX. Пожалуйста, перейдите на AndroidX, если вы используете 1.1.0 или выше.

Пожалуйста, используйте 1.0.0, если вы не мигрировали на AndroidX.

Шаг 2: Activity.xml

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row_reverse"
    app:justifyContent="center"
    app:alignItems="center"
    app:flexWrap="wrap">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:padding="5dp"
        android:background="@drawable/flexbox_item_background"
        android:text="iOS"/>

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 3 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 FlexboxLayout с рециркуляцией

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

Answer 2

Я бы порекомендовал использовать для этого FlexBox от Google . Он будет автоматически размещать элементы по размеру экрана любым образом, указанным вами.