约束布局流助手的分隔装饰 children

Question

如您所知，您可以为 RecyclerView 的 Items 设置一个 RecyclerView.ItemDecoration。但是，我想实现类似于 ConstraintLayout 的 Flow.

的东西

目前，我可以创建多个分隔视图并在每个普通视图之后将它们放入我的流程中，但是当我的 Flow 有多个视图并且这不是 DRY 并且这只是一个示例时，这可能会很麻烦重复自己。此外，值得注意的是，您不能在 Flow 中多次引用同一视图，因此您不能创建分隔视图并在不同位置多次引用它。务实地说，我可以为 TextView 创建一个自定义 background/style，在它们下面加一条线，以某种方式复制一个分隔符，但是如果 Flows children 不是 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>

考虑另一个像这样的具有多个视图的流程，在我看来，在每个项目之后放置一个分隔线是不明智的：

简而言之，我如何为约束布局的流程创建分隔项装饰 children？

编辑：这两个流程实际上都是 recyclerview 的项目

Answer 1

我没有找到使用 ConstraintLayout 和 Flow 实现此目的的方法，但是可以使用 FlexboxLayout 实现。因为 FlexboxLayout 有一个 dividerDrawable 属性，可以自动在子视图之间放置分隔线。

将 FlexboxLayout 库添加到 app/module 后，您可以像这样使用它：

<?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>

并为 @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>

这最终导致：

约束布局流助手的分隔装饰 children

Divider decoration for constraint layout flow helper children

android

dry

android-layout

kotlin

android-constraintlayout