Android ConstraintLayout：ImageView上的控件导致其布局错乱

Hey there, let's fix that layout mess you're dealing with! The root issue here is that your initial setup relied on layout_weight (a LinearLayout-specific property) within ConstraintLayout, and adding the Button/TextView groups broke the fragile constraint alignment you had. Let's rebuild this properly using ConstraintLayout's native tools to keep those two equal-width columns intact.

The Correct Approach: Horizontal Chains + Match Constraint Width #

Instead of relying on layout_weight, we'll use horizontal chains to lock the two columns into equal widths, and bind all controls in each column to stay within their respective half of the screen. Here's the complete working layout:

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

    <!-- Left Column: Button → TextView → ImageView -->
    <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/divider" />

    <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left Column Text"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/btn_left"
        app:layout_constraintStart_toStartOf="@+id/btn_left"
        app:layout_constraintEnd_toEndOf="@+id/btn_left" />

    <ImageView
        android:id="@+id/iv_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_left_image"
        android:scaleType="centerCrop"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_left"
        app:layout_constraintStart_toStartOf="@+id/btn_left"
        app:layout_constraintEnd_toStartOf="@+id/divider"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!-- Middle 1dp Divider -->
    <View
        android:id="@+id/divider"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5" />

    <!-- Right Column: Button → TextView → ImageView -->
    <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/divider"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right Column Text"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/btn_right"
        app:layout_constraintStart_toStartOf="@+id/btn_right"
        app:layout_constraintEnd_toEndOf="@+id/btn_right" />

    <ImageView
        android:id="@+id/iv_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_right_image"
        android:scaleType="centerCrop"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_right"
        app:layout_constraintStart_toEndOf="@+id/divider"
        app:layout_constraintEnd_toEndOf="@+id/btn_right"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!-- Enforce equal-width columns with a horizontal chain -->
    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="btn_left,btn_right"
        app:layout_constraintHorizontal_chainStyle="spread" />

</androidx.constraintlayout.widget.ConstraintLayout>

Key Fixes & Explanations #

• Horizontal Chain: The Group ties the two top buttons into a horizontal chain with spread style. This tells ConstraintLayout to split the available horizontal space equally between the two columns, ensuring each gets exactly 50% of the screen width.
• Match Constraint Width (0dp): Both ImageViews use android:layout_width="0dp" and are constrained to their column's boundaries (parent start/end and the divider). This makes them fill the entire width of their respective columns automatically.
• Divider Alignment: The divider is constrained to the top/bottom of the parent and uses layout_constraintHorizontal_bias="0.5" to stay perfectly centered between the two columns.
• Column Control Grouping: Each Button and TextView is constrained to the start/end of their column's Button (or ImageView), so they'll never drift outside their half of the screen.

This setup will stay stable even if you adjust the text in the TextViews or change the size of the Buttons—your ImageViews will always take up 50% of the screen width each.

内容的提问来源于stack exchange，提问作者Dana Robinson