statckoverflow里关于RelativeLayout不错的一个布局

Question:

Hi all,

I need your help!

I need to locate text on view as showed on the picture:

text 'Some more text' should be located in bottom|center_horizontal

text 'Short text' should be located on with align right, but about 10% from the top of the screen

text 'x.x.x.x' should be aligned to the center of the screen (right/bottom align of the 1st quater)

text 'Some long text ..' should be aligned to the top/left of the 3-rd quater of the screen, but it should cross the center_horizontal of the screen

eh ... something like this .. I hope, you're understand me :)

http://www.freeimagehosting.net/image.php?ca27bc012e.png

Please, help me!!!

Thanks for your help!

 

 

Answer:

Here a couple quick guidelines:

1. Android Layouts tend to be much more deeply nested than you would normally expect. You often end up with "empty" layouts that just take up space so that other elements lay out correctly.
2. RelativeLayout is your friend whenever you are aligning text to a particular edge.
3. Use the padding settings to put text "a little away from" an edge.
4. Gravity aligns the text within that TextView or button.

Looking again I your diagram, I reproduced it this way:

1. Start with a relative layout ('fill_content') that takes up the entire screen.
2. Put in the "short text" and "some more text" by anchoring to the top and bottom.
3. Put a zero-width item with the property "centerInParent" for a point in the middle of the screen.
4. Put the remaining to items above and aligned with that centerpoint.

Unfortunately, nothing in step 4 worked correctly. Nothing like "layout_below" worked when the referenced item was a centerInParent item. with relative layouts to step 3. Turns out it had to do with failing to fill_content on the top level. Yes, the layouts are tricky, and I wish there was a debugger for them.

Here's the correct version:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/r1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
    android:id="@+id/short_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Short Text"
    android:gravity="right"
    android:layout_marginTop="30dip"
    android:layout_alignParentTop="true" />
<TextView
    android:id="@+id/more_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Some More Text"
    android:gravity="center"
    android:layout_alignParentBottom="true" />
  <TextView android:id="@+id/centerpoint"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:width="0dip"
    android:height="0dip"
    />
  <TextView android:id="@+id/run_fox"
    android:text="Run, fox, run!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/centerpoint"
    android:layout_toLeftOf="@id/centerpoint" 
    />
<TextView
    android:layout_below="@id/centerpoint"
    android:text="The quick brown fox jumped over the lazy dog, who had been a frog, and then got features and ran slowly."
    android:layout_alignRight="@id/centerpoint"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
 </RelativeLayout>

 注意上面的这段代码，这段代码是精华：

 <TextView android:id="@+id/centerpoint"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:width="0dip"
    android:height="0dip"
    />