注册送38彩金app彩票

書名： Android 5從入門到精通
作者名：李波
本章字數： 2609字
更新時間： 2021-03-19 15:29:02

4.3 布局

Android SDK定義了多種布局方式以方便用戶UI設計。各種布局方式均為ViewGroup類的子類，結構如圖4.3所示。本節將對FrameLayout（單幀布局）、LinearLayout（線性布局）、AbsoluteLayout（絕對布局）、RelativeLayout（相對布局）和TableLayout（表格布局）進行簡單的介紹。

圖4.3 Android SDK布局方式結構圖

4.3.1 FrameLayout

FrameLayout又稱單幀布局，是Android所提供的布局方式里最簡單的布局方式，它指定屏幕上的一塊空白區域，在該區域填充一個單一對象，例如圖片、文字、按鈕等。應用程序開發人員不能為FrameLayout中填充的組件指定具體填充位置，默認情況下，這些組件都將被固定在屏幕的左上角，后放入的組件會放在前一個組件上進行覆蓋填充，形成部分遮擋或全部遮擋。開發人員可以通過組件的android:layout_gravity屬性對組件位置進行適當的修改。

實例FrameLayoutDemo演示了FrameLayout的布局效果。該布局中共有四個TextView組件，前三個組件以默認方式放置到布局中，第四個組件修改gravity屬性后放置到布局中，運行效果如圖4.4所示。

圖4.4 FrameLayout的布局效果

實例FrameLayoutDemo中的布局文件main.xml的代碼如下：

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
        <TextView
             android:id="@+id/text1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#00ff00"
             android:textSize="100dip"
             android:text="@string/first"/>



    <TextView
             android:id="@+id/text2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#00ffff"
             android:textSize="70dip"
             android:text="@string/second"/>
       <TextView
             android:id="@+id/text3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#ff0000"
             android:textSize="40dip"
             android:text="@string/third"/>
       <TextView
             android:id="@+id/text4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#ffff00"
             android:textSize="40dip"
             android:layout_gravity="bottom"
             android:text="@string/forth"/>
    </FrameLayout>

其中，

    android:layout_width="wrap_content"
             android:layout_height="wrap_content"

表明FrameLayout布局覆蓋了整個屏幕空間。

實例FrameLayoutDemo中的string.xml文件內容如下：

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <string name="app_name">FrameLayoutDemo</string>
       <string name="first">第一層</string>
       <string name="second">第二層</string>
       <string name="third">第三層</string>
       <string name="forth">第四層</string>
    </resources>

從運行后的結果可見，前三個被放置到FrameLayout的TextView組件都是以屏幕左上角為基點進行疊加的。第四個TextView因為設置了android:layout_gravity="bottom"屬性而顯示到了布局的下方。讀者可自行將android:layout_gravity屬性值修改為其他屬性，查看運行效果。

4.3.2 LinearLayout

LinearLayout又稱線性布局，該布局應該是Android視圖設計中最經常使用的布局。該布局可以使放入其中的組件以水平方式或者垂直的方式整齊排列，通過android:orientation屬性指定具體的排列方式，通過weight屬性設置了每個組件在布局中所占的比重。

實例LinearLayoutDemo演示了LinearLayout布局的使用方法，效果如圖4.5所示。

圖4.5 LinearLayout的布局效果

實例LinearLayoutDemo中的strings.xml文件代碼如下：

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
       <string name="app_name">LinearLayoutDemo</string>
       <string name="red">red</string>
       <string name="yellow">yellow</string>
       <string name="green">green</string>
       <string name="blue">blue</string>
       <string name="row1">row one</string>
       <string name="row2">row two</string>
       <string name="row3">row three</string>
       <string name="row4">row four</string>
    </resources>

實例LinearLayoutDemo中的布局文件main.xml代碼如下：

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



     <LinearLayout
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="1">
         <TextView
              android:text="@string/red"
              android:gravity="center_horizontal"
              android:background="#aa0000"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:layout_weight="1"/>
         <TextView
              android:text="@string/green"
              android:gravity="center_horizontal"
              android:background="#00aa00"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:layout_weight="1"/>
         <TextView
              android:text="@string/blue"
              android:gravity="center_horizontal"
              android:background="#0000aa"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:layout_weight="1"/>
         <TextView
              android:text="@string/yellow"
              android:gravity="center_horizontal"
              android:background="#aaaa00"
              android:layout_width="wrap_content"
              android:layout_height="fill_parent"
              android:layout_weight="1"/>
     </LinearLayout>



     <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
       <TextView
            android:text="@string/row1"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
       <TextView
            android:text="@string/row2"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
       <TextView
            android:text="@string/row3"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
       <TextView
            android:text="@string/row4"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
     </LinearLayout>



    </LinearLayout>

