约束布局流助手子项的分隔线装饰

Question

如您所知，您可以为RecyClerview的项目设置recyclerview.itemdemdecoration。但是，我想实现与此类似的东西，但是对于constraintlayout's flow。

目前，我可以创建多个分隔视图，并在每个正常视图之后将它们放入我的流程中重复自己的例子。同样，值得注意的是，您不能在Flow中不多次引用相同的视图，因此您不能在不同位置中多次创建分隔视图并多次引用它。务实地，我可以为textView在其下面创建自定义背景/样式以某种方式复制分隔线，但是如果flow s子女不是textView ？

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:checkable="true">

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

        <androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/product_item_detail_flow"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:orientation="vertical"
            android:padding="8dp"
            app:constraint_referenced_ids="product_item_category,materialDivider,product_item_name,materialDivider2,product_item_price"
            app:flow_verticalGap="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/product_item_image"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.divider.MaterialDivider
            android:id="@+id/materialDivider"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <com.google.android.material.divider.MaterialDivider
            android:id="@+id/materialDivider2"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/product_item_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="18sp"
            tools:text="@tools:sample/lorem" />

        <TextView
            android:id="@+id/product_item_category"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="14sp"
            tools:text="@tools:sample/lorem" />

        <TextView
            android:id="@+id/product_item_price"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            tools:text="@tools:sample/us_zipcodes" />

        <ImageView
            android:id="@+id/product_item_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:contentDescription="@string/product_image"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/product_item_detail_flow"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent=".33"
            tools:srcCompat="@tools:sample/avatars" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

考虑另一个类似的流程，我认为在每个项目不明智的情况下将分隔线放置在多个视图中：

因此，我如何创建一个分隔物的装饰，以使约束布局的流子孩子？

编辑：这两个流都实际上都是回收瓶的项目

Answer 1

我没有找到一种使用bentaintlayout和flow来实现此目的的方法，但是，可以使用 flexboxlayout 。因为flexboxlayout具有dividerDrawable属性，该属性会自动将分隔线放在子视图之间。

将flexboxlayout库添加到您的应用/模块后，您可以这样使用它：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:alignItems="stretch"
        app:dividerDrawable="@drawable/flex_divider"
        app:flexDirection="column"
        app:showDivider="middle">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            tools:layout_editor_absoluteX="63dp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            tools:layout_editor_absoluteX="126dp" />

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

</FrameLayout>

for @drawable/flex_divider创建以下内容：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="2dp"
        android:height="2dp" />
    <solid android:color="?colorPrimaryDark" />
</shape>

这最终导致：