1.2 快速掌握 Android 中的六大布局

本篇我们介绍了六大布局* Linear Layout（线性布局）、Frame Layout（帧布局）、Relative Layout（相对布局）、Absolute Layout（绝对布局）、Table Layout（表格布局）、Absolute Layout（绝对布局） *的常用属性，然后结合实际开发中遇到的各种场景给出了相应的解决方案和示例用法，并且结合不同布局的各自特点给出了自身特有的属性（重复的属性不会列出），方便大家在后续学习UI排布的课程中进行查阅。最后，给出了 Android 中布局优化的一些建议。

什么是布局？

布局是一种可用于放置很多控件的容器，它可以按照一定的规律调整内部控件的位置，从而编写出精美的界面。当然了，布局的内部除了放置控件外， 也可以放置布局，通过多层布局的嵌套，我们就能够完成一些比较复杂的界面实现。

为了更好地管理Android应用的用户界面里的个组件，Android提供了布局管理器，通过布局管理器，Android应用的图形用户界面就具有了良好的平台无关性。这就让各个控件都可以有条不紊地摆放在界面上，而不是乱糟糟的。

一、线性布局 Linear Layout

LinearLayout是一种非常常用的布局，正如它名字所描述的一样，这个布局会将它所包含的控件在线性方向上依次排列，当然肯定就不仅只有一个方向，我们可以通过 android:orientation 这个属性指定排列方向是 vertical 还是 horizontal，控件就会在竖直方向上或者水平方向上进行排列。

下面我们通过实例来体会一下：

<?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"
android:gravity= "right|center_vertical">
<Button
    android:id="@+id/bn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bn1"/>
<Button
    android:id="@+id/bn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bn2"/>
<Button
    android:id="@+id/bn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bn3"/>
<Button
    android:id="@+id/bn4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bn4"/>
<Button
    android:id="@+id/bn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bn5"/>
</LinearLayout>

上面的布局界面很简单，只是很简单的定义了一个线性布局，在布局中定义了五个按钮并制定了属性“android:gravity = “right | center_vertical””，实际运行效果如下：

如果将上面的属性改为“android:gravity = “bottom | center_horizontal””，那么实际运行效果为：

也就是说在垂直布局的前提下底部居中、水平居中，就变成了这个样子，可以看到属性对局部的影响是很大的。

下面列出LinearLayout常用的属性：

android:layout_gravity： 本元素相对于父元素的重力方向
android:layout_weight：子元素对未占用空间水平或垂直分配权重值
android:gravity[setGravity(int)] ：本元素所有子元素的重力方向
android:orientation[setOrientation(int)]：线性布局以列或行来显示内部子元素
android:divider[setDividerDrawable(Drawable)]：设置垂直布局时两个控件之间的分隔条
android:baselineAligned[setBaselineAligned(boolean)]：该属性为false，将会阻止该布局管理器与它的子元素的基线对齐
android:measureWithLargestChild[setMeasureWithLargestChildEnabled(boolean)]当该属性设置为true时，所有带权重的子元素都会具有最大子元素的最小尺寸

问1：android:layout_gravity 和 android:gravity 有什么区别？

• android:gravity：对元素本身起作用-本身元素显示在什么位置
• android:layout_gravity：相对与它的父元素-元素显示在父元素的什么位置

* 如：Button控件 *
- android:layout_gravity 表示button在界面上的位置
- android:gravity 表示button上的字在button上的位置

问2：受控子元素如何设置？

LinearLayout的所有子元素都受 LinearLayout.LayoutParams 的控制，因此 Linear Layout 包含的子元素可以额外指定以下属性：

• android:layout_gravity 子元素在LinearLayout中的对齐方式
• android:layout_weight 子元素在LinearLayout中所占的权重

所以我们要实现第一个的 1:2 的效果，只需要分别把两个 Linear Layout 的 weight 分别设置成1和2就可以了。

比如将上述布局代码改为如下方式：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:background="#2fc1ff"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:background="#f7242b"
        android:layout_weight="2"/>
</LinearLayout>

那么实际的运行效果为：

用法归纳：

按比例划分水平方向，将涉及到的 View 的 android:width 属性设置为 0dp，然后设置为 android weight 属性设置比例即可；类推竖直方向，只需设 android:height 为 0dp，然后设 weight 属性即可！

---

二、相对布局 Relative Layout

RelativeLayout 也是一种非常常用的布局，和 LinearLayout 的排列规则不同的是， RelativeLayout 显得更加随意一些，它总是通过相对定位的方式让控件出现在布局的任何位置，比如说相对容器内兄弟组件、父容器的位置决定了它自身的位置。也正因为如此， RelativeLayout 中的属性非常多，不过这些属性都是有规律可循的。

实现一个梅花布局效果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <!-- 定义该组件位于父容器中间 -->
    <TextView
        android:id="@+id/view01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"