我們經常用到的控件都是 View 的派生類,他們通常都是可見的。 ViewGroup 也是 View 的派生類,但 ViewGroup 通常是不可見的。
ViewGroup 的主要作用:
+ 作爲 Layout 。比如 LinearLayout 、 RelativeLayout 、 FrameLayout 和 TableLayout
+ 作爲 View 的容器。比如 Gallery 、 GridView 、 ImageSwitcher 、 ScrollView 、 TabHost 和 ListView
其實 Layout 也可以被認爲是 View 的一種容器。
本文僅討論 ViewGroup 作爲 Layout 的常用技巧。
1. LinearLayout
LinearLayout 顧名思義就是線性佈局。其子 View 對象要麼以 “ 行 ” 排列,要麼以 “ 列 ” 排列,這取決於其 orientation 屬性是 horizontal 還是 vertical 的。
創建一個 Android Project 項目。然後在創建一個 linearlayout.xml ,使其內容如下:
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
< Button
android:id = "@+id/linearbutton01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 1"
/>
< Button
android:id = "@+id/linearbutton02"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 2"
/>
< Button
android:id = "@+id/linearbutton01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 3"
/>
< Button
android:id = "@+id/linearbutton01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 4"
/>
</ LinearLayout >
將 Activity 對應的代碼中的 setContentView 的參數,改爲: R.layout.linearlayout ,運行後得到的結果如下:
如果將 linearlayout.xml 中的 orientation 屬性值改爲 ”horizontal” ,那麼運行後的結果如下:
2. RelativeLayout
RelativeLayout 可以根據子 View 對象彼此之間的位置關係來顯示子 View 對象。比如通過 ”above” 、 ”below” 、 ”to the left of” 、 ”to the right of” 其他的子 View 對象來定位。
創建一個佈局文件 relativelayout.xml ,使其內容如下:
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/relativelayout"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent" >
< Button
android:id = "@+id/buttonCenter"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Center"
android:layout_centerInParent = "true"
/>
< ImageView
android:id = "@+id/ImageView01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_above = "@id/buttonCenter"
android:layout_centerHorizontal = "true"
android:src = "@drawable/icon"
/>
< TextView
android:id = "@+id/textview01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_toLeftOf = "@id/buttonCenter"
android:textSize = "20px"
android:text = "Android1"
/>
< TextView
android:id = "@+id/textview02"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_toLeftOf = "@id/buttonCenter"
android:layout_centerVertical = "true"
android:textSize = "20px"
android:text = "Android2"
/>
< TextView
android:id = "@+id/textview03"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_below = "@+id/textview01"
android:textSize = "20px"
android:text = "Android3"
/>
</ RelativeLayout >
將 Activity 對應的代碼中的 setContentView 的參數,改爲: R.layout.framelayout ,運行後得到的結果如下:
3. FrameLayout
FrameLayout 以 “ 棧 ” 的形式顯示子 View( 比如控件 ) 。可以想 FrameLayout 添加多個 View 對象,但是每個 View 在缺省的情況下都被畫在該 layout 的左上角。比如,通常可以用於在同一個區域,顯示多個圖片。
FrameLayout 的大小就是其中尺寸最大的子 View 的大小。
往項目的 res/drawable-mdpi 文件夾,加入兩個圖片資源:
它們的文件名分別爲: china.png 和 macau.png 。
創建一個佈局文件 framelayout.xml ,使其內容如下:
<? xml version = "1.0" encoding = "utf-8" ?>
< FrameLayout
android:id = "@+id/framelayout"
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
>
< ImageView
android:id = "@+id/imageview01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src = "@drawable/china"
android:minHeight = "200px"
android:minWidth = "200px"
/>
< ImageView
android:id = "@+id/imageview02"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src = "@drawable/macau"
android:minHeight = "100px"
android:minWidth = "100px"
android:layout_gravity = "center"
/>
</ FrameLayout >
將 Activity 對應的代碼中的 setContentView 的參數,改爲: R.layout.framelayout ,運行後得到的結果如下:
如果把 framelayout.xml 中的第二個 ImageView 中的 android:layout_gravity="center" 屬性去掉,那麼所得到的結果將是:
如果將 android:layout_gravity="center" 屬性加入到 FrameLayout 本身,那麼得到的結果如下:
在代碼中,我們可以通過形如:
FrameLayout fl = (FrameLayout)this .findViewById(R.id.framelayout );
這樣的方式,來獲得 FrameLayout 對象,然後通過 FrameLayout 中的方法 addView 向其中增加子 View 對象,也可以通過 removeView 從其中刪除子 View 對象。 addView 和 removeView 均有多個重載方法。
4. TableLayout
TableLayout 將子 View 按照 TableRow 的方式從上到下進行排列。 TableRow 基本上和一個 orientation 屬性爲 “horizontal” 的 LinearLayout 相同,它代表的是一個 TableLayout 中的一行。在 TableRow 中可以增加子 View ,在用一個 TableRow 中子 View 的排列是從左至右的。
缺省地, TableRow 的順序是從 0 開始的,在一個 TableRow 中的列的順序也是從 0 開始的。
創建一個 tablelayout.xml ,使其內容如下:
<? xml version = "1.0" encoding = "utf-8" ?>
< TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/talbelayout"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:stretchColumns = "*"
>
<!-- * 代表所有的列 , 也可以用 "0,1,2,3,4..." 代替 -->
< TableRow android:id = "@+id/tablerow0" >
< TextView
android:text = "1234567890"
android:textSize = "10px"
/>
< TextView
android:text = "1234567890"
android:textSize = "10px"
/>
< TextView
android:text = "1234567890"
android:textSize = "10px"
/>
< TextView
android:text = "1234567890"
android:textSize = "10px"
/>
</ TableRow >
<!-- 上面的代碼 , 意味着這個 TableLayout 有 4 列 -->
< TableRow android:id = "@+id/tablerow1" >
< Button
android:id = "@+id/leftbutton"
android:text = "Left"
android:textSize = "12px"
android:layout_height = "40px"
/>
< Button
android:id = "@+id/leftbutton"
android:text = "Middle"
android:textSize = "12px"
android:layout_height = "40px"
/>
< Button
android:id = "@+id/leftbutton"
android:text = "Right"
android:textSize = "12px"
android:layout_height = "40px"
android:layout_column = "2"
android:layout_span = "2"
/>
</ TableRow >
<!-- leftbutton 的起始位置在第 2(3) 列 (android:layout_column="2") ,
佔用 2 列 (android:layout_span="2") -->
< TableRow android:id = "@+id/tablerow2" >
< Button
android:id = "@+id/backbutton"
android:text = "Back Button"
android:layout_column = "2"
/>
</ TableRow >
<!-- backbutton 處於第 2(3) 列的位置 (android:layout_column="2")-->
< TableRow android:id = "@+id/tablerow3" >
< Button
android:id = "@+id/spanbutton"
android:text = "Span Button"
android:layout_column = "0"
android:layout_span = "2"
/>
</ TableRow >
<!-- backbutton 處於第 0(1) 列的位置 (android:layout_column="0")
佔用 2 列 (android:layout_span="2")-->
< TableRow android:id = "@+id/tablerow4" >
< TextView
android:gravity = "right"
android:paddingRight = "8px"
android:text = " 姓名 : "
/>
< EditText
android:id = "@+id/editname"
android:layout_column = "1"
android:layout_span = "2"
android:text = ""
/>
</ TableRow >
< TableRow android:id = "@+id/tablerow5" >
< TextView
android:gravity = "right"
android:paddingRight = "8px"
android:text = " 地址 : "
/>
< EditText
android:id = "@+id/editname"
android:layout_column = "1"
android:layout_span = "3"
android:text = ""
/>
</ TableRow >
</ TableLayout >
將 Activity 對應的代碼中的 setContentView 的參數,改爲: R.layout.tableayout ,運行後得到的結果如下: