一、引言
Android的界面是有布局和組件協同完成的,布局好比是建築里的框架,而組件則相當於建築里的磚瓦。組件按照布局的要求依次排列,就組成了用戶所看見的界面。在Android4.0之前,我們通常說Android開發五大布局和四大組件,這五大布局就是:
- LinearLayout 線性布局
- FrameLayout 單幀布局,也有中文翻譯為幀布局、框架布局。
- RelativeLayout 相對布局
- AbsoluteLayout 絕對布局
- TableLayout 表格布局
而在Android4.0之后又新增了一種GridLayout網格布局。
二、LinearLayout線性布局
線性布局是Android開發中最常見的一種布局方式,它是按照垂直或者水平方向來布局,通過“android:orientation”屬性可以設置線性布局的方向。屬性值有垂直(vertical)和水平(horizontal)兩種。線性布局的排列在某行或者某列並不會自動換行或換列,就是說如果采用水平布局,控件寬度超過屏幕顯示的話,后面的控件都將被隱藏,不會自動換行。
常用的屬性有:
- android:orientation:可以設置布局的方向
- android:id - 為控件指定相應的ID
- android:text - 指定控件當中顯示的文字,需要注意的是,這里盡量使用string.xml
- android:gravity - 指定控件的基本位置,比如說居中,居右等位置
- android:textSize - 指定控件當中字體的大小
- android:background - 指定控件所用的背景色,RGB命名法
- android:layout_width - 指定控件的寬度
- android:layout_height - 指定控件的高度
- android:layout_weight - 指定控件的占用比例
- android:padding - 指定控件的內邊距,也就是說控件當中的內容
- android:sigleLine - 如果設置為真的話,則將控件的內容顯示在一行當中
layout_weight屬性以控制各個控件在布局中的相對大小。layout_weight屬性是一個非負整數值;線性布局會根據該控件layout_weight值與其所處布局中所有控件layout_weight值之和的比值為該控件分配占用的區域。例如,在水平布局的LinearLayout中有兩個Button,這兩個Button的layout_weight屬性值都為1,那么這兩個按鈕都會被拉伸到整個屏幕寬度的一半。如果layout_weight指為0,控件會按原大小顯示,不會被拉伸;對於其余layout_weight屬性值大於0的控件,系統將會減去layout_weight屬性值為0的控件的寬度或者高度,再用剩余的寬度或高度按相應的比例來分配每一個控件顯示的寬度或高度。
線性水平布局代碼和示意圖如下:
線性垂直布局代碼和示意圖如下(android:orientation通過修改該屬性值控制水平或者垂直):
布局也是可以嵌套的,代碼和示意圖如下:
三、FrameLayout單幀布局
FrameLayout是布局中最簡單的一個布局,在這個布局中,整個界面被當成一塊空白備用區域,所有的子元素都不能被指定放置的位置,它們統統放於這塊區域的左上角,並且后面的子元素直接覆蓋在前面的子元素之上,將前面的子元素部分和全部遮擋。
代碼及顯示效果圖如下:
可以看到3個按鈕組件都有重疊的部分,單幀布局不會像線性布局那樣每個組件之間自動對齊。
對於單幀布局的使用場景我還是有所疑惑的,不知道這種布局方式會用在什么場景下,不過我看了這一篇文章倒是略有感觸,分享一下,或許也能給大家些啟發:
四、RelativeLayout相對布局
RelativeLayout(相對布局)是除線性布局之外最常用的,它相對於線性布局來說比較靈活,在進行組件布局的時候用線性布局往往需要進行布局嵌套,而相對布局就不會那么麻煩,每個組件都可以指定與其它組件或父組件的位置,只是必須通過ID來進行指定。RelativeLayout按照各子元素之間的位置關系完成布局。在此布局中的子元素里與位置相關的屬性將生效。例如android:layout_below, android:layout_above等。子元素就通過這些屬性和各自的ID配合指定位置關系。注意在指定位置關系時,引用的ID必須在引用之前,先被定義,否則將出現異常。
代碼及演示示例如下:
補充一下用到的屬性的說明:
表1.組件之間的位置關系屬性 | |
屬性名稱 | 作用說明 |
android:layout_above | 將組件放在指定ID組件的上方 |
android:layout_below | 將組件放在指定ID組件的下方 |
android:layout_toLeftOf | 將組件放在指定ID組件的左方 |
android:layout_toRightOf | 將組件放在指定ID組件的右方 |
表2.組件對齊關系屬性 | |
android:layout_alignBaseline | 將該組件放在指定ID組件進行中心線對齊 |
android:layout_alignTop | 將該組件放在指定ID組件進行頂部對齊 |
android:layout_alignBottom | 將該組件放在指定ID組件進行底部對齊 |
android:layout_alignLeft | 將該組件放在指定ID組件進行左邊緣對齊 |
android:layout_alignRight | 將該組件放在指定ID組件進行右邊緣對齊 |
表3.當前組件與父組件對齊關系屬性 | |
android:layout_centerHorizontal | 將該組件放置在水平方向中央的位置 |
android:layout_centerVertical | 將該組件放置在垂直方向的中央的位置 |
anroid:layout_centerInParent | 將該組件放置在父組件的水平及垂直中央 |
而對於相對布局的屬性,這里也推薦一篇博文供大家參考學習:
五、AbsoluteLayout絕對布局
AbsoluteLayout(絕對布局)布局用法如其名,組件的位置可以准確的指定其在屏幕的x/y坐標位置。雖然可以精確的去規定坐標,但是由於代碼的書寫過於剛硬,使得在不同的設備,不同分辨率的手機移動設備上不能很好的顯示應有的效果,所以此布局不怎么被推薦使用。在此布局中的子元素的android:layout_x和android:layout_y屬性將生效,用於描述該子元素的坐標位置。屏幕左上角為坐標原點(0,0),第一個0代表橫坐標,向右移動此值增大,第二個0代表縱坐標,向下移動,此值增大。在此布局中的子元素可以相互重疊。在實際開發中,通常不采用此布局格式。
雖然實際開發總已經不推薦使用該布局,不過我們還是了解一下他的使用方法(不做詳細介紹,感興趣的自行去查找文檔),代碼和示意圖如下:
六、TableLayout表格布局
TableLayout顧名思義,此布局為表格布局,適用於N行N列的布局格式。一個TableLayout由許多TableRow組成,一個TableRow就代表TableLayout中的一行。
TableRow是LinearLayout的子類,它的android:orientation屬性值恆為horizontal,並且它的android:layout_width和android:layout_height屬性值恆為MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是橫向排列,並且寬高一致的。這樣的設計使得每個TableRow里的子元素都相當於表格中的單元格一樣。在TableRow中,單元格可以為空,但是不能跨列。
下面我們使用表格布局編寫示例代碼做一個三行三列的布局:
TableLayout不復雜,使用也就是這么簡單,下面補充幾個常用屬性的作用:
1.shrinkColumns屬性:以0為序,當TableRow里面的控件布滿布局時,,指定列自動延伸以填充可用部分;當TableRow里面的控件還沒有布滿布局時,shrinkColumns不起作用。
我們在布局代碼中加入該屬性時會發現沒有發生變化,因為TableRow里面的控件還沒有布滿布局,修改代碼如下就可以看到效果:
2.strechColumns屬性,以第0行為序,指定列對空白部分進行填充。代碼及效果如下:
3.collapseColumns屬性:以0行為序,隱藏指定的列。這個比較容易理解,代碼及效果如下:
4.layout_column屬性:以0行為序,設置組件顯示指定列
5.layout_span屬性:以第0行為序,設置組件顯示占用的列數。這兩個屬性之所以放一起,因為有些事項需要說明,先看代碼和效果圖:
注意:從示意圖可知:Button1被設置了占用了2列,Button4被設置顯示在地2列,但代碼指定Button5顯示在第1列,但沒有按照設定顯示,這樣可知TableRow在表格布局中,一行里的組件都會自動放在前一組件的右側,依次排列,只要確定了所在列,其后面的組件就無法再進行位置的設置。
七、GridLayout網格布局
GridLayout網格布局是Android4.0之后新加入的布局方式,與TableLayout大同小異,不過也新增了一些內容:
1.可以設置容器中組件的對其方式。
2.容器中的組件可以跨多行也可以跨多列
需要注意的是因為是Android4.0之后新增的,所以API Level14之前的SDK無法直接使用,還想使用的話就自己去百度方法,這里不再說,因為我覺得應該很少人再做4.0之前的程序了吧?
先看示例代碼吧,這個網格布局做計算器示例應該是最簡單的:
說明:rowCount和columnCount是定義了行和列,就是這個布局定義了6行4列。這里layout_columnSpan是指占用了幾列,在示例代碼中,“BackSpace”和”Clear“按鈕都占用了2列,其他按鈕默認都是占用1行1列。其中layout_rowSpan是占用了幾行,這里不再寫示例,各位可以自行實驗,再通過將layout_gravity設置為fill就是填滿占用的行或列。
其它擴展的內容各位可以查找對應的API說明文檔進行學習。