AndroidGUI17:Layout常用技巧

我們經常用到的控件都是 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 ,運行後得到的結果如下:


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