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

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)行界面

主站蜘蛛池模板: 茌平县| 邳州市| 平陆县| 锦屏县| 偏关县| 米脂县| 永济市| 怀来县| 汉阴县| 朔州市| 崇信县| 郑州市| 都匀市| 铁力市| 龙江县| 儋州市| 乌兰县| 禹州市| 莒南县| 林州市| 常熟市| 阿合奇县| 宣威市| 南安市| 安吉县| 河北省| 巍山| 蓝山县| 志丹县| 财经| 依兰县| 桃源县| 山阳县| 建水县| 长治县| 唐山市| 南京市| 栾川县| 宁化县| 嘉义县| 体育|