Android學習筆記（二） 佈局方式的介紹

Android應用的開發的一項內容就是用戶界面開發了。Android 提供了大量功能豐富的UI組件。Android的界面是由佈局和組件協同完成的。

 
 Android全部UI組件都繼承了View類，View類有一個重要的子類：ViewGroup，但ViewGroup一般做爲其餘組件的容器使用。如今介紹以ViewGroup爲基類派生出來的佈局管理器。

 Android的佈局方式有如下幾種：線性佈局（Linear Layout）、表格佈局（Table Layout）、幀佈局（Frame Layout）、相對佈局（Relative Layout）、網格佈局（Grid Layout）、絕對佈局（Absolute Layout）。

1. 線性佈局（Linear Layout）
    這種佈局比較經常使用，也比較簡單，就是每一個元素佔一行，固然也可能聲明爲橫向排放，也就是每一個元素佔一列。Android的線性佈局不會換行，當組件一個挨着一個排列到頭以後，剩下的組件將不會被顯示出來。LinearLayout能夠控制各組件橫向排列，也可控制組件縱向排列。（經過設置android:orientation屬性控制），例如定義以下XML佈局管理器，res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button5" />
</LinearLayout>

根據上面LinearLayout的配置，以線性的方式，垂直居中放置組件，運行效果以下：

2. 表格佈局（Table Layout）
    1）TableLayou繼承了LinearLayout，所以它的本質依然是線性佈局管理器。表格佈局採用行、列的形式管理UI組件，TableLayout並不須要明確的聲明多少行、列，而是經過添加TableRaw、其餘組件來控制表格的行數和列數。
   
    2）每次向TableLayout添加一個TableRaw，該TableRaw就是一個表格行，同時TableRaw也是一個容器，它能夠不斷的添加其餘組件，每一個組件佔用一列。
    
    3）若是直接向TableLayout中添加組件，那麼這個組件將直接佔用一行。

   4）表格佈局的三種單元格設置：
        a）Shrinkable：表示該列全部單元格的寬度能夠被收縮。
        b）Stretchable：表示該列全部單元格的寬度能夠被拉伸。
        c）Collapsed：表示該列全部單元格會被隱藏。
    
    下面來看下程序示範，TableLayoutTest/res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:shrinkColumns="1"
    android:stretchColumns="2"
    android:collapseColumns="3">
    <!-- 定義第一個表格佈局，指定第2列收縮，第3列拉伸 ，第4列隱藏-->
    
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bn1" />

    <TableRow>
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bn2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bn3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bn4" />
        
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bn5" />
    </TableRow>

</TableLayout>

上面的TableLayout配置中，第一個button獨自佔用一行，第二列收縮，第三列拉伸，第四列隱藏了。運行效果以下：

3. 幀佈局（FrameLayout）
    FrameLayout直接繼承自ViewGroup組件。幀佈局容器爲每一個加入其中的組件建立一個空白的區域，每一個子組件佔據一幀，這些幀都會根據gravity屬性執行自動對齊。

    下面來看下程序示範，FrameLayoutTest/res/layout/main.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView android:id="@+id/view01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="320px"
        android:height="320px"
        android:background="#f00" />
    
    <TextView android:id="@+id/view02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="280px"
        android:height="280px"
        android:background="#0f0" />

    <TextView android:id="@+id/view03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="240px"
        android:height="240px"
        android:background="#00f" />
    
    <TextView android:id="@+id/view01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="200px"
        android:height="200px"
        android:background="#ff0" />    
    
    <TextView android:id="@+id/view4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="160px"
        android:height="160px"
        android:background="#f0f" />    
    
     <TextView android:id="@+id/view05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" 
        android:width="120px"
        android:height="120px"
        android:background="#0ff" />   

</FrameLayout>

上面的FrameLayout定義了6個TextView，先定義的TextView位於底部，後定義的TextView位於上層，上層的組件會覆蓋下層的組件，可是因爲底部的組件大，不能徹底覆蓋，所以運行效果以下：