該布局中放置了兩個LinearLayout布局對象。第一個LinearLayout布局通過android:orientation="horizontal"屬性將布局設置為橫向線性排列，第二個LinearLayout布局通過android:orientation="vertical"屬性將布局設置為縱向線性排列。每個LinearLayout布局中都放入了四個TextView，并通過android:layout_weight屬性設置每個組件在布局中所占比重相同，即各組件大小相同。layout_weight用于定義一個線性布局中某組件的重要程度。所有的組件都有一個layout_weight值，默認為0，意思是需要顯示多大的視圖就占據多大的屏幕空間。若賦值為大于0的值，則將可用的空間分割，分割的大小取決于當前的layout_weight數值同其他空間的layout_weight值的比率而定，例如水平方向上有兩個按鈕，每個按鈕的layout_weight數值都設置為1，那么這兩個按鈕平分寬度；若第一個為1第二個為2，則可用空間的三分之一分給第一個，三分之二分給第二個。

將LinearLayoutDemo中水平LinearLayout的第四個TextView的android:layout_weight屬性賦值為2，運行效果如圖4.6所示。

圖4.6 修改android:layout_weight屬性

LinearLayout布局可使用嵌套。活用LinearLayout布局，可以設計出各種各樣漂亮的布局方式。

4.3.3 RelativeLayout

RelativeLayout又稱相對布局。從名稱上可以看出，這種布局方式是以一種讓組件以相對于容器或者相對于容器中的另外一個組件的相對位置進行放置的布局方式。

RelativeLayout布局提供了一些常用的布局設置屬性用于確定組件在視圖中的相對位置。相關屬性及其所代表的含義列舉在表4.1中。

表4.1 RelativeLayout布局常用屬性

實例RelativeLayoutDemo演示了相對布局的使用方法，其運行效果如圖4.7所示。

圖4.7 RelativeLayout布局效果

實例RelativeLayoutDemo中的布局文件main.xml代碼如下：

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android="http://schemas.android.com/apk/res/android">



       <TextView
            android:id="@+id/label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello" />



       <EditText
            android:id="@+id/enter"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/label" />



       <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/enter"
            android:text="@string/but1text" />



       <Button
            android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/button1"
            android:layout_alignParentLeft="true"
            android:text="@string/but2text" />



    </RelativeLayout>

該RelativeLayout布局的過程如下：

步驟01 放置了一個id為label的TextView組件。

步驟02 通過android:layout_below="@+id/label"屬性將id為enter的組件EditText放置到了TextView的下面。

步驟03 在布局中加入了一個id為button1的Button，通過android:layout_below="@+id/enter"屬性將該Button放置到enter的下面，通過android:layout_alignParentRight="true"屬性將Button放置到相對布局的右面。

步驟04 在相對布局中加入一個名為ok的Button，通過android:layout_alignBottom="@+id/button1"屬性將該Button底邊與button1對齊，通過android:layout_alignParentLeft="true"屬性將該Button放置到布局的左邊。

4.3.4 TableLayout

TableLayout又稱為表格布局，以行列的方式管理組件。TableLayout布局沒有邊框，可以由多個TableRow對象或者其他組件組成，每個TableRow可以由多個單元格組成，每個單元格是一個View。TableRow不需要設置寬度layout_width和高度layout_height，其寬度一定是match_parent，即自動填滿父容器，高度一定為wrap_content，即根據內容改變高度。但對于TableRow中的其他組件來說，是可以設置寬度和高度的，只是必須是wrap_content或者fill_parent。

實例TableLayoutDemo演示了使用TableLayout制作UI的方法，效果如圖4.8所示。

圖4.8 TableLayout布局效果

實例TableLayoutDemo中strings.xml代碼如下：

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
       <string name="hello">Hello World, TableLayout!</string>
       <string name="app_name">TableLayoutDemo</string>
    <string name="column1">第一行第一列</string>
    <string name="column2">第一行第二列</string>
    <string name="column3">第一行第三列</string>
    <string name="empty">最左面的可伸縮TextView</string>
    <string name="row2column2">第二行第三列</string>
    <string name="row2column3">End</string>
    <string name="merger">合并三個單元格</string>
    </resources>

實例TableLayoutDemo中的布局文件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"  >
       <TableRow>
           <TextView
                android:text="@string/column1" />
           <TextView
                android:text="@string/column2"  />
           <TextView
                android:text="@string/column3" />
       </TableRow>



       <TextView
            android:layout_height="wrap_content"
            android:background="#fff000"
            android:text="單獨的一個TextView"
            android:gravity="center"/>
    <TableRow>
           <Button
                android:text="@string/merger"
                android:layout_span="3"
                android:gravity="center_horizontal"
                android:textColor="#f00"
                 />
       </TableRow>



    <TextView
            android:layout_height="wrap_content"
            android:background="#fa05"
            android:text="單獨的一個TextView"/>
    <TableRow android:layout_height="wrap_content">
        <TextView
             android:text="@string/empty" />
        <Button
             android:text="@string/row2column2" />
         <Button
            android:text="@string/row2column3" />
     </TableRow>
    </TableLayout>

