Android布局设置：5个输入字段与按钮的间距配置及垂直链问题咨询

Hey there! Great question—let’s break down how to build this layout exactly how you want it, without those annoying vertical chain shifts messing with your input fields.

Can we make the 5 input fields an independent block? #

Absolutely! The key is to wrap those 5 EditTexts in a container view (like a LinearLayout) so they act as a single cohesive unit. This way, any ConstraintLayout chains or constraints you apply will only affect the container itself, not the individual input fields inside it. Perfect for keeping those inputs tightly spaced at 0 without unwanted movement.

Top Solutions #

Solution 1: LinearLayout + ConstraintLayout (Simplest Approach) #

This is the most straightforward way to lock your inputs together and set equal margins for the entire block + button:

1. Wrap inputs in a vertical LinearLayout:

   • Set android:orientation="vertical" to stack inputs top-to-bottom.
   • Disable dividers and set all margins on individual EditTexts to 0 to eliminate spacing between them.
   • This LinearLayout becomes your "input block" that you can treat as one element.

2. Add the button and input block to ConstraintLayout:

   • Use constraints to set equal margins between the entire input block + button and the parent layout's edges.
   • Link the bottom of the input block to the top of the button with a consistent margin (if you want space between them), and set equal top/bottom/left/right margins for the whole group relative to the parent.

Here’s a code snippet to illustrate:

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

    <!-- Input Block: 5 EditTexts with 0 spacing -->
    <LinearLayout
        android:id="@+id/input_block"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:showDividers="none"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="16dp"> <!-- Equal margin from top/left/right edges -->

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input 1"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input 2"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input 3"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input 4"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Input 5"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="0dp"/>

    </LinearLayout>

    <!-- Button with equal margin from bottom edge -->
    <Button
        android:id="@+id/submit_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit"
        app:layout_constraintTop_toBottomOf="@id/input_block"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_margin="16dp"/> <!-- Matches input block's margin -->

</androidx.constraintlayout.widget.ConstraintLayout>

Solution 2: ConstraintLayout Without LinearLayout (For More Control) #

If you prefer to stick entirely to ConstraintLayout (no nested LinearLayout), you can chain the 5 EditTexts together vertically with 0 bias and 0 margin between them, then group them using a Group to treat them as a single block. Then apply constraints to the Group and Button for equal margins:

• Use app:layout_constraintVertical_chainStyle="packed" on the topmost EditText to keep them tightly spaced.
• Set android:layout_marginTop="0dp" between each consecutive EditText.
• Add a Group with app:constraint_referenced_ids pointing to all 5 EditTexts, then constrain the Group to the parent with equal margins.

Why This Works #

By wrapping inputs in a container (or grouping them), you isolate them from the outer constraint system. Vertical chains only affect the container/Group and the button, so your individual input fields stay exactly where you want them—no unwanted shifting.

内容的提问来源于stack exchange，提问作者R.T.