Android教程-Android 五大布局講解與應用

優就業Android教程-Android 五大布局講解與應用

　　Android整體有五大布局：

　　線性佈局(LiearLayout): 屏幕垂直或水平方向佈局。

　　幀佈局(FrameLayout)：控件從屏幕左上角開始佈局。

　　相對佈局(RelativeLayout): 以其餘控件爲參照佈局。

　　絕對佈局(AbsoluteLayout)：以屏幕座標佈局。

　　表格佈局(TableLayout)：按照行列方式佈局。

　　

　　1、LinearLayout

　　線性佈局在開發中使用最多，具備垂直方向與水平方向的佈局方式，經過設置屬性「android:orientation」控制方向，屬性值垂直(vertical)和水平(horizontal)，默認水平方向。

　　在使用orientation時須要注意一個問題，假如咱們使用默認佈局方向，即水平方向，若LinearLayout中存在不止一個控件且都未設置具體寬度，即這樣的佈局代碼：

　　android:layout_width="match_parent"

　　android:layout_height="match_parent">

　　android:layout_width="match_parent"

　　android:layout_height="wrap_content"/>

　　android:layout_width="match_parent"

　　android:layout_height="wrap_content"/>

　　則會出現下面的錯誤：

　　

　　這個錯誤告訴咱們在有多個子控件時須要設置佈局方向或至少設置一個子控件在該佈局方向的大小，咱們能夠顯示設置佈局方向或設置某一個子控件的寬度。

　　除orientation以外還有如下經常使用屬性：

　　android:gravity：內部控件對齊方式，經常使用屬性值有center、center_vertical、 center_horizontal、top、bottom、left、right等。這個屬性在佈局組件RelativeLayout、 TableLayout中也有使用，FrameLayout、AbsoluteLayout則沒有這個屬性。

　　center：居中顯示，這裏並非表示顯示在LinearLayout的中心，當LinearLayout線性方向爲垂直方向 時，center表示水平居中，可是並不能垂直居中，此時等同於center_horizontal的做用;一樣當線性方向爲水平方向時，center表 示垂直居中，等同於center_vertical。

　　top、bottom、left、right顧名思義爲內部控件居頂、低、左、右佈局。

　　這裏要與android:layout_gravity區分開，layout_gravity是用來設置自身相對於父元素的佈局。

　　android:layout_weight：權重，用來分配當前控件在剩餘空間的大小。正常狀況下，值越大佔據高度或寬度越大。例外的狀況， 在LineayLayout佈局中使用這個屬性時須要注意: 當水平方向佈局且子控件的寬度爲fill_parent或match_parent時，值越小佔據寬度越大，垂直方向也同樣。分析一下這種狀況，相似這樣 的代碼：

　　android:orientation="horizontal" android:layout_width="match_parent"

　　android:layout_height="match_parent">

　　android:layout_width="match_parent"

　　android:layout_height="40dp"

　　android:background="#666666"

　　android:text="第一個子控件"

　　android:gravity="center"

　　android:layout_weight="1"/>

　　android:layout_width="match_parent"

　　android:layout_height="40dp"

　　android:background="#EE4000"

　　android:text="第二個子控件"

　　android:gravity="center"

　　android:layout_weight="2"/>

　　顯示效果：

　　

　　這裏出現這種狀況主要是由於match_parent或fill_parent引發的，系統先給第一個子控件分配parent_width(剩 餘空間)，再給第二個分配parent_width，即分配了兩個parent_width，此時剩餘爲parent_width- 2parent_width=-parent_width，這裏主要問題就在這裏，剩餘控件其實已經爲一個負數了。接着，第一個控件佔寬 度：parent_width(當前已有寬度)+權重1/3*(-parent_width)=2/3parent_width;第二個控件佔寬 度：parent_width+權重2/3*(-parent_width)=1/3parent_width，因此當寬度都是match_parent 時，剩餘空間則爲負數，誰的權重大誰就會減去越多。

　　在日常開發中咱們會常常用到這個屬性，經過設置layout_weight能解決不少難以想象的佈局問題。

　　2、FrameLayout

　　幀佈局或叫層佈局，從屏幕左上角按照層次堆疊方式佈局，後面的控件覆蓋前面的控件。該佈局在開發中常常用到，由於是按層次方式佈局，咱們須要實現層面顯示的樣式時就能夠採用這種佈局方式，好比咱們要實現一個相似百度地圖的佈局:

　　

　　經過這張圖咱們能夠看到地圖與操做按鈕是分層顯示的，運用FrameLayout咱們也能夠簡單實現這樣的樣式，代碼以下：

　　<framelayout p="" xmlns:android="http://schemas.android.com/apk/res/android"> </framelayout>

　　android:layout_width="match_parent"

　　android:layout_height="match_parent">

　　android:id="@+id/mapShowView"

　　android:layout_width="fill_parent"

　　android:layout_height="fill_parent"

　　android:clickable="true"/>

　　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="搜地點、查公交、找路線"

　　android:textColorHint="#aaaaaa"

　　android:gravity="left|center_vertical"/>

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

　　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"/>

　　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"/>

　　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"/>

　　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中第一個子控件爲百度地圖，其次爲輸入框、右邊操做按鈕與左下方定位按鈕。咱們能夠看到這裏不少子控件都使用了一個屬 性，layout_gravity，正如前面講解gravity屬性提到的同樣，layout_gravity用來設置自身相對於父元素的佈局，這個屬性 在FrameLayout佈局時會常用到，用來控制控件在佈局中的位置，layout_gravity經常使用屬性值有top、bottom、left、 right、center、center_horizontal、center_vertical，這裏的center可讓控件居於 FrameLayout的中心佈局，屬性值能夠複合使用，好比咱們既要居底部佈局又要垂直居中就能夠這樣設 置:「android:layout_gravity=bottom|center_vertical」。

　　代碼中的操做控件分三個佈局位置，頂部的搜索框、右邊的操做按鈕、左下方的定位按鈕。如下爲這三部分的講解：

　　搜索輸入框，根據FrameLayout的定義，子控件從佈局的左上角開始按照層次堆疊方式佈局，這裏輸入框，咱們須要顯示在屏幕的上方，因此 只須要設置它的上、左、右方向的margin就能夠知足咱們的設計。這裏讓輸入框水平居中顯示的方式是經過設置寬度爲match_parent再設置左右 方向相同的margin就能夠水平居中，固然也能夠經過設置必定的寬度後再設置layout_gravity的屬性值爲 center_horizontal。

　　右邊操做按鈕欄，三個按鈕爲LinearLayout佈局，垂直方向線性佈局，LinearLayout中咱們設置「android :layout_gravity=right」來讓實現靠右佈局，其次設置margin讓控件按照合理的佈局顯示。

　　定位按鈕，這個按鈕顯示在屏幕的左下方，咱們只須要設置「android :layout_gravity=bottom」，再設置方向的margin讓按鈕顯示在合理的位置。

　　3、RelativeLayout

　　相對佈局可讓子控件相對於兄弟控件或父控件進行佈局，能夠設置子控件相對於兄弟控件或父控件進行上下左右對齊。RelativeLayout 能替換一些嵌套視圖，當咱們用LinearLayout來實現一個簡單的佈局但又使用了過多的嵌套時，就能夠考慮使用RelativeLayout從新布 局。

　　RelativeLayout中子控件經常使用屬性：

　　一、相對於父控件，例如：android:layout_alignParentTop=「true」

　　android:layout_alignParentTop 控件的頂部與父控件的頂部對齊;

　　android:layout_alignParentBottom 控件的底部與父控件的底部對齊;

　　android:layout_alignParentLeft 控件的左部與父控件的左部對齊;

　　android:layout_alignParentRight 控件的右部與父控件的右部對齊;

