Constraint Layout中两个按钮居中布局问题求助

Hey there! Let's get those two buttons centered nicely below your checkIn_location TextView sorted out. I know you tried using layout_constraintHorizontal_bias without luck—let's adjust the constraints properly instead, since Constraint Layout works best when we leverage chains for grouped elements.

The Issue with Your Current Setup #

Right now, your buttons are only constrained to each other and one side of the parent, which means the bias property doesn't have a full range to work with. To center the entire pair of buttons, we need to create a horizontal chain that's anchored to both sides of the parent layout.

Modified Layout Code #

Here's the adjusted code (your existing TextViews stay exactly as they are):

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/checkIn_layout">

    <!-- Your original TextView elements remain unchanged -->
    <TextView android:id="@+id/checkIn_title" ... />
    <TextView android:id="@+id/checkIn_duration" ... />
    <TextView android:id="@+id/checkIn_location" ... />

    <!-- Updated Check Out Button -->
    <Button
        android:id="@+id/checkIn_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Check Out"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/RoundedButton"
        android:textColor="#399AEA"
        android:textSize="16dp"
        android:fontFamily="sans-serif-medium"
        android:textStyle="normal"
        android:padding="10dp"
        app:layout_constraintTop_toBottomOf="@+id/checkIn_location"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/onduty_button"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <!-- Updated On-Duty ImageButton -->
    <ImageButton
        android:id="@+id/onduty_button"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:padding="10dp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_power"
        android:background="@drawable/PowerButton"
        app:layout_constraintTop_toBottomOf="@+id/checkIn_location"
        app:layout_constraintStart_toEndOf="@+id/checkIn_button"
        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

Key Changes Explained #

• Horizontal Chain Setup: By linking the end of the first button to the start of the second, and vice versa, we create a chain. Adding app:layout_constraintHorizontal_chainStyle="packed" makes the buttons sit close together instead of spreading out.
• Full Parent Anchoring: We tie the start of the first button to the parent's left edge, and the end of the second button to the parent's right edge. This tells Constraint Layout to automatically center the entire button group horizontally.
• No Need for Bias: The packed chain handles centering for us, so we don't need to mess with bias here. If you ever want to nudge the whole group left or right later, you can add app:layout_constraintHorizontal_bias="0.4" (or another value) to either button in the chain.

This setup will keep your buttons centered below the checkIn_location TextView no matter what text it displays—whether it's "Glow New Media" or "No Location".

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