textview 在 relativeLayout 中重叠

Question

我有一个聊天应用程序的自定义列表。

它的两侧基本上有两个imageView，中间有“聊天消息”的textView。 在上面所有三个的下方，底部有时间的文本视图。 下面的截图就足够了。

这里的问题是如果“聊天消息”的文本只有一行，那么 textView 与 imageView 重叠的时间。

使用 html-css as float clear:both 可以更好地纠正这个问题。

我在 LinearLayout here 中使用嵌套的 RelativeLayout 对此进行了另一个答案，但我想使用单个 RelativeLayout 保持干净。

布局xml如下-

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

<ImageView
    android:id="@+id/icon1"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/msgText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:textSize="20sp"
    android:layout_marginLeft="42dp"
    android:layout_marginRight="42dp"
    android:text="this is a test" />

<ImageView
    android:id="@+id/icon2"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentRight="true"
    android:src="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/timeText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="40px"
    android:layout_marginTop="10dp"
    android:layout_below="@+id/msgText"
    android:layout_alignParentRight="true"
    android:gravity="right"
    />
</RelativeLayout>

截图如下 -

Answer 1

你有这个：

android:layout_below="@+id/msgText"

改成这样：

android:layout_below="@id/icon2"

编辑

在您的消息 TextView 上设置一个 minHeight 等于图像高度，并且不要像我上面告诉你的那样改变。

Answer 2

你应该改用LinearLayout

头像在左侧一侧的布局示例

<?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="wrap_content"
    android:orientation="vertical" >

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

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="50dp"
            android:background="#ff0000"
            android:layout_height="50dp" />

        <TextView
            android:id="@+id/content"
            android:layout_width="0dp"
            android:text="content here"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:text="date here"
        android:layout_height="wrap_content" />

</LinearLayout>

头像在右侧一侧的布局示例

<?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="wrap_content"
    android:orientation="vertical" >

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

        <TextView
            android:id="@+id/content"
            android:layout_width="0dp"
            android:text="content here"
            android:gravity="right"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="50dp"
            android:background="#ff0000"
            android:layout_height="50dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:text="date here"
        android:layout_height="wrap_content" />

</LinearLayout>