【从零到一】Android UI界面（一） | 布局篇

---

1. 什么是布局（Layout）

  我们知道我们使用的App界面是由丰富的控件组成的，但是如何使这些控件有条不紊地排布，就需要引入我们今天的主角：布局（Layout）。布局是一种可以放置很多控件的容器，并按照一定的规则调整内部控件的位置，达到想要的效果。布局的内部不仅可以是控件，也可以嵌套一个布局，完成复杂的界面实现。正如下图所示：

---

2. 布局的种类

  本文将介绍七种不同的布局：

1. LinearLayout（线性布局）
2. RelativeLayout（相对布局）
3. FrameLayout（帧布局）
4. AbsoluteLayout（绝对布局）
5. TableLayout（表格布局）
6. GridLayout（网格布局）
7. ConstraintLayout（约束布局）

---

3. 七种布局

 3.1 LinearLayout（线性布局）

  LinearLayout（线性布局）中，子控件呈线性排布（ 水平 or 垂直）。

1. android:orientation属性

  LinearLayout标签里，可以添加android:orientation属性，这个属性决定布局内部控件的排布方式。android:orientation=“vertical | horizontal”，vertical （垂直的），horizontal（水平的）。不设置时默认为 horizontal 。
  让我们写一个具体的例子，比如在一个垂直排布的LinearLayout主布局里，嵌套两个LinearLayout布局（分别实现垂直和水平布局），两个布局都设置3个按钮，具体看如下（设置了LinearLayout背景色用来区分）：
  
  这里嵌套的第一个LinearLayout的android:layout_width属性（控件的宽）设置为wrap_content，表示让当前的控件大小能够刚好包含里面的内容，也就是由控件内容决定当前控件的大小，第二个LinearLayout的android:layout_width属性设置为match_parent，表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小。也为后面介绍 ，看下代码吧。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#afafaf">
        <Button
            android:text="Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#5c5c5c">
        <Button
            android:text="Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>