布局文件main.xml在TableLayout布局內添加了兩個TableRow和兩個TextView，形成了如圖4.8所示的效果。從運行效果看，第一行和第五行都沒能完全顯示。TableLayout布局提供幾個特殊屬性，可以實現以下特殊效果。比如：

●android:shrinkColumns屬性：該屬性用于設置可收縮的列。當可收縮的列太寬以至于布局內的其他列不能完全顯示時，可收縮列會縱向延伸，壓縮自己所占空間，以便于其他列可以完全顯示出來。android:shrinkColumns=“1”表示將第2列設置為可收縮列，列數從0開始。

●android:stretchColumns屬性：該屬性用于設置可伸展的列。可伸展列會自動擴展長度以填滿所有可用空間。android:stretchColumns=“1”表示將第2列設置為可伸展列。

●android:collapseColumns屬性：該屬性用于設置隱藏列。android:collapseColumns=“1”表示將第2列隱藏不顯示。

在<TableLayout>標簽添加屬性android:shrinkColumns="0"，再次運行，效果如圖4.9所示，可以看出第一行和第五行都完全顯示出來。

圖4.9 顯示完全的效果

4.3.5 AbsoluteLayout

AbsoluteLayout又稱絕對布局，放入該布局的組件需要通過android:layout_x和android:layout_y兩個屬性指定其準確的坐標值，并顯示在屏幕上。理論上AbsoluteLayout布局可用以完成任何的布局設計，靈活性很大，但是在實際的工程應用中不提倡使用這種布局。因為使用這種布局不但需要精確計算每個組件的大小，增大運算量，而且當應用程序在不同屏幕尺寸的手機上運行時會產生不同效果。

實例AbsoluteLayoutDemo演示了AbsoluteLayout布局的使用方法，效果如圖4.10所示。

圖4.10 AbsoluteLayout布局效果

實例AbsoluteLayoutDemo的布局文件main.xml代碼如下：

    <?xml version="1.0" encoding="utf-8"?>
    <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">



       <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="10px"
            android:layout_y="10px"
            android:text="@string/hello">
       </TextView>



       <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="80px"
            android:layout_y="80px"
            android:text="@string/action">
       </TextView>



       <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="150px"
            android:layout_y="150px"
            android:text="@string/hello">
       </TextView>



    </AbsoluteLayout>

其中，

    android:layout_x="80px"
            android:layout_y="80px"

表示將組件放置到以屏幕左上角為坐標原點的坐標系下，x值為80像素，y值為80像素的位置。

在這里簡單介紹一下Android系統常用的尺寸類型的單位：

●像素：縮寫為px。表示屏幕上的物理像素。

●磅：points，縮寫為pt。1pt等于1英寸的1/72，常用于印刷業。

●放大像素：sp。主要用于字體的顯示，Android默認使用sp作為字號單位

●密度獨立像素：縮寫為dip或dp。該尺寸使用160dp的屏幕作為參考，然后用該屏幕映射到實際屏幕，在不同分辨率的屏幕上會有相應的縮放效果以適用不同的分辨率的屏幕。若用px的話，320px占滿HVGA的寬度，到WVGA上就只能占一半不到的屏幕了，那一定不是你想要的。

●毫米：mm。

4.3.6 WebView

WebView組件是AbsoluteLayout的子類，用于顯示Web頁面。借助于WebView，可以方便地開發自己的網絡瀏覽器。此處僅對WebView的最基本用法進行介紹，在后面進行Web App學習時會有更進一步的講解。

創建Eclipse工程WebViewDemo，為其在AndroidManifest.xml文件中添加Internet訪問權限：

    <uses-permission android:name="android.permission.INTERNET" />

在布局文件main.xml中添加一個WebView組件。Main.xml內容如下：

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



       <WebView
            android:id="@+id/webView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />



    </LinearLayout>

實例WebViewDemo中的Activity文件WebViewDemoActivity.java代碼如下：

    package introduction.android.webView;



    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.WebView;



    public class WebViewDemoActivity extends Activity {
        private WebView webView;



      /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            webView=(WebView)findViewById(R.id.webView1);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.loadUrl("http://www.google.com");
        }
    }

運行效果如圖4.11所示。

圖4.11 WebViewDemo運行界面

官术网_书友最值得收藏!

Android 5從入門到精通