一.基本理論
Android六大基本布局分別是:線性布局LinearLayout、表格布局TableLayout、相對布局RelativeLayout、
層布局FrameLayout、絕對布局AbsoluteLayout、網格布局GridLayout。
其中,表格布局是線性布局的子類。網格布局是android 4.0后新增的布局。
在手機程序設計中,絕對布局基本上不用,用得相對較多的是線性布局和相對布局。
學習基本布局要理解兩個比較基礎概念的圖:
(一)Android布局管理器的類圖
上面這個類圖只是說了六大基本布局的關系,其實ViewGroup還有其他一些布局管理器。
這里要理解一點就是布局也是布局管理器,因為布局里面還可以添加布局。
(二)Android布局的XML關系圖
布局管理器里面既可以添加多個布局管理器又可以添加多個控件,而控件里面不能在添加布局或控件了。
二.各個布局的使用
(一)線性布局
線性布局在開發中使用最多,具有垂直方向與水平方向的布局方式,通過設置屬性“android:orientation”控制方向,屬性值垂直(vertical)和水平(horizontal),默認水平方向。
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:權重,用來分配當前控件在剩余空間的大小。
使用權重一般要把分配該權重方向的長度設置為零,比如在水平方向分配權重,就把width設置為零。
示例:多功能計算機的設計
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#1000" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="20dp"
android:text="0"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="MC" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="←" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="7" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="4" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="MR" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="CE" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="8" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="5" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="2" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="0" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="MS" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="C" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="9" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="6" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="." />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="M+" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="±" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="/" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="*" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="-" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="M-" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="√" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="%" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="1/x" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="=" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
運行結果圖:
(二)RelativeLayout
相對布局可以讓子控件相對於兄弟控件或父控件進行布局,可以設置子控件相對於兄弟控件或父控件進行上下左右對齊。
RelativeLayout能替換一些嵌套視圖,當我們用LinearLayout來實現一個簡單的布局但又使用了過多的嵌套時,就可以考慮使用RelativeLayout重新布局。
相對布局就是一定要加Id才能管理。
RelativeLayout中子控件常用屬性:
1、相對於父控件,例如:android:layout_alignParentTop=“true”
android:layout_alignParentTop 控件的頂部與父控件的頂部對齊;
android:layout_alignParentBottom 控件的底部與父控件的底部對齊;
android:layout_alignParentLeft 控件的左部與父控件的左部對齊;
android:layout_alignParentRight 控件的右部與父控件的右部對齊;
2、相對給定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的右邊緣對齊;
3、居中,例如:android:layout_centerInParent=“true”
android:layout_centerHorizontal 水平居中;
android:layout_centerVertical 垂直居中;
android:layout_centerInParent 父控件的中央;
使用示例:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.xykj.layout.MainActivity" >
<TextView
android:id="@+id/main_tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#55ff0000"
android:gravity="center"
android:text="相對布局的使用" />
<!--
android:layout_alignParentBottom="true"位於父框架的底部
android:layout_centerHorizontal="true"在父框架中水平居中
android:layout_centerVertical="true"在父框架中垂直居中
這兩個要區分,一個是邊界對齊,一個是位於哪個方位
android:layout_below="@+id/main_tv_title"位於對應文件的下邊
android:layout_alignRight="@+id/main_tv_title"和對應文件右對齊 -->
<TextView
android:id="@+id/main_tv_title2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/main_tv_title"
android:layout_below="@+id/main_tv_title"
android:background="#5500ff00"
android:text="二級標題" />
<TextView
android:id="@+id/main_tv_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="中間"
android:textSize="22sp"
android:layout_margin="30dp" />
<TextView
android:id="@+id/main_tv_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/main_tv_center"
android:layout_alignRight="@id/main_tv_center"
android:text="上面"
android:textSize="22sp" />
<TextView
android:id="@+id/main_tv_dowm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/main_tv_center"
android:layout_below="@id/main_tv_center"
android:text="下面"
android:textSize="22sp" />
<TextView
android:id="@+id/main_tv_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/main_tv_center"
android:text="左邊"
android:layout_alignTop="@id/main_tv_center"
android:textSize="22sp" />
<TextView
android:id="@+id/main_tv_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/main_tv_center"
android:layout_alignTop="@id/main_tv_center"
android:text="上面"
android:textSize="22sp" />
</RelativeLayout>
效果圖:
(三)FrameLayout
幀布局或叫層布局,從屏幕左上角按照層次堆疊方式布局,后面的控件覆蓋前面的控件。
該布局在開發中設計地圖經常用到,因為是按層次方式布局,我們需要實現層面顯示的樣式時就可以
采用這種布局方式,比如我們要實現一個類似百度地圖的布局,我們移動的標志是在一個圖層的上面。
在普通功能的軟件設計中用得也不多。層布局主要應用就是地圖方面。
使用示例:
<?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" >
<TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#f00"
android:layout_gravity="center"
/>
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#0f0"
android:layout_gravity="center"
/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#00f"
android:layout_gravity="center"
/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#fff"
android:layout_gravity="center"
/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#000"
android:layout_gravity="center"
/>
</FrameLayout>
效果圖:
(四)AbsoluteLayout
絕對布局中將所有的子元素通過設置android:layout_x 和 android:layout_y屬性,將子元素的坐標位置固定下來,即坐標(android:layout_x, android:layout_y) ,layout_x用來表示橫坐標,layout_y用來表示縱坐標。屏幕左上角為坐標(0,0),橫向往右為正方,縱向往下為正方。實際應用中,這種布局用的比較少,因為Android終端一般機型比較多,各自的屏幕大小。分辨率等可能都不一樣,如果用絕對布局,可能導致在有的終端上顯示不全等。
使用示例:
<?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" >
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_x="20dp"
android:layout_y="20dp"
android:text="用戶名:"
/>
<EditText
android:layout_height="wrap_content"
android:layout_width="200dp"
android:layout_x="80dp"
android:layout_y="7dp"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_x="20dp"
android:layout_y="80dp"
android:text="密 碼:"
/>
<EditText
android:layout_height="wrap_content"
android:layout_width="200dp"
android:layout_x="80dp"
android:layout_y="60dp"
/>
<Button
android:layout_height="50dp"
android:layout_width="100dp"
android:layout_x="90dp"
android:layout_y="120dp"
android:text="提交"
/>
</AbsoluteLayout>
效果圖:
(五)TableLayout
表格布局,適用於多行多列的布局格式,每個TableLayout是由多個TableRow組成,一個TableRow就表示TableLayout中的每一行,這一行可以由多個子元素組成。實際上TableLayout和TableRow都是LineLayout線性布局的子類。但是TableRow的參數android:orientation屬性值固定為horizontal,且android:layout_width=MATCH_PARENT,android:layout_height=WRAP_CONTENT。所以TableRow實際是一個橫向的線性布局,且所以子元素寬度和高度一致。
注意:在TableLayout中,單元格可以為空,但是不能跨列,意思是只能不能有相鄰的單元格為空。
TableLayout常用屬性:
android:shrinkColumns:設置可收縮的列,內容過多就收縮顯示到第二行
android:stretchColumns:設置可伸展的列,將空白區域填充滿整個列
android:collapseColumns:設置要隱藏的列
列的索引從0開始,shrinkColumns和stretchColumns可以同時設置。
子控件常用屬性:
android:layout_column:第幾列
android:layout_span:占據列數
使用示例:
<?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="應用商店"
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="應用管理"
android:gravity="center"/>
<TextView
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:background="#3924a4"
android:text="應用中心"
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="發現" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我" />
</TableRow>
</TableLayout>
</LinearLayout>
效果圖:
屏幕中心是一個類似Material布局,底部是一個頁面切換的導航欄。底部布局通過設置android:stretchColumns=”0,1,2,3″來讓四個按鈕同樣大小顯示並填充到整個寬度,中心區域主要使用android:stretchColumns=”0,1,2″填充顯示以及android:layout_span=”2″控制大內容跨列顯示。
(六)GridLayout(網格布局)
作為android 4.0 后新增的一個布局,與前面介紹過的TableLayout(表格布局)其實有點大同小異;
不過新增了一些東東
①跟LinearLayout(線性布局)一樣,他可以設置容器中組件的對齊方式
②容器中的組件可以跨多行也可以跨多列(相比TableLayout直接放組件,占一行相比較)
因為是android 4.0新增的,API Level 14,在這個版本以前的sdk都需要導入項目。這里不解釋。
常用屬性:
排列對齊:
①設置組件的排列方式: android:orientation="" vertical(豎直,默認)或者horizontal(水平)
②設置組件的對齊方式: android:layout_gravity="" center,left,right,buttom
設置布局為幾行幾列:
①設置有多少行: android:rowCount="4" //設置網格布局有4行
②設置有多少列: android:columnCount="4" //設置網格布局有4列
設置某個組件位於幾行幾列
注:都是從0開始算的哦!
①組件在第幾行: android:layout_row = "1" //設置組件位於第二行
②組件在第幾列: android:layout_column = "2" //設置該組件位於第三列
設置某個組件橫跨幾行幾列:
①橫跨幾行: android:layout_rowSpan = "2" //縱向橫跨2行
②橫跨幾列: android:layout_columnSpan = "3" //橫向橫跨2列
使用示例:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="6" >
<TextView
android:layout_columnSpan="4"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="0"
android:textSize="50sp" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="回退" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="清空" />
<Button android:text="+" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="-" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="*" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button android:text="/" />
<Button
android:layout_width="wrap_content"
android:text="." />
<Button android:text="0" />
<Button android:text="=" />
</GridLayout>
效果圖:
這里要說明一點:
通過android:layout_rowSpan和android:layout_columnSpan設置表明組件橫越的行數與列數
再通過:android:layout_gravity = "fill" 設置表明組件填滿所橫越的整行或者整列
用法總結:
①GridLayout使用虛細線將布局划分為行,列和單元格,同時也支持在行,列上進行交錯排列
②使用流程:
step 1:先定義組件的對其方式 android:orientation 水平或者豎直
step 2:設置組件所在的行或者列,記得是從0開始算的
step 3:設置組件橫跨幾行或者幾列;設置完畢后,需要在設置一個填充:android:layout_gravity = "fill"
可能遇到的問題:
當讀者將布局設置為GridLayout時,會出現 莫名其妙的報錯,
如果代碼語法邏輯沒有錯的話,就可能是配置文件 AndroidManifest.xml 的問題了
因為GridLayout是android 4.0 后才推出的,API Level 為 14
只需要將配置文件中的 MinSDK改成14或者以上版本 即可,保存,問題就解決了!
除上面講過之外常用的幾個布局的屬性:
(1)layout_margin
用於設置控件邊緣相對於父控件的邊距
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom
(2) layout_padding
用於設置控件內容相對於控件邊緣的邊距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom
(3) layout_width/height
用於設置控件的高度和寬度
wrap_content 內容包裹,表示這個控件的里面文字大小填充
fill_parent 跟隨父窗口
match_parent
(4) gravity
用於設置View組件里面內容的對齊方式
top bottom left right center等
(5) android:layout_gravity
用於設置Container組件的對齊方式
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊
參考轉載:http://blog.csdn.net/wenzhi20102321/article/details/52677595
