类似 WhatsApp 的多行 EditText 布局和旁边的按钮

Question

对此很陌生，对 Android 编程也很陌生。

我正在尝试制作类似于 WhatsApp 聊天中的布局 activity。所以我想要实现的是获得与 EditText 和旁边的按钮相同的布局和行为。这意味着中间有一个用于表情符号和 EditText 的左侧按钮，以及一个用于发送文本的右侧按钮。

在 WhatsApp 中，当 EditText 扩大其大小（多行）时，按钮会停留在底部。但它似乎不是父视图的底部，因为 Buttons 之前已经居中到 EditText。

我尝试了很多，比如将三个视图放在 TableLayout 的行中。或者只是使用 RelativeLayout。但它没有一个能正常工作。

谁能告诉我如何做到这一点？我可以提供我的 XML 但是......好吧......这显然很糟糕 :D

提前致谢！

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin">

<ListView
    android:id="@+id/messages"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_above="@+id/footer_section">
</ListView>

<LinearLayout
    android:id="@+id/footer_section"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:minHeight="48dp">

        <ImageView
            android:id="@+id/emoticons_button"
            android:layout_height="match_parent"
            android:layout_width="48dp"
            />

        <EditText
            android:id="@+id/message_text"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:inputType="textMultiLine"
            android:minLines="1"
            android:maxLines="4"/>

        <ImageView
            android:id="@+id/send_button"
            android:layout_height="match_parent"
            android:layout_width="48dp"
            android:layout_gravity="center_vertical"/>

</LinearLayout>

Answer 1

编辑

<ListView
    android:id="@+id/messages"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/footer_section"
    android:layout_alignParentTop="true" >
</ListView>

<LinearLayout
    android:id="@+id/footer_section"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" 
    android:background="#eeeeee">

    <ImageView
        android:id="@+id/emoticons_button"
        android:layout_width="48dp"
        android:layout_height="match_parent" />

    <EditText
        android:id="@+id/message_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fadeScrollbars="false"
        android:layout_weight="1"
        android:inputType="textMultiLine" 
        android:maxLines="4"
        android:minLines="1"
        android:textColor="@android:color/black" />

    <ImageView
        android:id="@+id/send_button"
        android:layout_width="48dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical" />
</LinearLayout>

正如您所说，您是 android 的新手，您应该尝试使用 Linear Layout 来实现您想要实现的布局。

尝试以下 xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="1dip"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/btn_emoticon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_emoticon" />

    <EditText
        android:id="@+id/chat_text"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:paddingLeft="8dp"
        android:paddingRight="6dp" />

    <ImageButton
        android:id="@+id/btn_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_send_grey" />
</LinearLayout>
</LinearLayout>

类似 WhatsApp 的多行 EditText 布局和旁边的按钮

WhatsApp-like layout for multiline EditText and Buttons next to it

layout

android

button

multiline

android-edittext