Android開發之詳解五大布局

爲了適應各式各樣的界面風格,Android系統提供了5種佈局,這5種佈局分別是:

LinearLayout(線性佈局)

TableLayout(表格佈局)

RelativeLayout(相對佈局)

AbsoluteLayout(絕對佈局)

FrameLayout(框架佈局)

利用這五種佈局,可以在屏幕上將控件隨心所欲的擺放,而且控件的大小和位置會隨着屏幕大小的變化作出相應的調整。下面是這五個佈局在View的繼承體系中的關係:
1.jpg 


一,LinearLayout(線性佈局)

    在一個方向上(垂直或水平)對齊所有子元素
一個垂直列表每行將只有一個子元素(無論它們有多寬)
一個水平列表只是一列的高度(最高子元素的高度來填充)

下面是一個簡單的線性佈局的例子:
2.png

  1. 01 <?xml version="1.0" encoding="utf-8"?> 

  2. 02 <LinearLayout 

  3. 03 xmlns:android="http://schemas.android.com/apk/res/android" 

  4. 04 android:layout_width="match_parent" 

  5. 05 android:layout_height="match_parent" android:orientation="vertical"> 

  6. 06 <EditText android:text="EditText" 

  7. 07   

  8. 08 android:id="@+id/editText1" 

  9. 09   

  10. 10 android:layout_height="wrap_content" 

  11. 11   

  12. 12 android:layout_width="fill_parent"> 

  13. 13   

  14. 14 </EditText> 

  15. 15 <LinearLayout android:id="@+id/linearLayout1" 

  16. 16   

  17. 17 android:layout_height="fill_parent" 

  18. 18   

  19. 19 android:layout_width="fill_parent" 

  20. 20   

  21. 21 android:gravity="right"> 

  22. 22 <Button android:id="@+id/button2" 

  23. 23   

  24. 24 android:text="Button" 

  25. 25   

  26. 26 android:layout_width="wrap_content" 

  27. 27   

  28. 28 android:layout_height="wrap_content"></Button> 

  29. 29 <Button android:text="Button" 

  30. 30   

  31. 31 android:id="@+id/button1" 

  32. 32   

  33. 33 android:layout_width="wrap_content" 

  34. 34   

  35. 35 android:layout_height="wrap_content"></Button> 

  36. 36 </LinearLayout> 

  37. 37 </LinearLayout>

複製代碼

最外層佈局爲垂直線性佈局,寬度爲整個屏幕(fill_parent),高度爲剛好適合子控件(wrap_content)。然後依次添加一個EditText,一個水平佈局的LinearLayout,在這個線性佈局裏面,擺放兩個Button,該線性佈局的gravity屬性設置爲”right”,所以裏面的兩個Button靠右顯示。

二,TableLayout(表格佈局)

把子元素放入到行與列中
不顯示行、列或是單元格邊界線
單元格不能橫跨行,如HTML中一樣
表格佈局模型以行列的形式管理子控件,每一行爲一個TableRow的對象,當然也可以是一個View的對象。TableRow可以添加子控件,每添加一個爲一列。

android:layout_colum官方解釋:The index of the column in which this child should be,也即是設置該控件在TableRow中所處的列。
android:layout_span官方解釋:Defines how many columns this child should span,也即是設置該控件所跨越的列數。

android:collapseColumns官方解釋:The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是將TableLayout裏面指定的列隱藏,若有多列需要隱藏,請用逗號將需要隱藏的列序號隔開。

android:stretchColumns官方解釋:The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是設置指定的列爲可伸展的列,可伸展的列會盡量伸展以填滿所有可用的空間,若有多列需要設置爲可伸展,請用逗號將需要伸展的列序號隔開。

android:shrinkColumns官方解釋:The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 設置指定的列爲可收縮的列。當可收縮的列太寬以至於讓其他列顯示不全時,會縱向延伸空間。當需要設置多列爲可收縮時,將列序號用逗號隔開。

