Android五大布局與實(shí)際應(yīng)用詳解
Android總體有五大布局:
- 線性布局(LiearLayout): 屏幕垂直或水平方向布局。
- 幀布局(FrameLayout):控件從屏幕左上角開始布局。
- 相對(duì)布局(RelativeLayout): 以其他控件為參照布局。
- 絕對(duì)布局(AbsoluteLayout):以屏幕坐標(biāo)布局。
- 表格布局(TableLayout):按照行列方式布局。

一、LinearLayout
線性布局在開發(fā)中使用最多,具有垂直方向與水平方向的布局方式,通過設(shè)置屬性“android:orientation”控制方向,屬性值垂直(vertical)和水平(horizontal),默認(rèn)水平方向。
在使用orientation時(shí)需要注意一個(gè)問題,假如我們使用默認(rèn)布局方向,即水平方向,若LinearLayout中存在不止一個(gè)控件且都未設(shè)置具體寬度,即這樣的布局代碼:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
則會(huì)出現(xiàn)下面的錯(cuò)誤:

這個(gè)錯(cuò)誤告訴我們?cè)谟卸鄠€(gè)子控件時(shí)需要設(shè)置布局方向或至少設(shè)置一個(gè)子控件在該布局方向的大小,我們可以顯示設(shè)置布局方向或設(shè)置某一個(gè)子控件的寬度。
除orientation之外還有以下常用屬性:
android:gravity:內(nèi)部控件對(duì)齊方式,常用屬性值有center、center_vertical、center_horizontal、top、bottom、left、right等。這個(gè)屬性在布局組件RelativeLayout、TableLayout中也有使用,F(xiàn)rameLayout、AbsoluteLayout則沒有這個(gè)屬性。
center:居中顯示,這里并不是表示顯示在LinearLayout的中心,當(dāng)LinearLayout線性方向?yàn)榇怪狈较驎r(shí),center表示水平居中,但是并不能垂直居中,此時(shí)等同于center_horizontal的作用;同樣當(dāng)線性方向?yàn)樗椒较驎r(shí),center表示垂直居中,等同于center_vertical。
top、bottom、left、right顧名思義為內(nèi)部控件居頂、低、左、右布局。
這里要與android:layout_gravity區(qū)分開,layout_gravity是用來設(shè)置自身相對(duì)于父元素的布局。
android:layout_weight:權(quán)重,用來分配當(dāng)前控件在剩余空間的大小。正常情況下,值越大占據(jù)高度或?qū)挾仍酱?。例外的情況,在LineayLayout布局中使用這個(gè)屬性時(shí)需要注意: 當(dāng)水平方向布局且子控件的寬度為fill_parent或match_parent時(shí),值越小占據(jù)寬度越大,垂直方向也一樣。分析一下這種情況,類似這樣的代碼:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#666666"
android:text="第一個(gè)子控件"
android:gravity="center"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#EE4000"
android:text="第二個(gè)子控件"
android:gravity="center"
android:layout_weight="2"/>
</LinearLayout>
顯示效果:

這里出現(xiàn)這種情況主要是因?yàn)閙atch_parent或fill_parent引起的,系統(tǒng)先給第一個(gè)子控件分配parent_width(剩余空間),再給第二個(gè)分配parent_width,即分配了兩個(gè)parent_width,此時(shí)剩余為parent_width-2parent_width=-parent_width,這里主要問題就在這里,剩余控件其實(shí)已經(jīng)為一個(gè)負(fù)數(shù)了。接著,第一個(gè)控件占寬度:parent_width(當(dāng)前已有寬度)+權(quán)重1/3*(-parent_width)=2/3parent_width;第二個(gè)控件占寬度:parent_width+權(quán)重2/3*(-parent_width)=1/3parent_width,所以當(dāng)寬度都是match_parent時(shí),剩余空間則為負(fù)數(shù),誰的權(quán)重大誰就會(huì)減去越多。
在平常開發(fā)中我們會(huì)經(jīng)常用到這個(gè)屬性,通過設(shè)置layout_weight能解決很多不可思議的布局問題。
二、FrameLayout
幀布局或叫層布局,從屏幕左上角按照層次堆疊方式布局,后面的控件覆蓋前面的控件。該布局在開發(fā)中經(jīng)常用到,因?yàn)槭前磳哟畏绞讲季郑覀冃枰獙?shí)現(xiàn)層面顯示的樣式時(shí)就可以采用這種布局方式,比如我們要實(shí)現(xiàn)一個(gè)類似百度地圖的布局:

通過這張圖我們可以看到地圖與操作按鈕是分層顯示的,運(yùn)用FrameLayout我們也可以簡單實(shí)現(xiàn)這樣的樣式,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.baidu.mapapi.map.MapView
android:id="@+id/mapShowView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"/>
<EditText
android:layout_width="match_parent"
android:layout_height="40sp"
android:background="@drawable/edit_selector"
android:layout_marginLeft="20sp"
android:layout_marginRight="20sp"
android:layout_marginTop="30dp"
android:paddingLeft="10sp"
android:textSize="14sp"
android:hint="搜地點(diǎn)、查公交、找路線"
android:textColorHint="#aaaaaa"
android:gravity="left|center_vertical"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="right"
android:layout_marginTop="80dp"
android:layout_marginRight="20dp">
<Button
android:id="@+id/traffic"
android:layout_width="45sp"
android:layout_height="45sp"
android:text="路況"
android:textColor="#ffffff"
android:textSize="14sp"
android:background="@drawable/corner_black_bgborder"/>
<Button
android:id="@+id/panorama"
android:layout_width="45sp"
android:layout_height="45sp"
android:text="全景"
android:textColor="#ffffff"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:background="@drawable/corner_black_bgborder"/>
<Button
android:id="@+id/company"
android:layout_width="45sp"
android:layout_height="45sp"
android:text="同行"
android:textColor="#ffffff"
android:textSize="14sp"
android:layout_marginTop="10dp"
android:background="@drawable/corner_black_bgborder"/>
</LinearLayout>
<Button
android:id="@+id/location"
android:layout_width="45sp"
android:layout_height="45sp"
android:layout_gravity="bottom"
android:text="定位"
android:textColor="#ffffff"
android:textSize="14sp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="120dp"
android:background="@drawable/corner_black_bgborder"/>
</FrameLayout>
顯示效果:

FrameLayout中第一個(gè)子控件為百度地圖,其次為輸入框、右邊操作按鈕與左下方定位按鈕。我們可以看到這里很多子控件都使用了一個(gè)屬性,layout_gravity,正如前面講解gravity屬性提到的一樣,layout_gravity用來設(shè)置自身相對(duì)于父元素的布局,這個(gè)屬性在FrameLayout布局時(shí)會(huì)經(jīng)常使用到,用來控制控件在布局中的位置,layout_gravity常用屬性值有top、bottom、left、right、center、center_horizontal、center_vertical,這里的center可以讓控件居于FrameLayout的中心布局,屬性值可以復(fù)合使用,比如我們既要居底部布局又要垂直居中就可以這樣設(shè)置:“android:layout_gravity=bottom|center_vertical”。
代碼中的操作控件分三個(gè)布局位置,頂部的搜索框、右邊的操作按鈕、左下方的定位按鈕。以下為這三部分的講解:
1、搜索輸入框,根據(jù)FrameLayout的定義,子控件從布局的左上角開始按照層次堆疊方式布局,這里輸入框,我們需要顯示在屏幕的上方,所以只需要設(shè)置它的上、左、右方向的margin就可以滿足我們的設(shè)計(jì)。這里讓輸入框水平居中顯示的方式是通過設(shè)置寬度為match_parent再設(shè)置左右方向相同的margin就可以水平居中,當(dāng)然也可以通過設(shè)置一定的寬度后再設(shè)置layout_gravity的屬性值為center_horizontal。
2、右邊操作按鈕欄,三個(gè)按鈕為LinearLayout布局,垂直方向線性布局,LinearLayout中我們?cè)O(shè)置“android :layout_gravity=right”來讓實(shí)現(xiàn)靠右布局,其次設(shè)置margin讓控件按照合理的布局顯示。
3、定位按鈕,這個(gè)按鈕顯示在屏幕的左下方,我們只需要設(shè)置“android :layout_gravity=bottom”,再設(shè)置方向的margin讓按鈕顯示在合理的位置。
三、RelativeLayout
相對(duì)布局可以讓子控件相對(duì)于兄弟控件或父控件進(jìn)行布局,可以設(shè)置子控件相對(duì)于兄弟控件或父控件進(jìn)行上下左右對(duì)齊。RelativeLayout能替換一些嵌套視圖,當(dāng)我們用LinearLayout來實(shí)現(xiàn)一個(gè)簡單的布局但又使用了過多的嵌套時(shí),就可以考慮使用RelativeLayout重新布局。
RelativeLayout中子控件常用屬性:
1、相對(duì)于父控件,例如:android:layout_alignParentTop=“true”
android:layout_alignParentTop 控件的頂部與父控件的頂部對(duì)齊;
android:layout_alignParentBottom 控件的底部與父控件的底部對(duì)齊;
android:layout_alignParentLeft 控件的左部與父控件的左部對(duì)齊;
android:layout_alignParentRight 控件的右部與父控件的右部對(duì)齊;
2、相對(duì)給定Id控件,例如:android:layout_above=“@id/**”
android:layout_above 控件的底部置于給定ID的控件之上;
android:layout_below 控件的底部置于給定ID的控件之下;
android:layout_toLeftOf 控件的右邊緣與給定ID的控件左邊緣對(duì)齊;
android:layout_toRightOf 控件的左邊緣與給定ID的控件右邊緣對(duì)齊;
android:layout_alignBaseline 控件的baseline與給定ID的baseline對(duì)齊;
android:layout_alignTop 控件的頂部邊緣與給定ID的頂部邊緣對(duì)齊;
android:layout_alignBottom 控件的底部邊緣與給定ID的底部邊緣對(duì)齊;
android:layout_alignLeft 控件的左邊緣與給定ID的左邊緣對(duì)齊;
android:layout_alignRight 控件的右邊緣與給定ID的右邊緣對(duì)齊;
3、居中,例如:android:layout_centerInParent=“true”
android:layout_centerHorizontal 水平居中;
android:layout_centerVertical 垂直居中;
android:layout_centerInParent 父控件的中央;
應(yīng)用實(shí)例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/topbar_bg_border">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="標(biāo)題"
android:textSize="19sp"
android:textStyle="bold"
android:textColor="#4e6288"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:text="取消"
android:textSize="18sp"/>
</RelativeLayout>
</LinearLayout>
顯示結(jié)果:

這是一個(gè)頂部布局樣式,在很多app中我們會(huì)考慮使用樣式基本相同的頂部布局來統(tǒng)一風(fēng)格。這只是一個(gè)簡單的布局,包含一個(gè)Title以及取消按鈕(這里用的TextView代替),相對(duì)于其他幾個(gè)布局控件,RelativeLayout在這里使用起來更簡單也更合理。首先設(shè)置RelativeLayout的高度,再設(shè)置Title的android:layout_centerInParent=”true”顯示在中央,最后設(shè)置取消按鈕的兩個(gè)屬性垂直居中android:layout_centerVertical=”true”和右部對(duì)齊android:layout_alignParentRight=”true”。
四、AbsoluteLayout
絕對(duì)布局也叫坐標(biāo)布局,指定控件的絕對(duì)位置,簡單直接,直觀性強(qiáng),但是手機(jī)屏幕尺寸差別較大,適應(yīng)性差,Android 1.5已棄用,可以用RelativeLayout替代。
AbsoluteLayout實(shí)現(xiàn)布局代碼:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="100dip"
android:layout_height="120dip"
android:layout_x="150dip"
android:layout_y="40dip"
android:src="@drawable/android_logo"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="100dip"
android:layout_y="150dip"
android:text="上一張"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="200dip"
android:layout_y="150dip"
android:text="下一張"/>
</AbsoluteLayout>
顯示效果:

這里為了設(shè)計(jì)一個(gè)圖片瀏覽的效果,將各個(gè)控件的layout_x與layout_y依次設(shè)置了一遍,然而當(dāng)前屏幕尺寸能正常顯示,其他屏幕就需要重新制定布局。其實(shí)用RelativeLayout輕松就能實(shí)現(xiàn)這樣的效果,還不用考慮屏幕兼容性。 所以,AbsoluteLayout已成為android布局中的歷史。
五、TableLayout
表格布局繼承自LinearLayout,通過TableRow設(shè)置行,列數(shù)由TableRow中的子控件決定,直接在TableLayout中添加子控件會(huì)占據(jù)整個(gè)一行。
TableLayout常用屬性:
android:shrinkColumns:設(shè)置可收縮的列,內(nèi)容過多就收縮顯示到第二行
android:stretchColumns:設(shè)置可伸展的列,將空白區(qū)域填充滿整個(gè)列
android:collapseColumns:設(shè)置要隱藏的列
列的索引從0開始,shrinkColumns和stretchColumns可以同時(shí)設(shè)置。
子控件常用屬性:
android:layout_column:第幾列
android:layout_span:占據(jù)列數(shù)
TableLayout實(shí)例代碼:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首頁"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="0,1,2"
android:gravity="center">
<TableRow>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#e2a617"
android:text="文件管理"
android:gravity="center"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#0d637f"
android:text="應(yīng)用商店"
android:gravity="center"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#aa2266"
android:text="文件管理"
android:gravity="center"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#45e15f"
android:text="應(yīng)用管理"
android:gravity="center"/>
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#3924a4"
android:text="應(yīng)用中心"
android:gravity="center"
android:layout_span="2"/>
</TableRow>
</TableLayout>
</LinearLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#f5f5f5"
android:stretchColumns="0,1,2,3"
android:gravity="center_vertical">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="首頁" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="消息" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="發(fā)現(xiàn)" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我" />
</TableRow>
</TableLayout>
</LinearLayout>
顯示效果:

屏幕中心是一個(gè)類似Material布局,底部是一個(gè)頁面切換的導(dǎo)航欄。底部布局通過設(shè)置android:stretchColumns=”0,1,2,3″來讓四個(gè)按鈕同樣大小顯示并填充到整個(gè)寬度,中心區(qū)域主要使用android:stretchColumns=”0,1,2″填充顯示以及android:layout_span=”2″控制大內(nèi)容跨列顯示。
布局在Android界面中相當(dāng)于建筑物的框架,在開發(fā)中我們需要運(yùn)用多種布局來實(shí)現(xiàn)界面顯示需求,只有了解了各種布局的顯示樣式與它們之間的差距,我們才能駕輕就熟、合理的布局界面。
- 簡析Android五大布局(LinearLayout、FrameLayout、RelativeLayout等)
- 深入Android 五大布局對(duì)象的應(yīng)用
- Android 自定義ListView示例詳解
- Android listview與adapter詳解及實(shí)例代碼
- Android模擬開關(guān)按鈕點(diǎn)擊打開動(dòng)畫(屬性動(dòng)畫之平移動(dòng)畫)
- android 進(jìn)度條組件ProgressBar
- Android 進(jìn)度條使用詳解及示例代碼
- Android Fragment的生命周期詳解
- Android Fragment概述及用法
- Android使用第三方服務(wù)器Bmob實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼
- Android 五大布局方式詳解
相關(guān)文章
Android UI設(shè)計(jì)系列之自定義EditText實(shí)現(xiàn)帶清除功能的輸入框(3)
這篇文章主要介紹了Android UI設(shè)計(jì)系列之自定義EditText實(shí)現(xiàn)帶清除功能的輸入框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06
Android ListView的OnItemClickListener詳解
這篇文章主要介紹了Android ListView的OnItemClickListener詳解的相關(guān)資料,涉及到OnItemClickListener的position和id參數(shù)做詳細(xì)的解釋的知識(shí)點(diǎn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-07-07
Flutter pageview切換指示器的實(shí)現(xiàn)代碼
這篇文章主要介紹了Flutter pageview切換指示器的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
搭建mac使用Charles抓包安卓app環(huán)境配置過程
這篇文章主要為大家介紹了mac使用Charles抓包,安卓app環(huán)境搭建的配置過程步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-02-02
基于Android引入IjkPlayer無法播放mkv格式視頻的解決方法
下面小編就為大家分享一篇基于Android引入IjkPlayer無法播放mkv格式視頻的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
務(wù)必掌握的Android十六進(jìn)制狀態(tài)管理最佳實(shí)踐
這篇文章主要為大家介紹了務(wù)必掌握的Android十六進(jìn)制狀態(tài)管理最佳實(shí)踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

