1. 程式人生 > >Android UI之五種基本佈局詳解

Android UI之五種基本佈局詳解

Android佈局是應用介面開發的重要一環,在Android中,共有五種佈局方式,分別是:

  1. LinearLayout (線性佈局)
  2. RelativeLayout(相對佈局)
  3. FrameLayout(幀佈局)
  4. TableLayout(表格佈局)GridLayout 網格佈局
  5. AbsoluteLayout(絕對佈局)

LinearLayout (線性佈局)

LinearLayout是一種線型的佈局方式。LinearLayout佈局容器內的元件一個挨著一個地排列起來:不僅可以控制個元件橫向排列,也可控制各元件縱向排列。

  • android:orientation 屬性指定了排列方向是 vertical,如果指定的是horizontal,控制元件就會在水平方向上排列了。
  • android:gravity 是用 於指定文字在控制元件中的對齊方式
  • android:layout_gravity 是用於指定控制元件在佈局中的對齊 方式 RelativeLayout 相對佈局
  • android:layout_weight=”1”(權重分佈),這個weight在垂直佈局時,代表行距;水平的時候代表列寬;weight值越大就越大。
  • android:visibility=invisible控制佈局是否顯示 :1、顯示 visible 2、不顯示,但佔空間 invisible 3、隱藏 gone

RelativeLayout(相對佈局)

是一種相對佈局,控制元件的位置是按照相對位置來計算的,後一個控制元件在什麼位置依賴於前一個控制元件的基本位置,是佈局最常用,也是最靈活的一種佈局。

分類方式一
a)、第一類:屬性值為true或false
  android:layout_centerHrizontal 水平居中
  android:layout_centerVertical 垂直居中
  android:layout_centerInparent 相對於父元素完全居中
  android:layout_alignParentBottom 貼緊父元素的下邊緣
  android:layout_alignParentLeft 貼緊父元素的左邊緣
  android:layout_alignParentRight 貼緊父元素的右邊緣
  android:layout_alignParentTop 貼緊父元素的上邊緣  
b)、第二類:屬性值必須為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 本元素的右邊緣和某元素的的右邊緣對齊

c)、第三類:屬性值為具體的畫素值,如30dip,40px
  android:layout_marginBottom 離某元素底邊緣的距離
  android:layout_marginLeft 離某元素左邊緣的距離
  android:layout_marginRight 離某元素右邊緣的距離
  android:layout_marginTop 離某元素上邊緣的距離
  
分類方式二
  android:layout_marginTop=”25dip” //頂部距離
  android:gravity=”left” //空間佈局位置
  android:layout_marginLeft=”15dip //距離左邊距
相對於給定ID控制元件
  android:layout_above 將該控制元件的底部置於給定ID的控制元件之上;
  android:layout_below 將該控制元件的底部置於給定ID的控制元件之下;
  android:layout_toLeftOf 將該控制元件的右邊緣與給定ID的控制元件左邊緣對齊;
  android:layout_toRightOf 將該控制元件的左邊緣與給定ID的控制元件右邊緣對齊;
  android:layout_alignBaseline 將該控制元件的baseline與給定ID的baseline對齊;
  android:layout_alignTop 將該控制元件的頂部邊緣與給定ID的頂部邊緣對齊;
  android:layout_alignBottom 將該控制元件的底部邊緣與給定ID的底部邊緣對齊;
  android:layout_alignLeft 將該控制元件的左邊緣與給定ID的左邊緣對齊;
  android:layout_alignRight 將該控制元件的右邊緣與給定ID的右邊緣對齊;
相對於父元件
  android:layout_alignParentTop 如果為true,將該控制元件的頂部與其父控制元件的頂部對齊;
  android:layout_alignParentBottom 如果為true,將該控制元件的底部與其父控制元件的底部對齊;
  android:layout_alignParentLeft 如果為true,將該控制元件的左部與其父控制元件的左部對齊;
  android:layout_alignParentRight 如果為true,將該控制元件的右部與其父控制元件的右部對齊;
居中
  android:layout_centerHorizontal 如果為true,將該控制元件的置於水平居中;
  android:layout_centerVertical 如果為true,將該控制元件的置於垂直居中;
  android:layout_centerInParent 如果為true,將該控制元件的置於父控制元件的中央;
指定移動畫素
  android:layout_marginTop 上偏移的值;
  android:layout_marginBottom 下偏移的值;
  android:layout_marginLeft   左偏移的值;
  android:layout_marginRight   右偏移的值;
  
