Question

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

两侧基本上有两个imageView，中间有“聊天消息”的textView。在上面的三个中，下面是时间的textview。下面的屏幕截图就足够了。

这里的问题是如果“聊天消息”的文本只是行，textView在imageView上重叠的时间。

使用html-css作为float clear：两者都能更好地解决这个问题。

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

你有这个：

机器人：layout_below =＆＃34; @ + ID / MSGTEXT＆＃34;

更改为：

机器人：layout_below =＆＃34; @ ID / ICON2＆＃34;

修改

将minHeight放在TextView上，它等于图像高度，不会像我上面告诉你的那样改变。

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>

textview在relativeLayout中重叠

2 个答案: