今天要說的是RelativeLayout。RelativeLayout相對於LinearLayout的主要不同點在於它需要一個參照物。
我們先來看一下官方對這個布局的解釋：
RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left of center).
紅色高亮句子中的意思是說，元素之間總是相對於它們的同級元素或父元素進行排列布局。
而RelativeLayout相對於LinearLayout來說，它有什么好處。看下面這段話：
A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.
紅色高亮部分意思：相對於比較復雜的布局，RelativeLayout可以使元素層級關系更加扁平化，避免像LinearLayout布局中復雜的嵌套關系，從而提高程序的性能。
相比起LinearLayout，官方更加建議我們使用RelativeLayout。
在使用RelativeLayout進行界面編寫的時候，我們需要注意的是android:id屬性。我們都是通過這個ID對元素進行引用
拿前面的例子進行說明
用於這個布局的LinearLayout代碼：
1 <LinearLayout 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 android:orientation="vertical" 5 xmlns:android="http://schemas.android.com/apk/res/android"> 6 7 <TextView 8 android:id="@+id/txtView" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_gravity="center_horizontal" 12 android:textSize="18sp" 13 android:text="請輸入登錄信息"/> 14 <LinearLayout 15 android:layout_width="fill_parent" 16 android:layout_height="wrap_content" 17 android:orientation="horizontal"> 18 <TextView 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:text="用戶名:" 22 android:textSize="16sp"/> 23 <EditText 24 android:layout_width="0dp" 25 android:layout_height="wrap_content" 26 android:layout_weight="1"/> 27 </LinearLayout> 28 <LinearLayout 29 android:layout_width="fill_parent" 30 android:layout_height="wrap_content" 31 android:orientation="horizontal"> 32 <TextView 33 android:layout_width="wrap_content" 34 android:layout_height="wrap_content" 35 android:text="密 碼:" 36 android:textSize="16sp"/> 37 <EditText 38 android:layout_width="0dp" 39 android:layout_height="wrap_content" 40 android:password="true" 41 android:layout_weight="1"/> 42 </LinearLayout> 43 <Button 44 android:layout_width="wrap_content" 45 android:layout_height="wrap_content" 46 android:text="登錄" 47 android:layout_gravity="right" /> 48 </LinearLayout>
運行效果：
同樣布局的RelativeLayout代碼：
1 <RelativeLayout 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 xmlns:android="http://schemas.android.com/apk/res/android"> 5 6 <TextView 7 android:id="@+id/info" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:layout_centerHorizontal="true" 11 android:text="請輸入登錄信息" 12 android:textSize="18sp"/> 13 <TextView 14 android:id="@+id/userName" 15 android:layout_width="wrap_content" 16 android:layout_height="wrap_content" 17 android:layout_below="@id/info" 18 android:layout_alignParentLeft="true" 19 android:text="用戶名:" 20 android:textSize="16sp" 21 android:paddingTop="10sp"/> 22 <EditText 23 android:id="@+id/inputName" 24 android:layout_width="0dp" 25 android:layout_height="wrap_content" 26 android:layout_below="@id/info" 27 android:layout_toRightOf="@id/userName" 28 android:layout_alignParentRight="true"/> 29 <TextView 30 android:id="@+id/password" 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 android:layout_below="@id/inputName" 34 android:layout_alignParentLeft="true" 35 android:text="密 碼:" 36 android:textSize="16sp" 37 android:paddingTop="10sp"/> 38 <EditText 39 android:id="@+id/inputPassword" 40 android:password="true" 41 android:layout_width="0dp" 42 android:layout_height="wrap_content" 43 android:layout_below="@id/inputName" 44 android:layout_toRightOf="@id/password" 45 android:layout_alignParentRight="true"/> 46 47 <Button 48 android:id="@+id/btn" 49 android:layout_width="wrap_content" 50 android:layout_height="wrap_content" 51 android:layout_below="@id/inputPassword" 52 android:layout_alignParentRight="true" 53 android:text="登錄" /> 54 </RelativeLayout>
運行效果：
第一眼看下去，代碼比使用LinearLayout多了。
但是，我們可以看到，它們之間只有一個層級關系，它們都只有一個父類RelativeLayout。
然而，在實際項目中，RelativeLayout比LinearLayout更難把握，更容易出現問題，這就考驗我們對RelativeLayout的掌握熟練程度。
我們說說一些常用的屬性的作用，其他的屬性大家可以對號入座
android:layout_toLeftOf="@id/idName" 元素處於指定ID元素的左邊
android:layout_alignParentRight="true" 元素的右邊界向父元素的右邊界對齊
android:layout_below="@id/idName" 元素處於指定ID元素的下面
android:layout_marginTop="20dp" 設置外邊距的值
android:layout_paddingLeft="10dp" 設置內邊距的值
android:layout_centerHorizontal="true" 設置元素水平居中
android:layout_alignBaseLine="@id/idName" 與指定ID的元素基准線對齊
一些細節上的東西我們需要注意一下，先看下面的代碼
1 <RelativeLayout 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 xmlns:android="http://schemas.android.com/apk/res/android"> 5 6 <TextView 7 android:id="@+id/txtView" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="輸入用戶名" 11 android:layout_toLeftOf="@android:id/empty"/> 12 13 <EditText 14 android:id="@android:id/empty" 15 android:layout_width="fill_parent" 16 android:layout_height="wrap_content" 17 android:layout_alignParentRight="true" 18 android:layout_toRightOf="@id/txtView"/> 19 20 </RelativeLayout>
我們定義了兩個互相指向的元素，這樣做就會導致異常的拋出
Margin和Padding的區別，我們看下圖就知道了
什么是baseLine（基准線）
我們先來看一下代碼和圖片
下面的代碼並沒有使用alignBaseLine
1 <RelativeLayout 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 xmlns:android="http://schemas.android.com/apk/res/android"> 5 6 <TextView 7 android:id="@+id/txtView" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="輸入用戶名:"/> 11 12 <EditText 13 android:id="@android:id/empty" 14 android:layout_width="fill_parent" 15 android:layout_height="wrap_content" 16 android:layout_alignParentRight="true" 17 android:layout_toRightOf="@id/txtView"/> 18 19 </RelativeLayout>
運行效果是這樣的
輸入用戶名這個TextView元素向上提了。沒有和右邊的元素對齊，影響美觀。
現在我們使它們的基准線對齊
1 <RelativeLayout 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 xmlns:android="http://schemas.android.com/apk/res/android"> 5 6 <TextView 7 android:id="@+id/txtView" 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="輸入用戶名:" 11 android:layout_alignBaseline="@android:id/empty"/> 12 13 <EditText 14 android:id="@android:id/empty" 15 android:layout_width="fill_parent" 16 android:layout_height="wrap_content" 17 android:layout_alignParentRight="true" 18 android:layout_toRightOf="@id/txtView"/> 19 20 </RelativeLayout>
現在它們對齊了，基准先就像我們所說的地平線，常用來對齊文本元素
紅線就是baseline了，是不是有點像我們小學作業本上的線 ^-^
值得注意的是，上面的代碼中我們使用了android系統內置的id，如果我們使用自定義的ID，情況又會怎樣？
明明我們就定義了一個ID叫editText的元素，怎么會找不到呢
這里其實是順序問題，在使用id引用資源的時候，我們必須先定義，后引用。否則編譯時就會出錯。
小問題，注意下就可以了。
布局就學到這里了，還有其他的布局，等以后遇到的時候再說。。
支持原創，轉載請注明出處。http://www.cnblogs.com/ai-developers/p/android_relativelayout.html