Question

我今天已经在这个布局上工作了大约7个小时，这甚至不计算我本周投入了多少时间。我今天早些时候发布过这篇文章，从那以后进展很快。

目标是让@+id/contactPicture（女孩）进入@+id/background;与@+id/myPicture（我）相同的事情。我试图让它看起来与此类似（最左边的图像）： cardui 但是，我不能再集中任何东西了。在这种情况下，@+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>

这是我的代码显示的内容

screenshot

如您所见，@+id/background与联系人图片重叠。我似乎无法将它们融入其中。

Answer 1

RelativeLayout中的后来儿童在Z轴上的位置高于RelativeLayout中的早期儿童。由于您的@+id/background窗口小部件在RelativeLayout中最后定义，因此它将是Z轴上的最高窗口。对于小部件重叠的位置，移动它们在<RelativeLayout>中的元素，使它们位于小部件之后，它们应该浮动在顶部，并且位于应该浮动在它们之上的小部件之前。我希望名为@+id/background的东西可能是第一个小部件，所以其他东西浮在它之上。

当然，您的一对空的LinearLayout小部件表明您可能在此布局中遇到其他问题。例如，如果@+id/background应该是某些内容的背景，那么“{something>”应该是 in LinearLayout，而不是基本上与它分离。

Answer 2

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

Answer 3

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

您需要优化您的绘图，背景，颜色，字体等，但这个想法是一个简单的布局，应该足够快。你隐藏了丢失的图片（取决于谁发送消息），或者你甚至可以膨胀两个布局（一个是左边的图片，一个是右边的图片），并决定在getView期间使用哪一个...昂贵的部分是膨胀，一旦你完成了（并将其放在一个观察者中），其余的应该让你的生活更简单：）

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

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

它的外观如下：

layout

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

RelativeLayout毫无意义

3 个答案: