- Android 5從入門到精通
- 李波
- 2609字
- 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)行界面
- DB2 V9權(quán)威指南
- Apache ZooKeeper Essentials
- PWA入門與實(shí)踐
- 數(shù)據(jù)庫原理及應(yīng)用(Access版)第3版
- Django開發(fā)從入門到實(shí)踐
- PyTorch Artificial Intelligence Fundamentals
- Blockly創(chuàng)意趣味編程
- PHP網(wǎng)絡(luò)編程學(xué)習(xí)筆記
- 深入淺出DPDK
- Mastering Data Mining with Python:Find patterns hidden in your data
- Microsoft Dynamics AX 2012 R3 Financial Management
- 基于SpringBoot實(shí)現(xiàn):Java分布式中間件開發(fā)入門與實(shí)戰(zhàn)
- Raspberry Pi Robotic Blueprints
- Julia High Performance(Second Edition)
- Access數(shù)據(jù)庫應(yīng)用教程(2010版)