安卓布局 : Comments activity similar to the Facebook app

标签 android facebook android-layout android-xml

我一直在查看 Facebook 评论 Activity :

facebook

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

我正在尝试通过执行以下操作自己复制他们的布局,但我无法显示超过 2 行。它一直将自己限制为“发送”箭头的大小,但在我下面的示例中,编辑文本永远不会超过 recyclerview。

myfacebook

以下是我的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>

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

Anoop M 的回答似乎最接近我想要做的,但 recyclerview 没有正确调整 - 见下图。想象一下,如果屏幕的蓝色部分被文本填满,当您输入超过 4 行时,edittext 最终会将文本 Conceal 在蓝色部分。 edittext 似乎越过了 recyclerview。这不会发生在 facebook 应用程序上,当 edittext 大小增加时,评论会随着 recyclerview 向上调整而完整显示。

Anoop M's answer

最佳答案

我建议使用 LinearLayout 作为父容器。然后,您可以通过在所有 subview 上应用 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>

显着变化:

  • 父容器现在是 LinearLayout
  • 所有 subview 都分配有layout_weights
  • EditTextsend 按钮已放置在水平 LinearLayout 中。
  • EditText
  • maxLines 属性已根据您的要求设置为 4。这样,EditText 的高度将不断增加,直到达到 4 行高,之后它将开始滚动。 发送 按钮将保持与第一行对齐。
  • inputType="textMultiLine" 已添加到 EditText 以指示此 EditText 的内容可以跨越多行。<
  • RecyclerView 将在 EditText 的 行数增加时缩小,反之亦然。

关于安卓布局 : Comments activity similar to the Facebook app,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33507758/

相关文章:

javascript - 如何从 MyApp Android 打开网络浏览器应用程序的 URL

php - MySQL 设计说明

ios - 解析和 Facebook 登录和注册返回 "User Cancelled Login"(iOS 8.1 + Swift 1.2)

ios - 应用程序使用iOS广告标识符,但不包含广告功能

android - 在圆形 ImageView 中显示时图像被拉伸(stretch)

android - Android 中整个应用程序的 OptionMenu?

android - Android studio 3.2中Build Bundle Option的使用

java - Android Facebook SDK Eclipse Proguard

android - Textview 显示部分文本

android - 选项卡不显示