Android五大布局與實(shí)際應(yīng)用詳解

更新時(shí)間：2016年02月29日 15:01:48 作者：楊小勇

這篇文章主要為大家詳細(xì)介紹了Android五大布局與實(shí)際應(yīng)用，感興趣的小伙伴們可以參考一下

Android總體有五大布局：

線性布局（LiearLayout）: 屏幕垂直或水平方向布局。
幀布局（FrameLayout）：控件從屏幕左上角開始布局。
相對(duì)布局（RelativeLayout）: 以其他控件為參照布局。
絕對(duì)布局（AbsoluteLayout）：以屏幕坐標(biāo)布局。
表格布局（TableLayout）：按照行列方式布局。

一、LinearLayout

線性布局在開發(fā)中使用最多，具有垂直方向與水平方向的布局方式，通過設(shè)置屬性“android:orientation”控制方向，屬性值垂直（vertical）和水平(horizontal)，默認(rèn)水平方向。

在使用orientation時(shí)需要注意一個(gè)問題，假如我們使用默認(rèn)布局方向，即水平方向，若LinearLayout中存在不止一個(gè)控件且都未設(shè)置具體寬度，即這樣的布局代碼：

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</LinearLayout>

則會(huì)出現(xiàn)下面的錯(cuò)誤：

這個(gè)錯(cuò)誤告訴我們?cè)谟卸鄠€(gè)子控件時(shí)需要設(shè)置布局方向或至少設(shè)置一個(gè)子控件在該布局方向的大小，我們可以顯示設(shè)置布局方向或設(shè)置某一個(gè)子控件的寬度。

除orientation之外還有以下常用屬性：

android:gravity：內(nèi)部控件對(duì)齊方式，常用屬性值有center、center_vertical、center_horizontal、top、bottom、left、right等。這個(gè)屬性在布局組件RelativeLayout、TableLayout中也有使用，F(xiàn)rameLayout、AbsoluteLayout則沒有這個(gè)屬性。

center：居中顯示，這里并不是表示顯示在LinearLayout的中心，當(dāng)LinearLayout線性方向?yàn)榇怪狈较驎r(shí)，center表示水平居中，但是并不能垂直居中，此時(shí)等同于center_horizontal的作用；同樣當(dāng)線性方向?yàn)樗椒较驎r(shí)，center表示垂直居中，等同于center_vertical。

top、bottom、left、right顧名思義為內(nèi)部控件居頂、低、左、右布局。

這里要與android:layout_gravity區(qū)分開，layout_gravity是用來設(shè)置自身相對(duì)于父元素的布局。

android:layout_weight：權(quán)重，用來分配當(dāng)前控件在剩余空間的大小。正常情況下，值越大占據(jù)高度或?qū)挾仍酱?。例外的情況，在LineayLayout布局中使用這個(gè)屬性時(shí)需要注意: 當(dāng)水平方向布局且子控件的寬度為fill_parent或match_parent時(shí)，值越小占據(jù)寬度越大，垂直方向也一樣。分析一下這種情況，類似這樣的代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal" android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#666666"
    android:text="第一個(gè)子控件"
    android:gravity="center"
    android:layout_weight="1"/>
  <TextView
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#EE4000"
    android:text="第二個(gè)子控件"
    android:gravity="center"
    android:layout_weight="2"/>

</LinearLayout>

顯示效果：

這里出現(xiàn)這種情況主要是因?yàn)閙atch_parent或fill_parent引起的，系統(tǒng)先給第一個(gè)子控件分配parent_width（剩余空間），再給第二個(gè)分配parent_width，即分配了兩個(gè)parent_width，此時(shí)剩余為parent_width-2parent_width=-parent_width，這里主要問題就在這里，剩余控件其實(shí)已經(jīng)為一個(gè)負(fù)數(shù)了。接著，第一個(gè)控件占寬度：parent_width（當(dāng)前已有寬度）+權(quán)重1/3*（-parent_width）=2/3parent_width；第二個(gè)控件占寬度：parent_width+權(quán)重2/3*(-parent_width)=1/3parent_width，所以當(dāng)寬度都是match_parent時(shí)，剩余空間則為負(fù)數(shù)，誰的權(quán)重大誰就會(huì)減去越多。

