约束布局将多个视图分组为链中的单个项目

Question

我想在使用 ConstraintLayout 链接时实现以下布局，而不使用任何其他布局。所有视图之间的间距应该相等。

回答了类似的问题但是视图之间的间距不相等。

Answer 1

尝试使用 GuideLineConstraint 如下所示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6" />

    <Button
        android:id="@+id/button"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="3"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteY="147dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintStart_toEndOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button"
        tools:layout_editor_absoluteY="293dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button"
        tools:layout_editor_absoluteY="311dp" />

    <Button
        android:id="@+id/button4"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="4"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/button3" />

    <Button
        android:id="@+id/button5"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintTop_toTopOf="@+id/button4" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

输出：

Answer 2

一般来说，如果没有任何额外的视图和嵌套，平面视图层次结构无法实现所需的行为。

但是有一种特殊情况的解决方法，您可以事先知道视图 3 和 4 的宽度。对于该解决方法，您需要在 view 3 和 view 4 下方添加一个额外的不可见视图。附上示例代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<View
    android:id="@+id/view1"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorAccent"
    app:layout_constraintEnd_toStartOf="@id/view2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view2"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorAccent"
    app:layout_constraintEnd_toStartOf="@id/stub_view"
    app:layout_constraintStart_toEndOf="@id/view1"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/stub_view"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    app:layout_constraintEnd_toStartOf="@id/view5"
    app:layout_constraintStart_toEndOf="@id/view2"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view3"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginEnd="0dp"
    android:background="@color/colorAccent"
    app:layout_constraintStart_toStartOf="@id/stub_view"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view4"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorAccent"
    app:layout_constraintEnd_toEndOf="@id/stub_view"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view5"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorAccent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/stub_view"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

如果您不知道 View 3 和 View 4 在运行时的确切宽度 - 您可以再使用一种 hack 并将 LayoutChangeListeners 设置为这些视图以监视它们的宽度并更改在运行时相应存根视图的宽度。 但我不建议 使用第二种解决方法，因为它很可能会在您的代码库中添加更多有异味的代码。

在使用此解决方法之前，请考虑使用视图嵌套并将 View 3 和 View 4 放入一个 LinearLayout（或您选择的其他 ViewGroup）中。

约束布局将多个视图分组为链中的单个项目

Constraint Layout group multiple views as a single item in the chain

android

android-constraintlayout