下面用一個例子簡單說明TableLayout的用法:
3.png

  1. 01 <?xml version="1.0" encoding="utf-8"?> 

  2. 02 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 

  3. 03 android:layout_width="fill_parent" 

  4. 04 android:layout_height="fill_parent" 

  5. 05 android:stretchColumns="1"> 

  6. 06 <TableRow> 

  7. 07 <TextView 

  8. 08 android:layout_column="1" 

  9. 09 android:padding="3dip" android:text="Row1"/> 

  10. 10 <TextView 

  11. 11 android:text="1" 

  12. 12 android:gravity="right" 

  13. 13 android:padding="3dip" /> 

  14. 14 </TableRow> 

  15. 15 <View 

  16. 16 android:layout_height="2dip" 

  17. 17 android:background="#FF909090" /> 

  18. 18 <TableRow> 

  19. 19 <TextView 

  20. 20 android:text="*" 

  21. 21 android:padding="3dip" /> 

  22. 22 <TextView 

  23. 23 android:text="Row12" 

  24. 24 android:padding="3dip" /> 

  25. 25 <TextView 

  26. 26 android:text="2" 

  27. 27 android:gravity="right" 

  28. 28 android:padding="3dip" /> 

  29. 29 </TableRow> 

  30. 30 <View 

  31. 31 android:layout_height="2dip" 

  32. 32 android:background="#FF909090" /> 

  33. 33 <TableRow> 

  34. 34 <TextView 

  35. 35 android:layout_column="1" 

  36. 36 android:text="Row13" 

  37. 37 android:padding="3dip" /> 

  38. 38 </TableRow> 

  39. 39 </TableLayout>

複製代碼

三、RelativeLayout(相對佈局)

相對佈局的子控件會根據它們所設置的參照控件和參數進行相對佈局。參照控件可以是父控件,也可以是其它子控件,但是被參照的控件必須要在參照它的控件之前定義。下面是一個簡單的例子:
4.png

  1. 01 <?xml version="1.0" encoding="utf-8"?> 

  2. 02 <?xml version="1.0" encoding="utf-8"?> 

  3. 03 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

  4. 04 android:layout_width="fill_parent" 

  5. 05 android:layout_height="fill_parent" 

  6. 06 > 

  7. 07 <AnalogClock 

  8. 08 android:id="@+id/aclock" 

  9. 09 android:layout_width="wrap_content" 

  10. 10 android:layout_height="wrap_content" 

  11. 11 android:layout_centerInParent="true" /> 

  12. 12 <DigitalClock 

  13. 13 android:id="@+id/dclock" 

  14. 14 android:layout_width="wrap_content" 

  15. 15 android:layout_height="wrap_content" 

  16. 16 android:layout_below="@id/aclock" 

  17. 17 android:layout_alignLeft="@id/aclock" 

  18. 18 android:layout_marginLeft="40px" /> 

  19. 19 <TextView 

  20. 20 android:layout_width="wrap_content" 

  21. 21 android:layout_height="wrap_content" 

  22. 22 android:text="當前時間:" 

  23. 23 android:layout_toLeftOf="@id/dclock" 

  24. 24 android:layout_alignTop="@id/aclock"/> 

  25. 25 </RelativeLayout>

複製代碼

四、AbsoluteLayout(絕對佈局)

絕對佈局的子控件需要指定相對於此座標佈局的橫縱座標值,否則將會像框架佈局那樣被排在左上角。手機應用需要適應不同的屏幕大小,而這種佈局模型不能自適應屏幕尺寸大小,所以應用的相對較少。下面以一個例子簡單說明絕對佈局:
5.png

  1. 01 <?xml version="1.0" encoding="utf-8"?> 

  2. 02 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 

  3. 03 android:layout_width="fill_parent" 

  4. 04 android:layout_height="fill_parent" 

  5. 05 > 

  6. 06 <TextView 

  7. 07 android:layout_width="wrap_content" 

  8. 08 android:layout_height="wrap_content" 

  9. 09 android:layout_x="10px" 

  10. 10 android:layout_y="10px" android:text="Textview"/> 

  11. 11 <TextView 

  12. 12 android:layout_width="wrap_content" 

  13. 13 android:layout_height="wrap_content" 

  14. 14 android:layout_x="30px" 

  15. 15 android:layout_y="30px" android:text="Textview"/> 

  16. 16 <TextView 

  17. 17 android:layout_width="wrap_content" 

  18. 18 android:layout_height="wrap_content" 

  19. 19 android:layout_x="50px" 

  20. 20 android:layout_y="50px" android:text="Textview"/> 

  21. 21 </AbsoluteLayout>