4. 相對佈局（Relative Layout）
    RelativeLayout內的子組件老是相對兄弟組件、父組件來決定的。下面來看下RelativeLayout.LayoutParams屬性：
    1） 只能設置爲boolean值得屬性：
         Android:layout_centerHorizontal         位於佈局容器的水平居中
         Android:layout_centerVertical             位於佈局容器的垂直居中
         Android:layout_centerInParent            位於佈局容器的中央位置
         Android:layout_alignParentBottom      與佈局容器底部對齊
         Android:layout_alignParentLeft           與佈局容器左邊對齊
         Android:layout_alignParentRight         與佈局容器右邊對齊
         Android:layout_alignParentTop           與佈局容器頂端對齊

    2） 只能設置爲其餘UI組件ID的屬性：
         Android:layout_toRightOf                      位於給出ID組件的右側
         Android:layout_toLeftOf                        位於給出ID組件的左側
         Android:layout_about                            位於給出ID組件的上方
         Android:layout_below                            位於給出ID組件的下方
         Android:layout_alignTop                        位於給出ID組件的上邊界對齊
         Android:layout_alignBottom                   位於給出ID組件的下邊界對齊
         Android:layout_alignLeft                        位於給出ID組件的左邊界對齊
         Android:layout_alignRight                      位於給出ID組件的右邊界對齊

  下面來看下程序示範，RelativeLayoutTest/res/layout/main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button1" 
        android:layout_centerInParent="true" />

    <Button android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2" 
        android:layout_above="@id/button1"
        android:layout_alignLeft="@id/button1" />
    
    <Button android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button3" 
        android:layout_below="@id/button1"
        android:layout_alignLeft="@id/button1" />
    
    <Button android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button4" 
        android:layout_toLeftOf="@id/button1"
        android:layout_alignTop="@id/button1" />
    
    <Button android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button5" 
        android:layout_toRightOf="@id/button1"
        android:layout_alignTop="@id/button1" />

</RelativeLayout>

運行效果以下： 

5. 網格佈局（Grid Layout）

    GridLayout是Android 4.0新增的佈局管理器，GridLayout的做用相似於HTML中的table標籤，它把整個容器劃分紅 Rows x Columns 個網格，每一個網格放置一個組件。也能夠設置一個組件跨越多少列或行。

    經常使用的XML屬性有：
    android:layout_column                設置該子組件在GridLayout的第幾列
    android:layout_columnSpan         設置該子組件在GridLayout橫向上跨幾列
    android:layout_gravity                 設置以何種方式佔據網格空間
    android:layout_raw                      設置該子組件在GridLayout的第幾行
    android:layout_rawSpan               設置該子組件在GridLayout縱向上跨幾行

  下面來看下程序示範，GridLayoutTest/res/layout/main.xml:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4"
    android:id="@+id/root" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:textSize="50sp"
        android:layout_marginLeft="4px"
        android:layout_marginRight="4px"
        android:padding="5px"
        android:layout_gravity="right"
        android:background="#eee"
        android:textColor="#000"
        android:text="0"/>
    
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:text="Clear"/>
</GridLayout>

注意了在建立該項目的時候，最低的API至少爲14，即Android 4.0。否則GridLayout屬性會報錯。 

GridLayoutTest/src/com/lvinliang/gridlayout/MainActivity:

public class MainActivity extends Activity {
    
    GridLayout gridLayout;
    
    String[] chars = new String[] {
            "7", "8", "9", "÷",
            "4", "5", "6", "x",
            "1", "2", "3", "-",
            ".", "0", "=", "+"
    };
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        gridLayout = (GridLayout) findViewById(R.id.root);
        for (int i = 0; i < chars.length; i++ ) {
            Button bn = new Button(this);
            bn.setText(chars[i]);
            bn.setTextSize(40);
            // 指定組件所在的行
            GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 2);
            // 指定組件所在的列
            GridLayout.Spec columnSpec = GridLayout.spec(i % 4);
            GridLayout.LayoutParams params = new GridLayout.LayoutParams(rowSpec, columnSpec);
            params.setGravity(Gravity.FILL);
            gridLayout.addView(bn, params);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

由上面GridLayout定義一個計算機界面，界面設計成一個6 x 4的網格，顯示效果以下： 

6. 絕對佈局（Absolute Layout）
    Android將不提供任何佈局控制，而是由開發人員本身經過X座標、Y座標來控制組件的位置。
    以下所示佈局文件：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/text01"
     android:text="絕對佈局"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="100dip"
     android:layout_y="100dip">
   </TextView>
</AbsoluteLayout>

不推薦使用絕對佈局，由於運行Android應用的手機不一樣，屏幕大小、分辨率都存在很大的差別，使用絕對佈局很難兼顧屏幕大小和分辨率問題。

最後，來看下Android一些經常使用的距離單位：

px: 像素，每一個px對應屏幕上的一個點
dip或dp：一種基於屏幕密度的抽象單位。在每英寸160點的顯示器上，1dip = 1px。公式：px = dip * (dpi / 160)
sp：處理字體的大小。
in: 英寸，標準長度單位。
pt: 磅，1/72英寸。