如此接近得到这种布局下，RelativeLayout的/ LinearLayout中的困境 [英] So close to getting this layout down, RelativeLayout/LinearLayout woes

问题描述

我一个星期前发布了这个问题，并没有真正了解谁回答意味着人们什么。我希望得到一些澄清。

I posted this question a week ago and didn't really understand what the people who responded meant. I was hoping to get some clarification.

编辑：
我已经得到了非常接近;实际上，最近我去过呢。这是我的code：

I've gotten really close; actually, the closest I've been yet. This is my code:

<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 并不总是留下来的权利。

However, some messages look wrong. They just get really warped. Can't seem to figure out why. Plus, @+id/myPicture doesn't always stay to the right.

这是当前的状态：

It's current state:

推荐答案

你没有得到你在找什么，因为你奠定了你浏览的方式呈现相对布局无用的。

You are not getting what you are looking for because the way you layed out your Views renders the Relative Layout useless.

好消息是，你所要完成的是相当容易的。

The good news is that what you are trying to accomplish is fairly easy.

的LinearLayout - 线性布局的地方的孩子看待一前一后，用一些简单的尺寸控制。

LinearLayout - A linear layout places child views one after the other, with some simple size control.

RelativeLayout的 - 一个相对布局组织基础上的海誓山盟和父布局关系子视图

RelativeLayout - A relative layout organizes child views based on relationships to eachother and to the parent layout.

考虑到这一点，你需要开始铺设出你的观点。这是我们正试图获得：

With this in mind you need to start laying out your views. this is what we are trying to get:

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

现在你知道你要完成什么，你就可以开始实现它。

Now that you know what you want to accomplish, you can start implementing it.

1. 创建一个 RelativeLayout的来容纳所有的意见


2. 创建一个的ImageView 里面的父布局和使用Android：layout_centerVertical = TRUE


3. 为消息创建一个的TextView 键，将其调整到image1的垂直中心的ImageView


4. 创建一个的TextView 的时间戳和对齐是消息TextView的下方

1. Create a RelativeLayout to hold all the views
2. Create an ImageView inside the parent layout and use android:layout_centerVertical=true
3. Create a TextView for the message and align it to the vertical center of the image1 ImageView
4. Create a TextView for the timestamp and align it to be below the message textview

在所有的做到这一点。您可以添加此布局为的ListView 子视图或进入一个LinearLayout中

Once all of that is done. you can add this layout as a ListView child view or into a series of views within a LinearLayout

这篇关于如此接近得到这种布局下，RelativeLayout的/ LinearLayout中的困境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！