複製代碼

五、FrameLayout(框架佈局)


框架佈局是最簡單的佈局形式。所有添加到這個佈局中的視圖都以層疊的方式顯示。第一個添加的控件被放在最底層,最後一個添加到框架佈局中的視圖顯示在最頂層,上一層的控件會覆蓋下一層的控件。這種顯示方式有些類似於堆棧。下面舉一個簡單的例子

6.png

  1. 01 <?xml version="1.0" encoding="utf-8"?> 

  2. 02 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 

  3. 03 android:layout_width="fill_parent" android:layout_height="fill_parent"> 

  4. 04 <LinearLayout android:id="@+id/linearLayout1" 

  5. 05 android:layout_height="match_parent" 

  6. 06 android:layout_width="match_parent"> 

  7. 07 <Button android:text="Button" 

  8. 08 android:id="@+id/button1" 

  9. 09 android:layout_width="wrap_content" 

  10. 10 android:layout_height="wrap_content"></Button> 

  11. 11 </LinearLayout> 

  12. 12 <LinearLayout android:layout_width="match_parent" 

  13. 13 android:id="@+id/linearLayout3" 

  14. 14 android:layout_height="match_parent" 

  15. 15 android:gravity="bottom|right"> 

  16. 16 <Button android:text="Button" 

  17. 17 android:id="@+id/button3" 

  18. 18 android:layout_width="wrap_content" 

  19. 19 android:layout_height="wrap_content"></Button> 

  20. 20 </LinearLayout> 

  21. 21 <LinearLayout android:layout_height="match_parent" 

  22. 22 android:id="@+id/linearLayout2" 

  23. 23 android:layout_width="match_parent" 

  24. 24 android:gravity="right"> 

  25. 25 <Button android:text="Button" 

  26. 26 android:id="@+id/button2" 

  27. 27 android:layout_width="wrap_content" 

  28. 28 android:layout_height="wrap_content"></Button> 

  29. 29 </LinearLayout> 

  30. 30 <LinearLayout android:layout_width="match_parent" 

  31. 31 android:id="@+id/LinearLayout01" 

  32. 32 android:layout_height="match_parent" 

  33. 33 android:gravity="bottom|left"> 

  34. 34 <Button android:id="@+id/Button01" 

  35. 35 android:text="Button" 

  36. 36 android:layout_width="wrap_content" 

  37. 37 android:layout_height="wrap_content"></Button> 

  38. 38 </LinearLayout> 

  39. 39 </FrameLayout>

複製代碼

下面介紹一下RelativeLayout用到的一些重要的屬性:

第一類:屬性值爲true或false
android:layout_centerHrizontal                                           水平居中
android:layout_centerVertical                                            垂直居中
android:layout_centerInparent                                           相對於父元素完全居中
android:layout_alignParentBottom                     貼緊父元素的下邊緣
android:layout_alignParentLeft                        貼緊父元素的左邊緣
android:layout_alignParentRight                       貼緊父元素的右邊緣
android:layout_alignParentTop                        貼緊父元素的上邊緣
android:layout_alignWithParentIfMissing               如果對應的兄弟元素找不到的話就以父元素做參照物

第二類:屬性值必須爲id的引用名“@id/id-name”
android:layout_below                          在某元素的下方
android:layout_above                          在某元素的的上方
android:layout_toLeftOf                       在某元素的左邊
android:layout_toRightOf                     在某元素的右邊

android:layout_alignTop                      本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft                      本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom                 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight                    本元素的右邊緣和某元素的的右邊緣對齊

第三類:屬性值爲具體的像素值,如30dip,40px
android:layout_marginBottom              離某元素底邊緣的距離
android:layout_marginLeft                   離某元素左邊緣的距離
android:layout_marginRight                 離某元素右邊緣的距離
android:layout_marginTop                   離某元素上邊緣的距離


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章