快捷導(dǎo)航

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

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

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

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

一、Android五大布局分類

1、相對布局

2、絕對布局

3、線性布局

4、表格布局

5、幀布局

二、具體布局的使用

1、相對布局（RelativeLayout）

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

相對布局是Android布局中最為常用的布局之一，也是最強大的布局：

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

2）可以做的事情最多

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

4）相對于元素來說，比較容易定位

a、以下是相對布局的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" >
  
  

  <!-- 默認RelativeLayout相對布局 -->
  
    <TextView 
      android:id="@+id/tv_number"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="請輸入電話號碼："
      />
    
    <EditText 
      android:id="@+id/et_number"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="輸入電話號碼"
      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、部分標簽屬性說明

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

c、效果

2、絕對布局

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

但是在實際開發(fā)中：

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

2）它的界面代碼過于剛性

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

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

a、一下是絕對布局的xml實現(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" >
  
  <!-- 絕對布局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、部分標簽屬性說明：

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

c、效果

3、線性布局（LinearLayout）

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

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

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

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

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

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

a、以下是線性布局的XML實現(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" >
  
  <!-- 線性布局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="請輸入電話號碼："    
    />
  
  <EditText 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:hint="請輸入電話號碼"
    />
  
  <Button 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="撥打"
    />

</LinearLayout>

b、部分標簽屬性說明

　　android:layout_marginLeft：標簽外部離屏幕的左邊距
　　android:layout_marginTop：標簽外部離屏幕的上邊距
　　android:textSize：字體顯示的大小注意：單位是sp

c、效果

4、表格布局

相比大家對于表格都有很大的了解，比如我們常用到的Excel表格，再比如我們html中用到的table標簽，其實在Android中的表格布局也是類似的，所以當需要像表格一樣布　局，那么推薦使用表格布局

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

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

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

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

a、一下是表格布局的xml實現(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代表一行，行里面有多少個標簽內(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、部分標簽屬性說明

TableRow：行

c、效果
　

5、幀布局（框架布局）

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

a、以下是幀布局xml的實現(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="點擊"
    />

</FrameLayout>

b、部分標簽說明

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

c、效果

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