Android版式:与Facebook应用类似的评论活动

Sim*_*mon 2 android facebook android-layout android-xml

我一直在看Facebook评论活动:

脸书

我一直想知道他们如何设法使edittext的大小从一行增加到最多4行,与此同时,包含这些帖子的recyclerview也向上调整并减小了大小。当您输入文字时,这会自动发生。

我正在尝试通过执行以下操作自己复制其布局,但我不能显示多于2行。它一直将自身限制为“发送”箭头的大小,但在下面的示例中,edittext永远不会超过recyclerview。

我的脸书

以下是我的xml布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/like_box"
        android:text="Number of Likes goes here"
        android:maxLines="1"
        android:minLines="1"
        android:layout_margin="16dp"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider"
        android:layout_below="@+id/like_box"
        android:background="@color/half_black"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_below="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/commenttext" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider2"
        android:layout_below="@+id/my_recycler_view"
        android:background="@color/half_black"/>


        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/commenttext"
            android:layout_toLeftOf="@+id/send"
            android:background="@null"
            android:paddingLeft="16dp"
            android:textSize="16sp"
            android:hint="Add a comment here"
            android:layout_alignTop="@+id/send"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/send"
            android:src="@drawable/ic_action_send_now"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
</RelativeLayout>
Run Code Online (Sandbox Code Playgroud)

有谁知道正确的xml布局代码是什么,以确保输入文本时,edittext和recyclerview都向上调整?我认为这只是简单的事情,例如将“ wrap_content”设置为我已经完成的edittext,但仍然无法正确调整。

Anoop M的答案似乎与我想做的最接近,但是recyclerview的调整不正确-请参见下图。想象一下,如果屏幕的蓝色部分充满了文本,那么当您输入4行以上时,edittext最终将文本隐藏在蓝色部分中。edittext似乎遍历了recyclerview。在Facebook应用程序上不会发生这种情况,当edittext大小增加时,随着recyclerview向上调整,注释将完全显示。

Anoop M的答案

Vik*_*ram 5

我建议使用a LinearLayout作为父容器。然后,可以通过layout_weights在所有子视图上应用来获得所需的结果:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/like_box"
        android:text="Number of Likes goes here"
        android:maxLines="1"
        android:minLines="1"
        android:layout_margin="16dp"
        android:layout_weight="0"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider"
        android:background="@color/half_black"
        android:layout_weight="0"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider2"
        android:background="@color/half_black"
        android:layout_weight="0"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:orientation="horizontal">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/commenttext"
            android:background="@null"
            android:paddingLeft="16dp"
            android:textSize="16sp"
            android:maxLines="4"
            android:inputType="textMultiLine"
            android:hint="Add a comment here" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/send"
            android:src="="@drawable/ic_action_send_now"
            android:layout_weight="0" />

    </LinearLayout>

</LinearLayout>
Run Code Online (Sandbox Code Playgroud)

显着变化:

  • 父容器现在 LinearLayout
  • 所有子视图均已layout_weights分配
  • EditTextsend按钮已被容纳在水平内LinearLayout
  • maxLines的属性EditText4根据您的要求进行设置。这样,EditText遗嘱的高度会不断增长,直到其4行高,然后开始滚动。该send按钮将保持与第一行对齐。
  • inputType="textMultiLine"已添加到中,EditText以表明其内容EditText可以跨越多行。
  • RecyclerViewEditText's行数增加时,它将缩小,反之亦然。

  • 完善。谢谢-xml有时可能会非常棘手,我很高兴您能帮助我解决这个问题。 (2认同)