在卡片视图中均匀分布视图水平

Question

我需要帮助，我有 ConstraintLayout 和一些子视图，我还有一个卡片视图，它是 ConstraintLayout 的子视图，我需要使用一个 ConstraintLayout 在卡片视图上均匀分布 3 个视图以保持平面层次结构

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black"
    android:padding="@dimen/padding_normal">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/profile_image"
        android:layout_width="84dp"
        android:layout_height="84dp"
        android:backgroundTint="@color/black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_person" />

    <TextView
        android:id="@+id/full_name"
        style="@style/Material.Headline6.Light"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/none"
        app:layout_constraintStart_toEndOf="@id/profile_image"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Roger Mphile Nkosi" />

    <TextView
        android:id="@+id/job_title"
        style="@style/Material.Subtitle1.Light"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/none"
        app:layout_constraintStart_toEndOf="@id/profile_image"
        app:layout_constraintTop_toBottomOf="@id/full_name"
        tools:text="Android Developer" />
    
    <androidx.cardview.widget.CardView
        app:layout_constraintTop_toBottomOf="@id/job_title"
        app:layout_constraintStart_toEndOf="@id/profile_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >


    <TextView
        android:id="@+id/years_title"
        style="@style/Material.Caption.Light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/coffees_title"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@+id/profile_image"
        app:layout_constraintTop_toBottomOf="@id/job_title"
        tools:text="Years" />

    <TextView
        android:id="@+id/coffees_title"
        style="@style/Material.Caption.Light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/bugs_title"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@+id/years_title"
        app:layout_constraintTop_toBottomOf="@id/job_title"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="Coffees" />

    <TextView
        android:id="@+id/bugs_title"
        style="@style/Material.Caption.Light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/coffees_title"
        app:layout_constraintTop_toBottomOf="@id/job_title"
        tools:text="Bugs" />
    
    </androidx.cardview.widget.CardView>
    
</androidx.constraintlayout.widget.ConstraintLayout>

我试过链 styles 但没有获胜。 是否可以仅使用一个 ConstraintLayout 来实现我想要实现的目标？

Answer 1

这里的主要问题是您的 3 个视图的 xml 结构，它们是CardView而不是ConstraintLayout的直接子级，因此您在那里应用的任何约束属性都无法工作，因为直接父级是CardView 。

因此，您的结构应如下所示：

<androidx.cardview.widget.CardView>
    <androidx.constraintlayout.widget.ConstraintLayout>
        <TextView android:id="@+id/years_title"/>
        <TextView android:id="@+id/coffees_title" />
        <TextView android:id="@+id/bugs_title"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Now to evenly spread the above 3 views in the ConstraintLayout horizontally you have to apply for each TextView the attribute app:layout_constraintHorizontal_weight="1" , the android:layout_width="0dp" and link every TextView child with its neighbours eg. 对于第二个TextView将是： app:layout_constraintStart_toEndOf="@+id/years_title" ， app:layout_constraintEnd_toStartOf="@+id/bugs_title" 。

所以你的CardView的新结构应该如下所示：

<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/job_title"
    app:layout_constraintStart_toEndOf="@id/profile_image"
    app:layout_constraintEnd_toEndOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <TextView
            android:id="@+id/years_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_blue_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/coffees_title"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Years" />

        <TextView
            android:id="@+id/coffees_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_orange_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/years_title"
            app:layout_constraintEnd_toStartOf="@+id/bugs_title"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Coffees" />

        <TextView
            android:id="@+id/bugs_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_green_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/coffees_title"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Bugs" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

结果：

或者，如果您希望CardView包装到它的内容，它应该如下所示：

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/job_title"
    app:layout_constraintStart_toEndOf="@id/profile_image">

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

        <TextView
            android:id="@+id/years_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_blue_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/coffees_title"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Years" />

        <TextView
            android:id="@+id/coffees_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_orange_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/years_title"
            app:layout_constraintEnd_toStartOf="@+id/bugs_title"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Coffees" />

        <TextView
            android:id="@+id/bugs_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/holo_green_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/coffees_title"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_weight="1"
            tools:text="Bugs" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

结果：