2.2 簡單布局

本節(jié)開始介紹Android的基本視圖和布局，首先說明基本視圖View類的常用屬性和方法，接著描述如何使用線性布局LinearLayout，最后介紹滾動視圖ScrollView的用法。

2.2.1 視圖View的基本屬性

View是Android的基本視圖，所有控件和布局都是由View類直接或間接派生而來的。故而View類的基本屬性和方法是各控件和布局通用的，掌握好基本屬性和方法，在哪里都能派上用場，能夠舉一反三、事半功倍。

下面是視圖在XML布局文件中常用的屬性定義說明。

● id：指定該視圖的編號。

● layout_width：指定該視圖的寬度?？梢允蔷唧w的dp數(shù)值；可以是match_parent，表示與上級視圖一樣寬；也可以是wrap_content，表示與內(nèi)部內(nèi)容一樣寬（內(nèi)部內(nèi)容若超過上級視圖的寬度，則該視圖保持與上級視圖一樣寬，超出寬度的內(nèi)容得進行滾動才能顯示出來）。

● layout_height：指定該視圖的高度。取值說明同layout_width。

● layout_margin：指定該視圖與周圍視圖之間的空白距離（包括上、下、左、右）。另有l(wèi)ayout_marginTop、layout_marginBottom、layout_marginLeft、layout_marginRight分別表示單獨指定視圖與上邊、下邊、左邊、右邊視圖的距離。

● minWidth：指定該視圖的最小寬度。

● minHeight：指定該視圖的最小高度。

● background：指定該視圖的背景。背景可以是顏色，也可以是圖片。

● layout_gravity：指定該視圖與上級視圖的對齊方式。對齊方式的取值說明見表2-2，若同時適用多種對齊方式，則可使用豎線“|”把多種對齊方式拼接起來。

表2-2 對齊方式的取值說明

● padding：指定該視圖邊緣與內(nèi)部內(nèi)容之間的空白距離。另有paddingTop、paddingBottom、paddingLeft、paddingRight分別表示指定視圖邊緣與內(nèi)容上邊、下邊、左邊、右邊的距離。

● visibility：指定該視圖的可視類型。可視類型的取值說明見表2-3。

表2-3 可視類型的取值說明

下面是視圖在代碼中常用的設(shè)置方法說明。

● setLayoutParams：設(shè)置該視圖的布局參數(shù)。參數(shù)對象的構(gòu)造函數(shù)可以設(shè)置視圖的寬度和高度。其中，LayoutParams.MATCH_PARENT表示與上級視圖一樣寬，也可以是LayoutParams.WRAP_CONTENT，表示與內(nèi)部內(nèi)容一樣寬；參數(shù)對象的setMargins方法可以設(shè)置該視圖與周圍視圖之間的空白距離。

● setMinimumWidth：設(shè)置該視圖的最小寬度。

● setMinimumHeight：設(shè)置該視圖的最小高度。

● setBackgroundColor：設(shè)置該視圖的背景顏色。

● setBackgroundDrawable：設(shè)置該視圖的背景圖片。

● setBackgroundResource：設(shè)置該視圖的背景資源id。

● setPadding：設(shè)置該視圖邊緣與內(nèi)部內(nèi)容之間的空白距離。

● setVisibility：設(shè)置該視圖的可視類型。取值說明見表2-3。

前面提到margin和padding兩個概念，margin是指當(dāng)前視圖與周圍視圖的距離，padding是指當(dāng)前視圖與內(nèi)部內(nèi)容的距離。這么說可能有些抽象，所謂百聞不如一見，說得再多不如親眼看看是怎么回事。我們來做一個實驗，看看它們的顯示效果有什么不同。下面是實驗用的布局文件源代碼，以背景色觀察每個控件的區(qū)域范圍：

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#00aaff"
            android:orientation="vertical"
            android:padding="5dp" >


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="20dp"
                android:background="#ffff99"
                android:padding="60dp" >


                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#ff0000" />
            </LinearLayout>
        </LinearLayout>

最后的界面效果如圖2-5所示。布局文件處于中間層的LinearLayout，設(shè)置margin是20dp、padding是60dp。從效果圖可以看到，中間層與上級視圖之間的距離大約是中間層與下級視圖之間距離的三分之一，正好是margin和padding兩個數(shù)值的比例。如此便從實際情況中印證了：layout_margin指的是當(dāng)前圖層與外部圖層的距離，而padding指的是當(dāng)前圖層與內(nèi)部圖層的距離。

圖2-5 margin和padding的演示畫面

視圖組ViewGroup是一類特殊視圖，所有布局視圖類都是從它派生而來的。Android中的視圖分為兩類，一類是布局，另一類是控件。布局與控件的區(qū)別在于：布局本質(zhì)上是個容器，里面還可以放其他視圖（包括子布局和子控件）；控件是一個單一的實體，已經(jīng)是最后一級，下面不能再掛其他視圖。打個比方，我們把根節(jié)點看作樹干，根節(jié)點下的各級布局就是樹枝，一根樹枝可以連著其他小樹枝，也可以直接連樹葉；樹葉只能依附在樹枝上，不能再連樹枝或其他樹葉。

ViewGroup有3個方法，這3個方法也是所有布局類視圖共同擁有的。

● addView：往布局中添加一個視圖。

● removeView：從布局中刪除指定視圖。

● removeAllViews：刪除該布局下的所有視圖。

2.2.2 線性布局LinearLayout

LinearLayout是最常用的布局，名字叫線性布局。顧名思義，LinearLayout下面的子視圖就像用一根線串了起來，所以LinearLayout內(nèi)部視圖的排列是有順序的，要么從上到下依次垂直排列，要么從左到右依次水平排列。LinearLayout除了繼承View/ViewGroup類的所有屬性和方法外，還有其特有的XML屬性，說明如下。

● orientation：指定線性布局的方向。horizontal表示水平布局，vertical表示垂直布局。如果不指定該屬性，就默認是horizontal。這真是出乎意料，因為大家感覺手機App理應(yīng)從上往下垂直布局，所以這里要特別注意垂直布局一定要設(shè)置orientation，不然默認的水平布局不符合多數(shù)業(yè)務(wù)場景。

● gravity：指定布局內(nèi)部視圖與本線性布局的對齊方式。取值說明同layout_gravity。

● layout_weight：指定當(dāng)前視圖的寬或高占上級線性布局的權(quán)重。這里要注意，layout_weight屬性并非在當(dāng)前LinearLayout節(jié)點中設(shè)置，而是在下級視圖的節(jié)點中設(shè)置。另外，如果layout_weight指定的是當(dāng)前視圖在寬度上占的權(quán)重，layout_width就要同時設(shè)置為0dp；如果layout_weight指定的是當(dāng)前視圖在高度上占的權(quán)重，layout_height就要同時設(shè)置為0dp。

下面是LinearLayout在代碼中增加的兩個方法。

● setOrientation：設(shè)置線性布局的方向。LinearLayout.HORIZONTAL表示水平布局，LinearLayout.VERTICAL表示垂直布局。

● setGravity：設(shè)置布局內(nèi)部視圖與本線性布局的對齊方式。具體的取值說明見表2-2。

接下來重點解釋layout_gravity和gravity的區(qū)別。前面說過，layout_gravity指定該視圖與上級視圖的對齊方式，而gravity指定布局內(nèi)部視圖與本布局的對齊方式。為方便理解，我們通過一個具體例子演示兩種屬性的顯示效果。下面是演示用的XML布局文件，內(nèi)部指定了多種對齊方式，其中左邊視圖的layout_gravity是bottom、gravity是left；右邊視圖的layout_gravity是top、gravity是right，布局文件內(nèi)容如下：

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#ffff99"
            android:orientation="horizontal"
            android:padding="5dp" >


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_weight="1"
                android:layout_gravity="bottom"
                android:gravity="left"
                android:background="#ff0000"
                android:layout_margin="10dp"
                android:padding="10dp"
                android:orientation="vertical">


                <View
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:background="#00ffff" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_weight="1"
                android:layout_gravity="top"
                android:gravity="right"
                android:background="#ff0000"
                android:layout_margin="10dp"
                android:padding="10dp"
                android:orientation="vertical">


                <View
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:background="#00ffff" />
            </LinearLayout>
        </LinearLayout>

運行后的界面效果如圖2-6所示。從效果圖可以看到，左邊視圖自身向下對齊，符合layout_gravity的設(shè)置，下級視圖靠左對齊，符合gravity的設(shè)置；右邊視圖自身向上對齊，符合layout_gravity的設(shè)置，下級視圖靠右對齊，符合gravity的設(shè)置。

圖2-6 layout_gravity和gravity的演示界面

2.2.3 滾動視圖ScrollView

手機屏幕的顯示空間有限，常常需要上下滑動或左右滑動才能拉出其余頁面內(nèi)容，可惜Android的布局節(jié)點都不支持自行滾動，這時就要借助ScrollView滾動視圖實現(xiàn)了。與線性布局類似，滾動視圖也分為垂直方向和水平方向兩類，其中垂直滾動的視圖名是ScrollView，水平滾動的視圖名是HorizontalScrollView。這兩個滾動視圖的使用并不復(fù)雜，主要注意以下3點：

（1）垂直方向滾動時，layout_width要設(shè)置為match_parent,layout_height要設(shè)置為wrap_content。

（2）水平方向滾動時，layout_width要設(shè)置為wrap_content,layout_height要設(shè)置為match_parent。

（3）滾動視圖節(jié)點下面必須且只能掛著一個子布局節(jié)點，否則會在運行時報錯Caused by:java.lang.IllegalStateException:ScrollView can host only one direct child。

下面是滾動視圖ScrollView和水平滾動視圖HorizontalScrollView的XML用法示例：

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <HorizontalScrollView
                android:layout_width="wrap_content"
                android:layout_height="200dp">


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">


                    <View
                        android:layout_width="400dp"
                        android:layout_height="match_parent"
                        android:background="#aaffff" />


                    <View
                        android:layout_width="400dp"
                        android:layout_height="match_parent"
                        android:background="#ffff00" />
                </LinearLayout>
            </HorizontalScrollView>


            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">


                    <View
                        android:layout_width="match_parent"
                        android:layout_height="400dp"
                        android:background="#00ff00" />


                    <View
                        android:layout_width="match_parent"
                        android:layout_height="400dp"
                        android:background="#ffffaa" />
                </LinearLayout>
            </ScrollView>
        </LinearLayout>

有時ScrollView的實際內(nèi)容不夠，又想讓它充滿屏幕，怎么辦呢？如果把layout_height屬性賦值為match_parent，那么結(jié)果還是不會充滿，正確的做法是再增加一行fillViewport的屬性設(shè)置，舉例如下：

                android:layout_height="match_parent"
                android:fillViewport="true"