　　二、相對給定Id控件，例如：android:layout_above=「@id/**」

　　android:layout_above 控件的底部置於給定ID的控件之上;

　　android:layout_below 控件的底部置於給定ID的控件之下;

　　android:layout_toLeftOf 控件的右邊緣與給定ID的控件左邊緣對齊;

　　android:layout_toRightOf 控件的左邊緣與給定ID的控件右邊緣對齊;

　　android:layout_alignBaseline 控件的baseline與給定ID的baseline對齊;

　　android:layout_alignTop 控件的頂部邊緣與給定ID的頂部邊緣對齊;

　　android:layout_alignBottom 控件的底部邊緣與給定ID的底部邊緣對齊;

　　android:layout_alignLeft 控件的左邊緣與給定ID的左邊緣對齊;

　　android:layout_alignRight 控件的右邊緣與給定ID的右邊緣對齊;

　　三、居中，例如：android:layout_centerInParent=「true」

　　android:layout_centerHorizontal 水平居中;

　　android:layout_centerVertical 垂直居中;

　　android:layout_centerInParent 父控件的中央;

　　應用實例:

　　android:layout_width="match_parent"

　　android:layout_height="match_parent">

　　android:layout_width="match_parent"

　　android:layout_height="50dp"

　　android:background="@drawable/topbar_bg_border">

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:layout_centerInParent="true"

　　android:text="標題"

　　android:textSize="19sp"

　　android:textStyle="bold"

　　android:textColor="#4e6288"/>

　　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"/>

　　顯示結果：

　　

　　這是一個頂部佈局樣式，在不少app中咱們會考慮使用樣式基本相同的頂部佈局來統一風格。這只是一個簡單的佈局，包含一個Title以及取消按 鈕(這裏用的TextView代替)，相對於其餘幾個佈局控件，RelativeLayout在這裏使用起來更簡單也更合理。首先設置 RelativeLayout的高度，再設置Title的android:layout_centerInParent=」true」顯示在中央，最後設 置取消按鈕的兩個屬性垂直居中android:layout_centerVertical=」true」和右部對齊 android:layout_alignParentRight=」true」。

　　4、AbsoluteLayout

　　絕對佈局也叫座標佈局，指定控件的絕對位置，簡單直接，直觀性強，可是手機屏幕尺寸差異較大，適應性差，Android 1.5已棄用，能夠用RelativeLayout替代。

　　AbsoluteLayout實現佈局代碼：

　　android:layout_width="match_parent" android:layout_height="match_parent">

　　android:layout_width="100dip"

　　android:layout_height="120dip"

　　android:layout_x="150dip"

　　android:layout_y="40dip"

　　android:src="@drawable/android_logo"/>

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:layout_x="100dip"

　　android:layout_y="150dip"

　　android:text="上一張"/>

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:layout_x="200dip"

　　android:layout_y="150dip"

　　android:text="下一張"/>

　　顯示效果：

　　

　　這裏爲了設計一個圖片瀏覽的效果，將各個控件的layout_x與layout_y依次設置了一遍，然而當前屏幕尺寸能正常顯示，其餘屏幕就需 要從新制定佈局。其實用RelativeLayout輕鬆就能實現這樣的效果，還不用考慮屏幕兼容性。 因此，AbsoluteLayout已成爲android佈局中的歷史。

　　5、TableLayout

　　表格佈局繼承自LinearLayout，經過TableRow設置行，列數由TableRow中的子控件決定，直接在TableLayout中添加子控件會佔據整個一行。

　　TableLayout經常使用屬性：

　　android:shrinkColumns：設置可收縮的列，內容過多就收縮顯示到第二行

　　android:stretchColumns：設置可伸展的列，將空白區域填充滿整個列

　　android:collapseColumns：設置要隱藏的列

　　列的索引從0開始，shrinkColumns和stretchColumns能夠同時設置。

　　子控件經常使用屬性：

　　android:layout_column：第幾列

　　android:layout_span：佔據列數

　　TableLayout實例代碼：

　　android:orientation="vertical" android:layout_width="match_parent"

　　android:layout_height="match_parent">

　　android:layout_width="match_parent"

　　android:layout_height="50dp"

　　android:gravity="center">

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:text="首頁"/>

　　android:layout_width="match_parent"

　　android:layout_height="match_parent"

　　android:layout_weight="1"

　　android:gravity="center">

　　android:layout_width="match_parent"

　　android:layout_height="match_parent"

　　android:stretchColumns="0,1,2"

　　android:gravity="center">

　　android:layout_width="100dp"

　　android:layout_height="100dp"

　　android:layout_margin="5dp"

　　android:background="#e2a617"

　　android:text="文件管理"

　　android:gravity="center"/>

　　android:layout_width="100dp"

　　android:layout_height="100dp"

　　android:layout_margin="5dp"

　　android:background="#0d637f"

　　android:text="應用商店"

　　android:gravity="center"/>

　　android:layout_width="100dp"

　　android:layout_height="100dp"

　　android:layout_margin="5dp"

　　android:background="#aa2266"

　　android:text="文件管理"

　　android:gravity="center"/>

　　android:layout_width="100dp"

　　android:layout_height="100dp"

　　android:layout_margin="5dp"

　　android:background="#45e15f"

　　android:text="應用管理"

　　android:gravity="center"/>

　　android:layout_width="200dp"

　　android:layout_height="100dp"

　　android:layout_margin="5dp"

　　android:background="#3924a4"

　　android:text="應用中心"

　　android:gravity="center"

　　android:layout_span="2"/>

　　android:layout_width="match_parent"

　　android:layout_height="55dp"

　　android:background="#f5f5f5"

　　android:stretchColumns="0,1,2,3"

　　android:gravity="center_vertical">

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:gravity="center"

　　android:text="首頁" />

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:gravity="center"

　　android:text="消息" />

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:gravity="center"

　　android:text="發現" />

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:gravity="center"

　　android:text="我" />

　　顯示效果：

　　

　　屏幕中心是一個相似Material佈局，底部是一個頁面切換的導航欄。底部佈局經過設置 android:stretchColumns=」0,1,2,3″來讓四個按鈕一樣大小顯示並填充到整個寬度，中心區域主要使用 android:stretchColumns=」0,1,2″填充顯示以及android:layout_span=」2″控制大內容跨列顯示。

　　佈局在Android界面中至關於建築物的框架，在開發中咱們須要運用多種佈局來實現界面顯示需求，只有瞭解了各類佈局的顯示樣式與它們之間的差距，咱們才能得心應手、合理的佈局界面。