快捷導(dǎo)航

Android開(kāi)發(fā)-之五大布局詳解

更新時(shí)間：2016年11月22日 08:36:23 作者：易小怪獸_iKing

這篇文章主要介紹了Android開(kāi)發(fā)-之五大布局詳解,現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在html中大家都知道布局是什么意思了，簡(jiǎn)單來(lái)說(shuō)就是將頁(yè)面劃分模塊，比如html中的div、table等。那么Android中也是這樣的。Android五大布局讓界面更加美化，開(kāi)發(fā)起來(lái)也更加方便。當(dāng)然布局方式不一樣應(yīng)用的地方也不一樣，當(dāng)然了有的布局方式也是可以相互轉(zhuǎn)換和嵌套使用的。它們都各有各的優(yōu)缺點(diǎn)，具體頁(yè)面要怎么布局還是得看開(kāi)發(fā)需求，但是用的最多的還是相對(duì)布局、線(xiàn)性布局以及相對(duì)布局和線(xiàn)性布局的嵌套使用。當(dāng)然，我說(shuō)的是安卓，并沒(méi)有指定是安卓手機(jī)，比如平板、智能家居（電視...）很多都是Android系統(tǒng)。那么下面我們就具體來(lái)講Android開(kāi)發(fā)中的五大布局，我以一個(gè)簡(jiǎn)單的撥號(hào)器為例。

一、Android五大布局分類(lèi)

1、相對(duì)布局

2、絕對(duì)布局

3、線(xiàn)性布局

4、表格布局

5、幀布局

二、具體布局的使用

1、相對(duì)布局（RelativeLayout）

在我們創(chuàng)建Android項(xiàng)目時(shí)，默認(rèn)的activity_main.xml這個(gè)文件默認(rèn)的布局方式就是RelativeLayout相對(duì)布局。那么相對(duì)布局就是按照各子元素之間的位置關(guān)系完成布局。在此布局中的子元素里與位置相關(guān)的屬性將生效?？梢赃@樣理解：在安卓屏幕中的父元素就是整個(gè)屏幕，而子元素就是那些按鈕、文本框之類(lèi)的東西。

相對(duì)布局是Android布局中最為常用的布局之一，也是最強(qiáng)大的布局：

1）它可以設(shè)置的屬性非常的多

2）可以做的事情最多

3）安卓屏幕的分辨率大小不一，所以想到屏幕的自適應(yīng)性，開(kāi)發(fā)中建議大家去使用相對(duì)布局。

4）相對(duì)于元素來(lái)說(shuō)，比較容易定位

a、以下是相對(duì)布局的XML代碼

<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.example.fivelayout.MainActivity" >
  
  

  <!-- 默認(rèn)RelativeLayout相對(duì)布局 -->
  
    <TextView 
      android:id="@+id/tv_number"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="請(qǐng)輸入電話(huà)號(hào)碼："
      />
    
    <EditText 
      android:id="@+id/et_number"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="輸入電話(huà)號(hào)碼"
      android:layout_below="@id/tv_number"
      />
    
    <Button 
      android:id="@+id/btn_call"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="call"
      android:layout_below="@id/et_number"
      
      />
    
    <Button 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="call"
      android:layout_below="@id/et_number"
      android:layout_toRightOf="@id/btn_call"
      />
    
  

</RelativeLayout>

b、部分標(biāo)簽屬性說(shuō)明

　　TextView：顯示的文本內(nèi)容
　　EditText：類(lèi)似輸入框
　　android:id：給元素指定一個(gè)唯一ID標(biāo)識(shí)
　　android:text：顯示的文本內(nèi)容
　　android:layout_below：相對(duì)于上邊子元素的下面
　　android:layout_toRightOf：相對(duì)于左邊子元素的右邊
　　android:layout_width：子元素的橫向填充方式
　　android:layout_width：子元素的縱向填充方式

c、效果

2、絕對(duì)布局

在這里打一個(gè)比方：我們手機(jī)斗地主，三個(gè)玩家的位置是固定在三個(gè)角落的，那么用相對(duì)布局就不容易實(shí)現(xiàn)。那么我們就可以用絕對(duì)布局（AbsoluteLayout）就比較容易去實(shí)現(xiàn)這個(gè)功能。

但是在實(shí)際開(kāi)發(fā)中：

1）通常不采用此布局格式

2）它的界面代碼過(guò)于剛性

3）有可能不能很好的適配各種終端

所以絕對(duì)布局的方式已經(jīng)被Google公司的Android開(kāi)發(fā)團(tuán)隊(duì)舍棄了。在此布局中的子元素的android:layout_x和android:layout_y屬性將生效，用于描述該子元素的坐標(biāo)位置。屏幕左上角為坐標(biāo)原點(diǎn)（0,0），第一個(gè)0代表橫坐標(biāo)，向右移動(dòng)此值增大，第二個(gè)0代表縱坐標(biāo)，向下移動(dòng)，此值增大。在此布局中的子元素可以相互重疊。