在平常開發(fā)中我們會(huì)經(jīng)常用到這個(gè)屬性，通過設(shè)置layout_weight能解決很多不可思議的布局問題。

二、FrameLayout

幀布局或叫層布局，從屏幕左上角按照層次堆疊方式布局，后面的控件覆蓋前面的控件。該布局在開發(fā)中經(jīng)常用到，因?yàn)槭前磳哟畏绞讲季郑覀冃枰獙?shí)現(xiàn)層面顯示的樣式時(shí)就可以采用這種布局方式，比如我們要實(shí)現(xiàn)一個(gè)類似百度地圖的布局:

通過這張圖我們可以看到地圖與操作按鈕是分層顯示的，運(yùn)用FrameLayout我們也可以簡單實(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">

  <com.baidu.mapapi.map.MapView
    android:id="@+id/mapShowView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clickable="true"/>

  <EditText
    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="搜地點(diǎn)、查公交、找路線"
    android:textColorHint="#aaaaaa"
    android:gravity="left|center_vertical"/>

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

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

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

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

  </LinearLayout>

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

顯示效果：

FrameLayout中第一個(gè)子控件為百度地圖，其次為輸入框、右邊操作按鈕與左下方定位按鈕。我們可以看到這里很多子控件都使用了一個(gè)屬性，layout_gravity，正如前面講解gravity屬性提到的一樣，layout_gravity用來設(shè)置自身相對(duì)于父元素的布局，這個(gè)屬性在FrameLayout布局時(shí)會(huì)經(jīng)常使用到，用來控制控件在布局中的位置，layout_gravity常用屬性值有top、bottom、left、right、center、center_horizontal、center_vertical，這里的center可以讓控件居于FrameLayout的中心布局，屬性值可以復(fù)合使用，比如我們既要居底部布局又要垂直居中就可以這樣設(shè)置:“android:layout_gravity=bottom|center_vertical”。

代碼中的操作控件分三個(gè)布局位置，頂部的搜索框、右邊的操作按鈕、左下方的定位按鈕。以下為這三部分的講解：

1、搜索輸入框，根據(jù)FrameLayout的定義，子控件從布局的左上角開始按照層次堆疊方式布局，這里輸入框，我們需要顯示在屏幕的上方，所以只需要設(shè)置它的上、左、右方向的margin就可以滿足我們的設(shè)計(jì)。這里讓輸入框水平居中顯示的方式是通過設(shè)置寬度為match_parent再設(shè)置左右方向相同的margin就可以水平居中，當(dāng)然也可以通過設(shè)置一定的寬度后再設(shè)置layout_gravity的屬性值為center_horizontal。
2、右邊操作按鈕欄，三個(gè)按鈕為LinearLayout布局，垂直方向線性布局，LinearLayout中我們?cè)O(shè)置“android :layout_gravity=right”來讓實(shí)現(xiàn)靠右布局，其次設(shè)置margin讓控件按照合理的布局顯示。
3、定位按鈕，這個(gè)按鈕顯示在屏幕的左下方，我們只需要設(shè)置“android :layout_gravity=bottom”，再設(shè)置方向的margin讓按鈕顯示在合理的位置。
三、RelativeLayout

相對(duì)布局可以讓子控件相對(duì)于兄弟控件或父控件進(jìn)行布局，可以設(shè)置子控件相對(duì)于兄弟控件或父控件進(jìn)行上下左右對(duì)齊。RelativeLayout能替換一些嵌套視圖，當(dāng)我們用LinearLayout來實(shí)現(xiàn)一個(gè)簡單的布局但又使用了過多的嵌套時(shí)，就可以考慮使用RelativeLayout重新布局。

RelativeLayout中子控件常用屬性：

1、相對(duì)于父控件，例如：android:layout_alignParentTop=“true”

android:layout_alignParentTop 控件的頂部與父控件的頂部對(duì)齊;

android:layout_alignParentBottom 控件的底部與父控件的底部對(duì)齊;

android:layout_alignParentLeft 控件的左部與父控件的左部對(duì)齊;

android:layout_alignParentRight 控件的右部與父控件的右部對(duì)齊;

