相对布局没有意义

Question

我今天已经在这个布局上工作了大约 7 个小时，这还没有算上我这周投入了多少时间。 我今天早些时候发布了这个，从那以后取得了巨大的进步。

目标是让@+id/contactPicture（女孩）进入@+id/background； @+id/myPicture（我）也一样。我试图让它看起来类似于这个（最左边的图像）： 但是，我再也无法使任何东西居中和对齐了。在这种情况下，@+id/background 资源是“卡片”。我不完全确定@+id/holder 做了什么，但我知道这很关键。 感谢您的任何帮助。这是我的代码：

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


<LinearLayout
    android:id="@+id/holder"
    android:layout_gravity="center"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp" />

<ImageView
    android:id="@+id/myPicture"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginLeft="0dp"
    android:layout_marginTop="0dp"
    android:maxHeight="48dp"
    android:maxWidth="48dp"
    android:minHeight="48dp"
    android:minWidth="48dp"
    android:scaleType="centerCrop" />

<ImageView
    android:id="@+id/contactPicture"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_marginTop="24dp"
    android:gravity="center"
    android:maxHeight="48dp"
    android:maxWidth="48dp"
    android:minHeight="48dp"
    android:minWidth="48dp"
    android:scaleType="centerCrop"
    tools:ignore="Suspicious0dp" />

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/body"
    android:layout_gravity="center_vertical"
    android:layout_marginTop="-3dp"
    android:ellipsize="marquee"
    android:fadingEdge="horizontal"
    android:fontFamily="sans-serif-light"
    android:gravity="center_vertical"
    android:paddingBottom="3dp"
    android:paddingRight="5dp"
    android:textColor="@color/dateColorReceived"
    android:textSize="12sp" />

<ImageView
    android:layout_below="@+id/name"
    android:id="@+id/media"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:padding="10dp"
    android:scaleType="centerInside"
    android:visibility="gone" />

<View android:layout_below="@+id/media"
      android:id="@+id/gifView"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:padding="10dp"
      android:visibility="gone" />

<TextView
    android:id="@+id/date"
    android:layout_below="@+id/gifView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif-light"
    android:gravity="left"
    android:textColor="@color/dateColorReceived"
    android:textSize="12sp"
    android:visibility="visible" />

    <TextView
        android:id="@+id/body"
        android:background="@+id/background"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/myPicture"
        android:layout_toRightOf="@+id/contactPicture"
        android:ellipsize="marquee"
        android:fadingEdge="horizontal"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:textAlignment="center"
        android:textColor="@color/textColorReceived"
        android:textSize="14sp" />

<LinearLayout
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="52dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" />

</RelativeLayout>

这是我的代码显示的内容

如您所见，@+id/background 与联系人图像重叠。我似乎无法让他们参与其中。

Answer 1

RelativeLayout 中较晚的孩子在 Z 轴上高于 RelativeLayout 中的较早孩子。由于您的 @+id/background 小部件是在 RelativeLayout 中最后定义的，因此它将是 Z 轴上的最高点。对于您的小部件重叠的地方，将它们的元素移动到<RelativeLayout> 中，这样它们就在它们应该浮动在上面的小部件之后，并且在应该浮动在它们上面的小部件之前。我希望名为 @+id/background 的东西可能是第一个小部件，所以其他东西会浮在上面。

当然，您的一对空的LinearLayout 小部件表明您可能对这种布局有其他问题。例如，如果@+id/background 应该是某物的背景，那么“某物”通常应该在LinearLayout 的内部，而不是在很大程度上与它分离。

Answer 2

您应该考虑将图像和语音框都放在表格行中。这将更容易保持他们之间的距离。

Answer 3

我会做这样的事情并在我的适配器中隐藏/显示正确的联系人图片。

您将需要优化您的可绘制对象、背景、颜色、字体等，但这个想法是一个简单的布局，应该足够快。您隐藏丢失的图片（取决于谁发送消息），或者您甚至可以膨胀两个布局（一个带有左侧的图片，一个在右侧）并决定在 getView 期间使用哪一个......昂贵的部分是膨胀，一旦你做到了（并将它放在一个视图中），那么其余的应该会让你的生活更简单:)

注意：我注意到您希望文本“包裹”正文，因此请根据您的喜好进行调整，使其看起来更像文本“气泡”（如 whatsapp）。

您需要告诉内容布局 wrap_content（去除权重），然后使用对齐方式（左或右）显示和隐藏相应的图片。

看起来是这样的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/background_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  <LinearLayout
      android:id="@+id/row_background"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:background="@color/medium_gray"
      android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/left_picture"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:visibility="visible"
        android:src="@drawable/ic_launcher"
        android:maxHeight="48dp"
        android:maxWidth="48dp"
        android:minHeight="48dp"
        android:minWidth="48dp"
        android:scaleType="centerCrop"
        android:contentDescription="contact picture" />
    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="@color/light_gray"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      <TextView
          android:id="@+id/contact_name_tv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_vertical"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:ellipsize="marquee"
          android:fadingEdge="horizontal"
          android:layout_margin="2dp"
          android:gravity="center_vertical"
          android:text="John Doe"
          android:textStyle="bold"
          android:textColor="@color/white"
          android:textSize="12sp" />
      <TextView
          android:id="@+id/msg_body"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="this is a sample message…"
          android:ellipsize="marquee"
          android:fadingEdge="horizontal"
          android:layout_marginLeft="2dp"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:textAlignment="center"
          android:textColor="@color/white"
          android:textSize="14sp" />
      <TextView
          android:id="@+id/msg_date"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="left"
          android:text="5 hours ago"
          android:paddingLeft="5dp"
          android:paddingRight="5dp"
          android:layout_margin="2dp"
          android:textColor="@color/white"
          android:textSize="12sp"
          android:visibility="visible" />
    </LinearLayout>
    <ImageView
        android:id="@+id/right_picture"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:visibility="visible"
        android:src="@drawable/ic_launcher"
        android:maxHeight="48dp"
        android:maxWidth="48dp"
        android:minHeight="48dp"
        android:minWidth="48dp"
        android:scaleType="centerCrop"
        android:contentDescription="contact picture" />
  </LinearLayout>
</RelativeLayout>