a、一下是絕對(duì)布局的xml實(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" >
  
  <!-- 絕對(duì)布局AbsoluteLayout -->

  <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="22dp"
    android:layout_y="33dp"
    android:text="Button" />

  <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="141dp"
    android:layout_y="103dp"
    android:text="Button" />
  
</AbsoluteLayout>

b、部分標(biāo)簽屬性說(shuō)明：

　　android:layout_x：絕對(duì)于屏幕左上角的角落橫向的距離
　　android:layout_y：絕對(duì)于屏幕左上角的角落縱向的距離

c、效果

3、線(xiàn)性布局（LinearLayout）

線(xiàn)性布局就好像我們串羊肉串一樣，是一條直線(xiàn)連接起來(lái)的。這里呢又分為橫向和縱向。

線(xiàn)性布局按照垂直或者水平的順序依次排列子元素，每一個(gè)子元素都位于前一個(gè)元素之后。

1）垂直排列，那么將是一個(gè)N行單列的結(jié)構(gòu)，每一行只會(huì)有一個(gè)元素，而不論這個(gè)元素的寬度為多少；

2）水平排列，那么將是一個(gè)單行N列的結(jié)構(gòu)。

3）搭建兩行兩列的結(jié)構(gòu)，通常的方式是先垂直排列兩個(gè)元素，每一個(gè)元素里再包含一個(gè)LinearLayout進(jìn)行水平排列

也就是說(shuō)縱向和橫向還是可以相互嵌套使用的哦，可以實(shí)現(xiàn)表格布局的效果。

a、以下是線(xiàn)性布局的XML實(shí)現(xiàn)代碼

<?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"
  android:orientation="vertical" >
  
  <!-- 線(xiàn)性布局LinearLayout -->
  
  <TextView 
    android:id="@+id/tv_number"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="10dp"
    android:textSize="18sp"
    android:text="請(qǐng)輸入電話(huà)號(hào)碼："    
    />
  
  <EditText 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:hint="請(qǐng)輸入電話(huà)號(hào)碼"
    />
  
  <Button 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="撥打"
    />

</LinearLayout>

b、部分標(biāo)簽屬性說(shuō)明

　　android:layout_marginLeft：標(biāo)簽外部離屏幕的左邊距
　　android:layout_marginTop：標(biāo)簽外部離屏幕的上邊距
　　android:textSize：字體顯示的大小注意：?jiǎn)挝皇莝p

c、效果

4、表格布局

相比大家對(duì)于表格都有很大的了解，比如我們常用到的Excel表格，再比如我們html中用到的table標(biāo)簽，其實(shí)在Android中的表格布局也是類(lèi)似的，所以當(dāng)需要像表格一樣布　局，那么推薦使用表格布局

表格布局適用于多行多列的布局格式。一個(gè)TableLayout由許多TableRow組成，一個(gè)TableRow就代表TableLayout中的一行。

1）TableRow是LinearLayout的子類(lèi)，ablelLayout并不需要明確地聲明包含多少行、多少列，而是通過(guò)TableRow，以及其他組件來(lái)控制表格的行數(shù)和列數(shù)，

2）TableRow就好比是table中的tr，它是一個(gè)容器，因此可以向TableRow里面添加其他組件也就是我們常說(shuō)的標(biāo)簽屬性，每添加一個(gè)組件該表格就增加一列。如果想TableLayout里面添加組件，那么該組件就直接占用一行。

3）在表格布局中，列的寬度由該列中最寬的單元格決定，整個(gè)表格布局的寬度取決于父容器的寬度，默認(rèn)是占滿(mǎn)父容器本身的，這里的父容器就相當(dāng)于我們的整個(gè)屏幕。

a、一下是表格布局的xml實(shí)現(xiàn)代碼

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
  
  <!-- 表格布局tablelayout -->
  <!-- tablerow代表一行，行里面有多少個(gè)標(biāo)簽內(nèi)容就代表多少列 -->
  <TableRow 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="1行1列"
      android:textSize="18sp"
      />
    
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="1行2列"
      android:textSize="18sp"
      android:layout_marginLeft="20dp"
      />
    
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="1行3列"
      android:textSize="18sp"
      android:layout_marginLeft="20dp"
      />
    
  </TableRow>
    
  <TableRow 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">
    
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="2行1列"
      android:textSize="18sp"
      />
    
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="2行2列"
      android:textSize="18sp"
      android:layout_marginLeft="20dp"
      />
 
   </TableRow>
  
</TableLayout>

b、部分標(biāo)簽屬性說(shuō)明

TableRow：行

c、效果
　

5、幀布局（框架布局）

幀布局有的地方也稱(chēng)之為框架布局，是最簡(jiǎn)單的布局形式，所以在實(shí)際開(kāi)發(fā)中用得比較少。所有添加到這個(gè)布局中的視圖都以層疊的方式顯示。第一個(gè)添加的控件被放在最底層，最后一個(gè)添加到框架布局中的視圖顯示在最頂層，上一層的控件會(huì)覆蓋下一層的控件。這種顯示方式有些類(lèi)似于堆棧。

a、以下是幀布局xml的實(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" >
  
  <!-- 幀布局FrameLayout -->
  
  <TextView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="幀布局..."
    />
  
  <Button 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="點(diǎn)擊"
    />

</FrameLayout>

b、部分標(biāo)簽說(shuō)明

發(fā)現(xiàn)這里沒(méi)有啥標(biāo)簽好說(shuō)明噠~~哈哈哈，那我就當(dāng)做是已經(jīng)省略了……

c、效果

PS:以上的效果也許大家看得不是很理解，那么久需要大家自己去實(shí)踐啦，把那些標(biāo)簽一個(gè)一個(gè)的去調(diào)試看一下~最后才會(huì)發(fā)現(xiàn)原來(lái)效果相差這么大，對(duì)就是這么大~~~