快捷導(dǎo)航

Android 五大布局方式詳解

更新時(shí)間：2016年09月05日 10:56:52 作者：lingdududu

本文主要介紹Android 五大布局的知識(shí)資料，這里整理了詳細(xì)的布局資料及實(shí)現(xiàn)示例代碼，和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下

Android中常用的5大布局方式有以下幾種：

線(xiàn)性布局（LinearLayout）：按照垂直或者水平方向布局的組件。
幀布局（FrameLayout）：組件從屏幕左上方布局組件。
表格布局（TableLayout）：按照行列方式布局組件。
相對(duì)布局（RelativeLayout）：相對(duì)其它組件的布局方式。
絕對(duì)布局（AbsoluteLayout）：按照絕對(duì)坐標(biāo)來(lái)布局組件。

1. 線(xiàn)性布局

線(xiàn)性布局是Android開(kāi)發(fā)中最常見(jiàn)的一種布局方式，它是按照垂直或者水平方向來(lái)布局，通過(guò)“android:orientation”屬性可以設(shè)置線(xiàn)性布局的方向。屬性值有垂直（vertical）和水平（horizontal）兩種。

常用的屬性：

android:orientation：可以設(shè)置布局的方向
android:gravity:用來(lái)控制組件的對(duì)齊方式
layout_weight：控制各個(gè)組件在布局中的相對(duì)大小

第一個(gè)實(shí)例

①效果圖：

②核心代碼如下：

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:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:orientation="vertical" 
 > 
 <EditText 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  /> 
 </LinearLayout> 
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:orientation="horizontal" 
 android:gravity="right" 
 > 
 <!-- android:gravity="right"表示Button組件向右對(duì)齊 --> 
 <Button 
  android:layout_height="wrap_content" 
  android:layout_width="wrap_content" 
  android:text="確定" 
  /> 
 <Button 
  android:layout_height="wrap_content" 
  android:layout_width="wrap_content" 
  android:text="取消" 
  /> 
 </LinearLayout> 
</LinearLayout>

第二個(gè)實(shí)例

①效果圖：

②核心代碼：

mian.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="red" 
 android:gravity="center_horizontal" 
 android:background="#aa0000" 
 android:layout_width="wrap_content" 
 android:layout_height="fill_parent" 
 android:layout_weight="1" 
 /> 
 <!--android:gravity="center_horizontal"水平居中 --> 
 <!--layout_weight屬性以控制各個(gè)控件在布局中的相對(duì)大小。layout_weight屬性是一個(gè)非負(fù)整數(shù)值。 
  線(xiàn)性布局會(huì)根據(jù)該控件layout_weight值與其所處布局中所有控件layout_weight值之和的比值為該控件分配占用的區(qū)域。 
 例如，在水平布局的LinearLayout中有兩個(gè)Button，這兩個(gè)Button的layout_weight屬性值都為1， 
 那么這兩個(gè)按鈕都會(huì)被拉伸到整個(gè)屏幕寬度的一半。如果layout_weight指為0，控件會(huì)按原大小顯示，不會(huì)被拉伸； 
 對(duì)于其余l(xiāng)ayout_weight屬性值大于0的控件，系統(tǒng)將會(huì)減去layout_weight屬性值為0的控件的寬度或者高度， 
 再用剩余的寬度或高度按相應(yīng)的比例來(lái)分配每一個(gè)控件顯示的寬度或高度--> 
 <TextView 
 android:text="Teal" 
 android:gravity="center_horizontal" 
 android:background="#008080" 
 android:layout_width="wrap_content" 
 android:layout_height="fill_parent" 
 android:layout_weight="1"/> 
 
 <TextView 
 android:text="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="orange" 
 android:gravity="center_horizontal" 
 android:background="#FFA500" 
 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="row one" 
 android:textSize="15pt" 
 android:background="#aa0000" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1" 
 /> 
 <!-- --> 
 <TextView 
 android:text="row two" 
 android:textSize="15pt" 
 android:background="#DDA0DD" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1" 
 /> 
 
 <TextView 
 android:text="row three" 
 android:textSize="15pt" 
 android:background="#008080" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1" 
 /> 
 <TextView 
 android:text="row four" 
 android:textSize="15pt" 
 android:background="#FFA500" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1" 
 /> 
 </LinearLayout> 
</LinearLayout>

2. 幀布局

幀布局是從屏幕的左上角（0,0）坐標(biāo)開(kāi)始布局，多個(gè)組件層疊排列，第一個(gè)添加的組件放到最底層，最后添加到框架中的視圖顯示在最上面。上一層的會(huì)覆蓋下一層的控件。

簡(jiǎn)單的例子

①效果圖：

② 核心代碼：

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:layout_width="300dp" 
 android:layout_height="300dp" 
 android:background="#00BFFF"  
 /> 
 <TextView 
 android:layout_width="260dp" 
 android:layout_height="260dp" 
 android:background="#FFC0CB"  
 /> 
 <TextView 
 android:layout_width="220dp" 
 android:layout_height="220dp" 
 android:background="#0000FF"  
 /> 
</FrameLayout>

3.表格布局

表格布局是一個(gè)ViewGroup以表格顯示它的子視圖（view）元素，即行和列標(biāo)識(shí)一個(gè)視圖的位置。

表格布局常用的屬性如下：

android:collapseColumns：隱藏指定的列
android:shrinkColumns：收縮指定的列以適合屏幕，不會(huì)擠出屏幕
android:stretchColumns：盡量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:該控件所跨越的列數(shù)

簡(jiǎn)單的列子：

①效果圖：

② 核心代碼：

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> 
 <Button 
  android:text="Button1" 
  /> 
 <Button 
  android:text="Button2" 
  /> 
 <Button 
  android:text="Button3" 
  /> 
 </TableRow> 
 <TableRow> 
 <Button 
  android:text="Button4" 
  /> 
 <Button 
  android:layout_span="2" 
  android:text="Button5" 
  /> 
 </TableRow> 
 
</TableLayout>

4.相對(duì)布局

相對(duì)布局是按照組件之間的相對(duì)位置來(lái)布局，比如在某個(gè)組件的左邊，右邊，上面和下面等。

相對(duì)布局常用屬性請(qǐng)參考我博客的：http://m.fzitv.net/article/47434.htm

簡(jiǎn)單的例子

①效果圖：

② 核心代碼：

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="wrap_content" 
 android:padding="10px" 
 > 
 <TextView 
 android:id="@+id/tev1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginBottom="30dp" 
 android:text="Please Type Here:" 
 /> 
 <EditText 
 android:id="@+id/tx1" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_below="@id/tev1" 
 /> 
 <Button 
 android:id="@+id/btn1" 
 android:layout_height="wrap_content" 
 android:layout_width="wrap_content" 
 android:layout_below="@id/tx1" 
 android:layout_alignParentRight="true" 
 android:text="確定" 
 /> 
 <Button 
 android:id="@+id/btn2" 
 android:layout_height="wrap_content" 
 android:layout_width="wrap_content" 
 android:layout_below="@id/tx1" 
 android:layout_toLeftOf="@id/btn1" 
 android:layout_marginRight="30dp" 
 android:text="取消" 
 /> 
</RelativeLayout>

5. 絕對(duì)布局

絕對(duì)布局通過(guò)指定子組件的確切X,Y坐標(biāo)來(lái)確定組件的位置，在A(yíng)ndroid2.0 API文檔中標(biāo)明該類(lèi)已經(jīng)過(guò)期，可以使用FrameLayout或者RelativeLayout來(lái)代替。所以這里不再詳細(xì)介紹。

以上就是對(duì) Android 五大布局的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: