Android开发：实现Instagram聊天式内嵌发送按钮的EditText求助

Hey there! I’ve dealt with exactly this kind of chat input layout headache before, so I know how frustrating it is when your text overlaps the send button or your line/character limits don’t behave as expected. Let’s get this fixed up to match that clean Instagram-style input!

The Root of Your Problem #

Right now, your EditText is set to match_parent for width, which means it’s taking up the entire width of its parent—including the space where your send button is sitting. That’s why your text is getting pushed under the button. Plus, without proper layout constraints, your maxLines and maxLength settings might not be visually working as you expect, even if they’re technically active.

Fix 1: Use a Constraint Layout (or Relative Layout) to Block Overlap #

The easiest way to keep your EditText from overlapping the send button is to use a layout that lets you define clear boundaries between the two views. I’ll show you both a modern ConstraintLayout approach and a RelativeLayout approach (since your original code uses RelativeLayout attributes).

Option A: ConstraintLayout (Recommended for Modern Apps)

This is the most flexible approach for complex layouts:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/itemEditText_id"
        android:layout_width="0dp" <!-- Match constraints to fill space between left and button -->
        android:layout_height="wrap_content"
        android:minHeight="70dp" <!-- Keep minimum height as you wanted -->
        android:lines="2"
        android:maxLines="2"
        android:scrollHorizontally="false" <!-- Force text to wrap instead of scroll horizontally -->
        android:maxLength="69"
        android:scrollbars="vertical"
        android:background="@drawable/round_border_edit_text"
        android:hint="Go ahead, send a message"
        android:inputType="textMultiLine|textLongMessage"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:paddingHorizontal="16dp" <!-- Add padding so text doesn't touch the border -->
        android:paddingVertical="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/itemSendButton_id" <!-- Tie right edge to button's left -->
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintMarginEnd="8dp"/>

    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/itemSendButton_id"
        android:layout_width="25dp"
        android:layout_height="20dp"
        android:layout_marginEnd="11dp"
        android:background="@color/colorFacebookBtnText"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_send"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Option B: RelativeLayout (If You Prefer the Old School Approach)

If you’re sticking with RelativeLayout, adjust your EditText to sit to the left of the send button:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/itemEditText_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/itemSendButton_id" <!-- Position left of the button -->
        android:layout_centerVertical="true"
        android:layout_marginEnd="8dp"
        android:minHeight="70dp"
        android:lines="2"
        android:maxLines="2"
        android:scrollHorizontally="false"
        android:maxLength="69"
        android:scrollbars="vertical"
        android:background="@drawable/round_border_edit_text"
        android:hint="Go ahead, send a message"
        android:inputType="textMultiLine|textLongMessage"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:paddingHorizontal="16dp"
        android:paddingVertical="12dp"/>

    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/itemSendButton_id"
        android:layout_width="25dp"
        android:layout_height="20dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="11dp"
        android:background="@color/colorFacebookBtnText"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_send"/>

</RelativeLayout>

Key Fixes Explained #

• No More Overlap: By tying the EditText’s right edge to the send button’s left edge, the EditText will automatically stop expanding where the button starts—so your text will never go under it again.
• Proper Height Handling: Using wrap_content with minHeight="70dp" keeps the input bar tall enough when empty, but lets it expand slightly if you type two lines of text.
• Padding: Adding padding inside the EditText makes the text look cleaner and keeps it from touching the rounded border.
• Character/Line Limits: Now that the layout is correct, your maxLength="69" and maxLines="2" will work as intended—you’ll see the text wrap to two lines, and stop accepting input after 69 characters.

Give these changes a try, and your chat input should look and behave just like Instagram’s in no time!

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