android佈局------RelativeLayout(相對佈局)詳解

憶江南的部落格發表於2015-08-19
Android

http://blog.csdn.net/coder_pig/article/details/21185659


RelativeLayout(相對佈局)


前言

和線性佈局(LinearLayout)一樣,RelaiveLayout相對佈局也是我們用的比較多的一個佈局之一

好的程式設計建議：

合理地利用好LinearLayout的weight權重屬性和RelativeLayout相對佈局,可以解決螢幕解析度不同的自適應問題！

相對,顧名思義是有參照的,就是以某個兄弟元件,或者父容器來決定的

比如小明在上學的路上,此時他的位置可以用離家多少米或者是離學校多少米表示,就是利用不同的參照物

記得啊!!!兄弟元件是在一個同一個佈局裡面的元件,如果是佈局裡一個元件參照另一個佈局裡的元件會出錯的！！

好了,廢話不多說,直接說比較常用的屬性吧:



設定佈局裡面所有元件的對其方式:


android:gravity:設定容器內各個子元件的對齊方式

android:ignoreGravity:如果為哪個元件設定了這個屬性的話,那麼該元件不受gravity屬性的影響




根據父容器來定位:

想位於哪,哪個屬性就設定為true


左對齊:android:layout_alighParentLeft

右對齊:android:layout_alighParentRight

頂端對齊:android:layout_alighParentTop

底部對齊:android:layout_alighParentBottom

水平居中:android:layout_centerHorizontal

垂直居中:android:layout_centerVertical

中央位置:android:layout_centerInParent


比較簡單,就不給出程式碼了,畫個草圖幫助大家瞭解下



o(╯□╰)o,畫工略渣,體諒下,不過大家應該能體會我想表達什麼意思的...



根據兄弟元件來定位

右面的屬性值為兄弟元件的id


左邊:android:layout_toLeftOf

右邊:android:layout_toRightOf

上方:android:layout_above

下方:android:layout_below

對齊上邊界:android:layout_alignTop

對齊下邊界:android:layout_alignBottom

對齊左邊界:android:layout_alignLeft

對齊右邊界:android:layout_alignRight



這裡演示一個比較典型的例子:

梅花布局:



程式碼如下:

  1. <span style="font-family:Comic Sans MS;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/RelativeLayout1"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <!-- 這個是在容器中央的 -->  
  8.       
  9.     <ImageView  
  10.         android:id="@+id/img1"   
  11.         android:layout_width="80dp"  
  12.         android:layout_height="80dp"  
  13.         android:layout_centerInParent="true"  
  14.         android:src="@drawable/pic1"      
  15.     />  
  16.       
  17.     <!-- 在中間圖片的左邊 -->  
  18.     <ImageView  
  19.         android:id="@+id/img2"   
  20.         android:layout_width="80dp"  
  21.         android:layout_height="80dp"  
  22.         android:layout_toLeftOf="@id/img1"  
  23.         android:layout_centerVertical="true"  
  24.         android:src="@drawable/pic2"      
  25.     />  
  26.       
  27.     <!-- 在中間圖片的右邊 -->  
  28.     <ImageView  
  29.         android:id="@+id/img3"   
  30.         android:layout_width="80dp"  
  31.         android:layout_height="80dp"  
  32.         android:layout_toRightOf="@id/img1"  
  33.         android:layout_centerVertical="true"  
  34.         android:src="@drawable/pic3"      
  35.     />  
  36.       
  37.     <!-- 在中間圖片的上面-->  
  38.     <ImageView  
  39.         android:id="@+id/img4"   
  40.         android:layout_width="80dp"  
  41.         android:layout_height="80dp"  
  42.         android:layout_above="@id/img1"  
  43.         android:layout_centerHorizontal="true"  
  44.         android:src="@drawable/pic4"      
  45.     />  
  46.       
  47.     <!-- 在中間圖片的下面 -->  
  48.     <ImageView  
  49.         android:id="@+id/img5"   
  50.         android:layout_width="80dp"  
  51.         android:layout_height="80dp"  
  52.         android:layout_below="@id/img1"  
  53.         android:layout_centerHorizontal="true"  
  54.         android:src="@drawable/pic5"      
  55.     />  
  56.   
  57. </RelativeLayout>  
  58. </span>  

這個很簡單,讀者慢慢摸索下就懂了


最後還有兩個比較常用的


Margin和Padding屬性


Margin:設定元件與父容器(通常是佈局)的邊距


有以下五個

android:layout_margin:     指定控制元件的四周的外部留出一定的邊距
android:layout_marginLeft:  指定控制元件的左邊的外部留出一定的邊距
android:layout_marginTop:   指定控制元件的上邊的外部留出一定的邊距
android:layout_marginRight: 指定控制元件的右邊的外部留出一定的邊距
android:layout_marginBottom: 指定控制元件的下邊的外部留出一定的邊距



Padding:設定元件內部元素間的邊距(可以理解為填充)

也是有以下五個

android:padding :指定控制元件的四周的內部留出一定的邊距
android:paddingLeft: 指定控制元件的左邊的內部留出一定的邊距
android:paddingTop: 指定控制元件的上邊的內部留出一定的邊距
android:paddingRight: 指定控制元件的右邊的內部留出一定的邊距
android:paddingBottom: 指定控制元件的下邊的內部留出一定的邊距



這兩個後面都跟著一個引數,通常用dp作為單位,eg:android:margin = "10dp"

用法比較簡單,這裡就誇張地演示下分別使用兩個的效果

效果圖如下:



貼下程式碼:

  1. <span style="font-family:Comic Sans MS;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.   
  11.     <Button  
  12.         android:id="@+id/btn1"   
  13.         android:layout_height="wrap_content"  
  14.         android:layout_width="wrap_content"  
  15.         android:text="Button"      
  16.     />  
  17.     <Button  
  18.         android:paddingLeft="100dp"   
  19.         android:layout_height="wrap_content"  
  20.         android:layout_width="wrap_content"  
  21.         android:text="Button"  
  22.         android:layout_toRightOf="@id/btn1"      
  23.     />  
  24.       
  25.       
  26.       
  27.       
  28.     <Button  
  29.         android:id="@+id/btn2"   
  30.         android:layout_height="wrap_content"  
  31.         android:layout_width="wrap_content"  
  32.         android:text="Button"  
  33.         android:layout_alignParentBottom="true"      
  34.     />  
  35.     <Button  
  36.         android:layout_marginLeft="100dp"   
  37.         android:layout_height="wrap_content"  
  38.         android:layout_width="wrap_content"  
  39.         android:text="Button"  
  40.         android:layout_toRightOf="@id/btn2"   
  41.         android:layout_alignParentBottom="true"     
  42.     />  
  43.       
  44. </RelativeLayout></span>  

程式碼解釋：

這個程式碼很簡單,就是寫了兩個按鈕的組合,

第一個組合的第二個按鈕設定了paddingleft = "100dp:,結果按鈕被拉伸了100dp,因為裡面的元素間距填充了100dp

第二個組合的第二個按鈕設定了marginleft = "100dp",結果按鈕向右平移了100dp



總結:

以上就是RelativeLayout相對佈局的常用屬性,如果紕漏

望讀者指出,O(∩_∩)O謝謝！

多摸索摸索這些屬性就熟悉了！


相關文章