基本屬性
  android:id — 為控制元件指定相應的ID
  android:text — 指定控制元件當中顯示的文字,需要注意的是,這裡儘量使用strings.xml檔案當中的字串
  android:grivity — 指定控制元件的基本位置,比如說居中,居右等位置這裡指的是控制元件中的文字位置並不是控制元件本身。
  android:textSize — 指定控制元件當中字型的大小
  android:background — 指定該控制元件所使用的背景色,RGB命名法
  android:width — 指定控制元件的寬度
  android:height — 指定控制元件的高度
  android:padding* — 指定控制元件的內邊距,也就是說控制元件當中的內容
  android:sigleLine — 如果設定為真的話,則控制元件的內容在同一行中進行顯示

FrameLayout(幀佈局)

  FrameLayout物件好比一塊在螢幕上提前預定好的空白區域,可以將一些元素填充在裡面,如圖片。所有元素都被放置在FrameLayout區域的最左上區域,而且無法為這些元素制指定一個確切的位置,若有多個元素,那麼後面的元素會重疊顯示在前一個元素上。

TableLayout(表格佈局)

TableLayout是指將子元素的位置分配到行或列中。Android的一個TableLayout有許多TableRow組成,每一個TableRow都會定義一個Row。TableLayout容器不會顯示Row,Column,及Cell的邊框線,每個Row擁有0個或多個Cell,每個Cell擁有一個View物件。在使用tablelayout時,應注意每一個cell的寬度。

(1)TableLayout行列數的確定
- TableLayout的行數由開發人員直接指定,即有多少個TableRow物件(或View控制元件),就有多少行
- TableLayout的列數等於含有最多子控制元件的TableRow的列數。如第一TableRow含2個子控制元件,第二個TableRow含3個,第三個TableRow含4個,那麼該TableLayout的列數為4.

(2)TableLayout可設定的屬性詳解

TableLayout可設定的屬性包括全域性屬性及單元格屬性。

  1. 全域性屬性也即列屬性,有以下3個引數:
      android:stretchColumns 設定可伸展的列。該列可以向行方向伸展,最多可佔據一整行。
      android:shrinkColumns 設定可收縮的列。當該列子控制元件的內容太多,已經擠滿所在行,那麼該子控制元件的內容將往列方向顯示。
      android:collapseColumns 設定要隱藏的列。
    示例:
      android:stretchColumns=”0” 第0列可伸展
      android:shrinkColumns=”1,2” 第1,2列皆可收縮
      android:collapseColumns=”*” 隱藏所有行
      

    說明:列可以同時具備stretchColumns及shrinkColumns屬性,若此,那麼當該列的內容N多時,將“多行”顯示其內容。(這裡不是真正的多行,而是系統根據需要自動調節該行的layout_height)

  2. 單元格屬性,有以下2個引數:
      android:layout_column 指定該單元格在第幾列顯示
      android:layout_span 指定該單元格佔據的列數(未指定時,為1)
      示例:
      android:layout_column=”1” 該控制元件顯示在第1列
      android:layout_span=”2” 該控制元件佔據2列

  說明:一個控制元件也可以同時具備這兩個特性。

GridLayout 網格佈局

GridLayout佈局使用虛細線將佈局劃分為行、列和單元格,也支援一個控制元件在行、列上都有交錯排列。而GridLayout使用的其實是跟LinearLayout類似的API,只不過是修改了一下相關的標籤而已,所以對於開發者來說,掌握GridLayout還是很容易的事情。GridLayout的佈局策略簡單分為以下三個部分:

  1. 首先它與LinearLayout佈局一樣,也分為水平和垂直兩種方式,預設是水平佈局,一個控制元件挨著一個控制元件從左到右依次排列,但是通過指定Android:columnCount設定列數的屬性後,控制元件會自動換行進行排列。另一方面,對於GridLayout佈局中的子控制元件,預設按照wrap_content的方式設定其顯示,這隻需要在GridLayout佈局中顯式宣告即可。
  2. 其次,若要指定某控制元件顯示在固定的行或列,只需設定該子控制元件的android:layout_row和android:layout_column屬性即可,但是需要注意:android:layout_row=”0”表示從第一行開始,android:layout_column=”0”表示從第一列開始,這與程式語言中一維陣列的賦值情況類似。
  3. 最後,如果需要設定某控制元件跨越多行或多列,只需將該子控制元件的android:layout_rowSpan或者layout_columnSpan屬性設定為數值,再設定其layout_gravity屬性為fill即可,前一個設定表明該控制元件跨越的行數或列數,後一個設定表明該控制元件填滿所跨越的整行或整列。
    AbsoluteLayout
    android:layout_x 指定控制元件在父佈局的x軸座標
    android:layout_y 指定控制元件在父佈局的 y軸座標

AbsoluteLayout(絕對佈局)

絕對佈局極少使用,在不是絕對要使用的情況下就絕對不要用

相關推薦

no