【问题标题】:WhatsApp-like layout for multiline EditText and Buttons next to it类似 WhatsApp 的布局,用于多行 EditText 和旁边的按钮
【发布时间】:2015-04-18 20:12:12
【问题描述】:

我对此很陌生,对 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>

【问题讨论】:

  • 请提供您的xml

标签: android button layout android-edittext multiline


【解决方案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>

【讨论】:

  • 嗨,多莉,非常感谢。好的,我想我应该处理一下 weightSum 和 layout_weight 属性。我几乎可以在RelativeLayout中使用它。因此,如上所述,此页脚部分上方有一个 ListView。但现在的问题是……当键盘显示在屏幕上时,EditText 并没有真正展开。如果我隐藏键盘它会。好吧....如果您能进一步帮助我,最好提供 xml 文件。我只是为它感到羞耻,因为显然它包含由于误解或不理解而导致的一些错误:-D
  • 嗨@mar​​cus,我并没有真正理解你的问题。你能详细说明一下你的要求是什么吗?
  • 嗨,多莉,对不起。所以我添加了两张图片。我希望 EditText 最多显示 4 行。因此,当我输入文本时,父 LinearLayout 应根据 EditText 高度或要显示的行增加其高度。但是当显示键盘时,它不会这样做。如果我关闭键盘,EditText 最多显示 4 行,并且父 LinearLayout 也有更大的高度。但是我想在输入文本和显示键盘时已经实现这一点。收到了吗?
  • @marcus okie 我有你的问题。请在 xml 中查看我的编辑。您需要从内部Linear Layout 中删除android:minHeight="48dp"。我不会隐藏你多行编辑文本的行,并将线性布局高度同样增加到设备屏幕高度。
  • 非常感谢。正是我想要的。最后,我也可以评价答案了 :-) 再次感谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-11
  • 1970-01-01
  • 2018-06-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多