如此接近这个布局，RelativeLayout / LinearLayout很难

时间：2014-02-01 15:16:19

标签： android android-layout android-linearlayout relativelayout

我在一周前发布了这个问题，并没有真正了解回复的人的意思。我希望得到一些澄清。

修改 我已经非常接近;实际上，我已经离我最近了。这是我的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/background"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:minHeight="52dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/holder"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

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

        <TextView
            android:id="@+id/body"
            android:textAlignment="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:textSize="14sp"
            android:ellipsize="marquee"
            android:fadingEdge="horizontal"
            android:textColor="@color/textColorReceived"/>

        <ImageView
            android:id="@+id/myPicture"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="24dp"
            android:layout_gravity="right"
            android:gravity="center"
            android:scaleType="centerCrop"
            android:maxHeight="48dp"
            android:maxWidth="48dp"
            android:minHeight="48dp"
            android:minWidth="48dp"/>

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

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

        <View   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_gravity="bottom"
            android:gravity="center_horizontal"
            android:textSize="12sp"
            android:visibility="visible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:textColor="@color/dateColorReceived"/>

 </LinearLayout>
    </RelativeLayout>

但是，有些消息看起来不对。他们真的扭曲了。似乎无法弄清楚为什么。另外，@+id/myPicture并不总是保持在右侧。

目前的状态： screenshotOfCurrentState

2 个答案:

答案 0 :(得分：1)

尝试以下：

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

    <ImageView
        android:id="@+id/myPicture"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="24dp"
        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_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/body"
        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" />

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

</RelativeLayout>

不要使用linearlayout尝试仅使用相对布局创建布局并相互对齐视图

答案 1 :(得分：1)

你没有得到你想要的东西，因为你布置你的视图的方式使相对布局无用。

好消息是，你想要完成的事情相当容易。

LinearLayout - 线性布局一个接一个地放置子视图，并具有一些简单的大小控制。

RelativeLayout - 相对布局基于彼此之间的关系以及父布局来组织子视图。

考虑到这一点，您需要开始展示您的观点。这就是我们想要得到的：

---------------------------------
|---------                      | <-- parent layout
||       |                      |
||       |                      |
||image1 | Message              |
||       | timeStamp            |
||       |                      |
|--------|                      |
|-------------------------------|

既然你知道自己想要完成什么，就可以开始实现它了。

  1. 创建RelativeLayout以保留所有观看次数
  2. 在父布局中创建ImageView并使用android：layout_centerVertical = true
  3. 为邮件创建TextView，并将其与image1的ImageView
    4. 的垂直中心对齐
  4. 为时间戳创建TextView并将其对齐到消息textview
    5. 下方

    一旦完成所有这些。您可以将此布局添加为ListView子视图或添加到LinearLayout中的一系列视图

相关问题
最新问题