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.

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

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:

回答1:

try following:

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

Don't use linearlayout try creating the layout using relative layout only and align view wrt each other

回答2:

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 - A linear layout places child views one after the other, with some simple size control.

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.

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

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

来源：https://stackoverflow.com/questions/21499800/so-close-to-getting-this-layout-down-relativelayout-linearlayout-woes

标签

android

android-layout

android-linearlayout

relativelayout