cq9电子游戏武圣技巧

書名： Android 5從入門到精通
作者名：李波
本章字?jǐn)?shù)： 2609字
更新時(shí)間： 2021-03-19 15:29:02

4.3 布局

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

圖4.3 Android SDK布局方式結(jié)構(gòu)圖

4.3.1 FrameLayout

FrameLayout又稱單幀布局，是Android所提供的布局方式里最簡(jiǎn)單的布局方式，它指定屏幕上的一塊空白區(qū)域，在該區(qū)域填充一個(gè)單一對(duì)象，例如圖片、文字、按鈕等。應(yīng)用程序開發(fā)人員不能為FrameLayout中填充的組件指定具體填充位置，默認(rèn)情況下，這些組件都將被固定在屏幕的左上角，后放入的組件會(huì)放在前一個(gè)組件上進(jìn)行覆蓋填充，形成部分遮擋或全部遮擋。開發(fā)人員可以通過組件的android:layout_gravity屬性對(duì)組件位置進(jìn)行適當(dāng)?shù)男薷摹?/p>

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

圖4.4 FrameLayout的布局效果

實(shí)例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布局覆蓋了整個(gè)屏幕空間。

實(shí)例FrameLayoutDemo中的string.xml文件內(nèi)容如下：

    <?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>

從運(yùn)行后的結(jié)果可見，前三個(gè)被放置到FrameLayout的TextView組件都是以屏幕左上角為基點(diǎn)進(jìn)行疊加的。第四個(gè)TextView因?yàn)樵O(shè)置了android:layout_gravity="bottom"屬性而顯示到了布局的下方。讀者可自行將android:layout_gravity屬性值修改為其他屬性，查看運(yùn)行效果。

4.3.2 LinearLayout

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

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

圖4.5 LinearLayout的布局效果

實(shí)例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>

實(shí)例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>

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

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

圖4.6 修改android:layout_weight屬性

LinearLayout布局可使用嵌套。活用LinearLayout布局，可以設(shè)計(jì)出各種各樣漂亮的布局方式。

4.3.3 RelativeLayout

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

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

表4.1 RelativeLayout布局常用屬性

實(shí)例RelativeLayoutDemo演示了相對(duì)布局的使用方法，其運(yùn)行效果如圖4.7所示。

圖4.7 RelativeLayout布局效果

實(shí)例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 放置了一個(gè)id為label的TextView組件。

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

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

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

4.3.4 TableLayout

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

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

圖4.8 TableLayout布局效果

實(shí)例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">合并三個(gè)單元格</string>
    </resources>

實(shí)例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="單獨(dú)的一個(gè)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="單獨(dú)的一個(gè)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布局內(nèi)添加了兩個(gè)TableRow和兩個(gè)TextView，形成了如圖4.8所示的效果。從運(yùn)行效果看，第一行和第五行都沒能完全顯示。TableLayout布局提供幾個(gè)特殊屬性，可以實(shí)現(xiàn)以下特殊效果。比如：

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

●android:stretchColumns屬性：該屬性用于設(shè)置可伸展的列。可伸展列會(huì)自動(dòng)擴(kuò)展長(zhǎng)度以填滿所有可用空間。android:stretchColumns=“1”表示將第2列設(shè)置為可伸展列。

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

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

圖4.9 顯示完全的效果

4.3.5 AbsoluteLayout

AbsoluteLayout又稱絕對(duì)布局，放入該布局的組件需要通過android:layout_x和android:layout_y兩個(gè)屬性指定其準(zhǔn)確的坐標(biāo)值，并顯示在屏幕上。理論上AbsoluteLayout布局可用以完成任何的布局設(shè)計(jì)，靈活性很大，但是在實(shí)際的工程應(yīng)用中不提倡使用這種布局。因?yàn)槭褂眠@種布局不但需要精確計(jì)算每個(gè)組件的大小，增大運(yùn)算量，而且當(dāng)應(yīng)用程序在不同屏幕尺寸的手機(jī)上運(yùn)行時(shí)會(huì)產(chǎn)生不同效果。

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

圖4.10 AbsoluteLayout布局效果

實(shí)例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"

表示將組件放置到以屏幕左上角為坐標(biāo)原點(diǎn)的坐標(biāo)系下，x值為80像素，y值為80像素的位置。

在這里簡(jiǎn)單介紹一下Android系統(tǒng)常用的尺寸類型的單位：

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

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

●放大像素：sp。主要用于字體的顯示，Android默認(rèn)使用sp作為字號(hào)單位

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

●毫米：mm。

4.3.6 WebView

WebView組件是AbsoluteLayout的子類，用于顯示W(wǎng)eb頁面。借助于WebView，可以方便地開發(fā)自己的網(wǎng)絡(luò)瀏覽器。此處僅對(duì)WebView的最基本用法進(jìn)行介紹，在后面進(jìn)行Web App學(xué)習(xí)時(shí)會(huì)有更進(jìn)一步的講解。

創(chuàng)建Eclipse工程WebViewDemo，為其在AndroidManifest.xml文件中添加Internet訪問權(quán)限：

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

在布局文件main.xml中添加一個(gè)WebView組件。Main.xml內(nèi)容如下：

    <?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>

實(shí)例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");
        }
    }

運(yùn)行效果如圖4.11所示。

圖4.11 WebViewDemo運(yùn)行界面

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

Android 5從入門到精通