类似于WhatsApp的布局,用于旁边的多行EditText和Buttons

时间:2015-02-17 23:30:11

标签: android button layout android-edittext multiline

我是这方面的新手,也是Android编程的新手。

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

在WhatsApp中,当EditText扩展其大小(多行)时,按钮位于底部。但它似乎不是父视图的底部,因为按钮已经在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>

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:14)

修改

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