2、相對(duì)給定Id控件，例如：android:layout_above=“@id/**”

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

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

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

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

android:layout_alignBaseline 控件的baseline與給定ID的baseline對(duì)齊;

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

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

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

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

3、居中，例如：android:layout_centerInParent=“true”

android:layout_centerHorizontal 水平居中;

android:layout_centerVertical 垂直居中;

android:layout_centerInParent 父控件的中央;

應(yīng)用實(shí)例:

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

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/topbar_bg_border">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:text="標(biāo)題"
      android:textSize="19sp"
      android:textStyle="bold"
      android:textColor="#4e6288"/>

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

  </RelativeLayout>

</LinearLayout>

顯示結(jié)果：

這是一個(gè)頂部布局樣式，在很多app中我們會(huì)考慮使用樣式基本相同的頂部布局來統(tǒng)一風(fēng)格。這只是一個(gè)簡單的布局，包含一個(gè)Title以及取消按鈕(這里用的TextView代替)，相對(duì)于其他幾個(gè)布局控件，RelativeLayout在這里使用起來更簡單也更合理。首先設(shè)置RelativeLayout的高度，再設(shè)置Title的android:layout_centerInParent=”true”顯示在中央，最后設(shè)置取消按鈕的兩個(gè)屬性垂直居中android:layout_centerVertical=”true”和右部對(duì)齊android:layout_alignParentRight=”true”。

四、AbsoluteLayout

絕對(duì)布局也叫坐標(biāo)布局，指定控件的絕對(duì)位置，簡單直接，直觀性強(qiáng)，但是手機(jī)屏幕尺寸差別較大，適應(yīng)性差，Android 1.5已棄用，可以用RelativeLayout替代。

AbsoluteLayout實(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">

  <ImageView
    android:layout_width="100dip"
    android:layout_height="120dip"
    android:layout_x="150dip"
    android:layout_y="40dip"
    android:src="@drawable/android_logo"/>

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="100dip"
    android:layout_y="150dip"
    android:text="上一張"/>

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="200dip"
    android:layout_y="150dip"
    android:text="下一張"/>

  </AbsoluteLayout>

顯示效果：

這里為了設(shè)計(jì)一個(gè)圖片瀏覽的效果，將各個(gè)控件的layout_x與layout_y依次設(shè)置了一遍，然而當(dāng)前屏幕尺寸能正常顯示，其他屏幕就需要重新制定布局。其實(shí)用RelativeLayout輕松就能實(shí)現(xiàn)這樣的效果，還不用考慮屏幕兼容性。所以，AbsoluteLayout已成為android布局中的歷史。

五、TableLayout

表格布局繼承自LinearLayout，通過TableRow設(shè)置行，列數(shù)由TableRow中的子控件決定，直接在TableLayout中添加子控件會(huì)占據(jù)整個(gè)一行。

TableLayout常用屬性：

android:shrinkColumns：設(shè)置可收縮的列，內(nèi)容過多就收縮顯示到第二行

android:stretchColumns：設(shè)置可伸展的列，將空白區(qū)域填充滿整個(gè)列

android:collapseColumns：設(shè)置要隱藏的列

列的索引從0開始，shrinkColumns和stretchColumns可以同時(shí)設(shè)置。

子控件常用屬性：

android:layout_column：第幾列

android:layout_span：占據(jù)列數(shù)

TableLayout實(shí)例代碼：

<?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="應(yīng)用商店"
          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="應(yīng)用管理"
          android:gravity="center"/>
        <TextView
          android:layout_width="200dp"
          android:layout_height="100dp"
          android:layout_margin="5dp"
          android:background="#3924a4"
          android:text="應(yīng)用中心"
          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="發(fā)現(xiàn)" />
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="我" />
    </TableRow>

  </TableLayout>

</LinearLayout>

顯示效果：

屏幕中心是一個(gè)類似Material布局，底部是一個(gè)頁面切換的導(dǎo)航欄。底部布局通過設(shè)置android:stretchColumns=”0,1,2,3″來讓四個(gè)按鈕同樣大小顯示并填充到整個(gè)寬度，中心區(qū)域主要使用android:stretchColumns=”0,1,2″填充顯示以及android:layout_span=”2″控制大內(nèi)容跨列顯示。

布局在Android界面中相當(dāng)于建筑物的框架，在開發(fā)中我們需要運(yùn)用多種布局來實(shí)現(xiàn)界面顯示需求，只有了解了各種布局的顯示樣式與它們之間的差距，我們才能駕輕就熟、合理的布局界面。

您可能感興趣的文章: