【五大布局】Android五大布局詳解

Android中常用的5大布局方式有以下幾種:

  • 線性佈局(LinearLayout):按照垂直或者水平方向佈局的組件。
  • 幀佈局(FrameLayout):組件從屏幕左上方佈局組件。
  • 表格佈局(TableLayout):按照行列方式佈局組件。
  • 相對佈局(RelativeLayout):相對其它組件的佈局方式。
  •  絕對佈局(AbsoluteLayout):按照絕對座標來佈局組件。
 
1. 線性佈局

線性佈局是Android開發中最常見的一種佈局方式,它是按照垂直或者水平方向來佈局,通過“android:orientation”屬性可以設置線性佈局的方向。屬性值有垂直(vertical)和水平(horizontal)兩種。

常用的屬性:

android:orientation:可以設置佈局的方向
android:gravity:用來控制組件的對齊方式
layout_weight:控制各個組件在佈局中的相對大小


代碼如下

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:orientation="vertical"   
  4.     android:layout_width="fill_parent"   
  5.     android:layout_height="fill_parent"   
  6.     >         
  7.     <LinearLayout   
  8.         android:layout_width="fill_parent"   
  9.         android:layout_height="wrap_content"   
  10.         android:orientation="vertical"   
  11.         >   
  12.         <EditText   
  13.             android:layout_width="fill_parent"   
  14.             android:layout_height="wrap_content"   
  15.             />   
  16.     </LinearLayout>   
  17.     <LinearLayout   
  18.         android:layout_width="fill_parent"   
  19.         android:layout_height="wrap_content"   
  20.         android:orientation="horizontal"   
  21.         android:gravity="right"   
  22.         >   
  23.     <!-- android:gravity="right"表示Button組件向右對齊 -->   
  24.         <Button   
  25.             android:layout_height="wrap_content"   
  26.             android:layout_width="wrap_content"   
  27.             android:text="確定"   
  28.             />   
  29.         <Button   
  30.             android:layout_height="wrap_content"   
  31.             android:layout_width="wrap_content"   
  32.             android:text="取消"   
  33.             />      
  34.      </LinearLayout>   
  35. </LinearLayout>   
第二個例子:

代碼如下:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:orientation="vertical" android:layout_width="fill_parent"   
  4.     android:layout_height="fill_parent">   
  5.    
  6.     <LinearLayout   
  7.     android:orientation="horizontal"   
  8.     android:layout_width="fill_parent"   
  9.     android:layout_height="fill_parent"   
  10.     android:layout_weight="1">   
  11.         
  12.     <TextView   
  13.         android:text="red"   
  14.         android:gravity="center_horizontal"   
  15.         android:background="#aa0000"   
  16.         android:layout_width="wrap_content"   
  17.         android:layout_height="fill_parent"   
  18.         android:layout_weight="1"   
  19.         />   
  20.      <!--android:gravity="center_horizontal"水平居中 -->     
  21.      <!--layout_weight屬性以控制各個控件在佈局中的相對大小。layout_weight屬性是一個非負整數值。    
  22.          線性佈局會根據該控件layout_weight值與其所處佈局中所有控件layout_weight值之和的比值爲該控件分配佔用的區域。    
  23.         例如,在水平佈局的LinearLayout中有兩個Button,這兩個Button的layout_weight屬性值都爲1,    
  24.         那麼這兩個按鈕都會被拉伸到整個屏幕寬度的一半。如果layout_weight指爲0,控件會按原大小顯示,不會被拉伸;    
  25.         對於其餘layout_weight屬性值大於0的控件,系統將會減去layout_weight屬性值爲0的控件的寬度或者高度,    
  26.         再用剩餘的寬度或高度按相應的比例來分配每一個控件顯示的寬度或高度-->   
  27.     <TextView   
  28.         android:text="Teal"   
  29.         android:gravity="center_horizontal"   
  30.         android:background="#008080"   
  31.         android:layout_width="wrap_content"   
  32.         android:layout_height="fill_parent"   
  33.         android:layout_weight="1"/>   
  34.         
  35.     <TextView   
  36.         android:text="blue"   
  37.         android:gravity="center_horizontal"   
  38.         android:background="#0000aa"   
  39.         android:layout_width="wrap_content"   
  40.         android:layout_height="fill_parent"   
  41.         android:layout_weight="1"   
  42.         />   
  43.         
  44.     <TextView   
  45.         android:text="orange"   
  46.         android:gravity="center_horizontal"   
  47.         android:background="#FFA500"   
  48.         android:layout_width="wrap_content"   
  49.         android:layout_height="fill_parent"   
  50.         android:layout_weight="1"   
  51.         />   
  52.             
  53.     </LinearLayout>     
  54.     <LinearLayout   
  55.     android:orientation="vertical"   
  56.     android:layout_width="fill_parent"   
  57.     android:layout_height="fill_parent"   
  58.     android:layout_weight="1">   
  59.         
  60.     <TextView   
  61.         android:text="row one"   
  62.         android:textSize="15pt"   
  63.         android:background="#aa0000"   
  64.         android:layout_width="fill_parent"   
  65.         android:layout_height="wrap_content"   
  66.         android:layout_weight="1"   
  67.         />   
  68.     <!--  -->     
  69.     <TextView   
  70.         android:text="row two"   
  71.         android:textSize="15pt"   
  72.         android:background="#DDA0DD"   
  73.         android:layout_width="fill_parent"   
  74.         android:layout_height="wrap_content"   
  75.         android:layout_weight="1"   
  76.         />   
  77.         
  78.     <TextView   
  79.         android:text="row three"   
  80.         android:textSize="15pt"   
  81.         android:background="#008080"   
  82.         android:layout_width="fill_parent"   
  83.         android:layout_height="wrap_content"   
  84.         android:layout_weight="1"   
  85.         />      
  86.     <TextView   
  87.         android:text="row four"   
  88.         android:textSize="15pt"   
  89.         android:background="#FFA500"   
  90.         android:layout_width="fill_parent"   
  91.         android:layout_height="wrap_content"   
  92.         android:layout_weight="1"   
  93.         />         
  94.     </LinearLayout>     
  95. </LinearLayout>   

2. 幀佈局
幀佈局是從屏幕的左上角(0,0)座標開始佈局,多個組件層疊排列,第一個添加的組件放到最底層,最後添加到框架中的視圖顯示在最上面。上一層的會覆蓋下一層的控件。
 
 簡單的例子
效果圖:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:layout_width="fill_parent"   
  4.     android:layout_height="fill_parent"   
  5.     >   
  6.     <TextView      
  7.         android:layout_width="300dp"     
  8.         android:layout_height="300dp"     
  9.         android:background="#00BFFF"            
  10.         />   
  11.     <TextView      
  12.         android:layout_width="260dp"     
  13.         android:layout_height="260dp"     
  14.         android:background="#FFC0CB"            
  15.         />   
  16.     <TextView      
  17.         android:layout_width="220dp"     
  18.         android:layout_height="220dp"     
  19.         android:background="#0000FF"            
  20.         />   
  21. </FrameLayout>   
3.表格佈局
表格佈局是一個ViewGroup以表格顯示它的子視圖(view)元素,即行和列標識一個視圖的位置。
表格佈局常用的屬性如下:
android:collapseColumns:隱藏指定的列
android:shrinkColumns:收縮指定的列以適合屏幕,不會擠出屏幕
android:stretchColumns:儘量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:該控件所跨越的列數
 
簡單的列子:
效果圖:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:layout_width="fill_parent"   
  4.     android:layout_height="fill_parent"   
  5.     >   
  6.     <TableRow>   
  7.         <Button   
  8.             android:text="Button1"   
  9.             />   
  10.         <Button   
  11.             android:text="Button2"   
  12.             />   
  13.         <Button   
  14.             android:text="Button3"   
  15.             />   
  16.     </TableRow>   
  17.     <TableRow>   
  18.         <Button   
  19.             android:text="Button4"   
  20.             />   
  21.         <Button   
  22.             android:layout_span="2"   
  23.             android:text="Button5"   
  24.             />   
  25.     </TableRow>   
  26.         
  27. </TableLayout>   
4.相對佈局
相對佈局是按照組件之間的相對位置來佈局,比如在某個組件的左邊,右邊,上面和下面等。
相對佈局常用屬性請參考我博客的:http://liangruijun.blog.51cto.com/3061169/631816
 
簡單的例子
效果圖:

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:layout_width="fill_parent"   
  4.     android:layout_height="wrap_content"   
  5.     android:padding="10px"   
  6.     >   
  7.     <TextView      
  8.         android:id="@+id/tev1"   
  9.         android:layout_width="wrap_content"     
  10.         android:layout_height="wrap_content"     
  11.         android:layout_marginBottom="30dp"   
  12.         android:text="Please Type Here:"   
  13.         />   
  14.     <EditText   
  15.         android:id="@+id/tx1"   
  16.         android:layout_width="match_parent"   
  17.         android:layout_height="wrap_content"   
  18.         android:layout_below="@id/tev1"   
  19.         />   
  20.     <Button   
  21.         android:id="@+id/btn1"   
  22.         android:layout_height="wrap_content"   
  23.         android:layout_width="wrap_content"   
  24.         android:layout_below="@id/tx1"   
  25.         android:layout_alignParentRight="true"   
  26.         android:text="確定"   
  27.         />   
  28.     <Button   
  29.         android:id="@+id/btn2"   
  30.         android:layout_height="wrap_content"   
  31.         android:layout_width="wrap_content"   
  32.         android:layout_below="@id/tx1"   
  33.         android:layout_toLeftOf="@id/btn1"   
  34.         android:layout_marginRight="30dp"   
  35.         android:text="取消"   
  36.         />   
  37. </RelativeLayout>   
5. 絕對佈局
 絕對佈局通過指定子組件的確切X,Y座標來確定組件的位置,在Android2.0 API文檔中標明該類已經過期,可以使用FrameLayout或者RelativeLayout來代替。目前這種佈局淘汰了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章