Android系统常用五大布局及使用

       我们都知道一个丰富的界面是要有很多控件组成的，那么我们如何让各个控件都有条不紊地摆放在界面上呢？而不是乱糟糟的呢？这就需要借助于布局来实现了。布局就是对界面结构的全面规划与安排，从而编写出精美的界面。

 那么本篇文章，我们自然要将重点放在布局的种类、属性、添加布局的方式以及如何使用上面了，那我们就开始吧！

添加布局的方式

1. 利用XML文件设计
2. 使用Java代码添加

五大常用布局

1. 线性布局 LinearLayout
2. 相对布局 RelativeLayout
3. 帧布局    FrameLayout
4. 表格布局 TableLayout
5. 约束布局 ConstraintLayout

线性布局 LinearLayout

Linearayout又称作线性布局，是一种非常常用的布局，这个布局会将它所包含的控件在线性方向上依次排列。线性布局分为两种：水平方向和垂直方向的布局。分别通过属性 android:orientation="vertical" 和  android:orientation="horizontal" 来设置，android:layout_weight  表示子元素占据的空间大小的比例，android:layout_gravity 用于指定控件在布局中的对齐方式。

下面我们通过实战来体会一下，创建一个activity_main.xml布局，代码如下所示：

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

    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
         />
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        />
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        />

</LinearLayout>

这里我们通过android:orientation属性指定了排列方向是vertical,如果指定的是horizontal控件就会水平方向上排列了。

我们在LinearLayout中添加了3个Button，每一个Button的长和宽都是wrap_content，并指定了排列的方向。现在运行一下程序，效果如图2所示。

接下来我们来看android:layout_gravity属性，该属性是用于指定控件在布局中的对齐方式，需要注意的是，只有当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效，因为当LinearLayout的排列方向是horizontal时，水平方向的长度是不固定的，每添加一个控件，长度都会发生改变，因此无法指定该方向上的对齐方式。修改activity_main.xml中的代码如下：

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

    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        android:layout_gravity="top"
         />
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        android:layout_gravity="center_vertical"
        />
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"
        android:layout_gravity="bottom"
        />

</LinearLayout>

由于当前LinearLayout的排列方式，因此我们只能指定垂直方向上的排列方向，将第一个Button的对齐方式指定为top，将第二个Button的对齐方式指定为center_vertical，将第三个Button的对齐方式指定为bottom，重新运行下程序，效果如图3所示。

紧接着我们学习LinearLayout中的另一个重要的属性android:layout_weight,比如我们编写一个消息发送界面，需要一个文本编辑框和一个发送的按钮，修改activity_main.xml中的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
   <EditText
       android:layout_width="0dp"
       android:layout_height="wrap_content" 
       android:layout_weight="1"
       android:hint="请输入内容"/>
    <Button
        android:id="@+id/bt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="发送"
        android:layout_weight="1"
        />

</LinearLayout>

你会发现,这里竟然将EditText和Button的宽度都指定为0dp，由于我们使用了 android:layout_weight属性，此时控件的宽度是不再由android:layout_width来决定，这里指定为0dp是一种比较规范的写法。

然后我们将EditText和Button的android:layout_weight属性值设置为1，表示将两个控件在水平方向平分宽度。重新运行程序，你会看到如图4所示的效果图：

相对布局 RelativeLayout

RelativeLayout又称为相对布局，也是一种非常常见的布局，他是通过相对定位的方式让控件出现在布局的任何位置，属性分别是一种是相对父控件(取值true和false)，如：android:layout_alignParentLeft="true",另一种是相对于其他控件(取值是其他控件的id)，如android:layout_toLeftOf=“true”。

下面我们通过实战来体会一下，创建一个activity_main.xml布局，代码如下所示：

<?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">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        />
    <Button
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        android:layout_centerInParent="true"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button5"
       android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />

</RelativeLayout>

我想上边的代码已经不需要我过多的解释了，因为实在是太好理解了，各个属性我们看名字也知道他们是什么意思了吧，重新运行下程序，效果如图5所示。

在这里相对于其他控件，可以自己去尝试写一下。

帧布局FrameLayout

帧布局又称为FrameLayout,这种布局方式不常用，是将所有的控件都会默认摆放在布局的左上角，属性为android:_layout_gravity 指定控件在布局中对齐方式，android:foreground指定布局前景， android:foregroundGravity指定布局前景的对齐方式，下面我们通过实战来体会一下，创建一个activity_main.xml布局，代码如下所示：

<?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"
    android:background="#cccccc"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="center">
    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#ff0000"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:background="#00ff00"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#00ffff"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#ff00ff"
        android:layout_gravity="center"/>
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#fff000"
        android:layout_gravity="center"/>

</FrameLayout>

这里frameLayout中放置了5个TextView文本，你需要知道该布局默认情况下是都位于布局的左上角，这里我们使用android:_layout_gravity 属性来指定控件在布局中的对齐方式，分别都居中对齐，android:foreground设置前景图，直接使用了@mipmap来访问ic_launcher这张图，然后在通过android:foregroundGravity设置前景的对齐方式，下面我们运行下效果，效果如图6所示。

表格布局TableLayout

TableLayout又称作表格布局，不常用，适用于多行多列的布局格式，每个 TableLayout 是由多个 TableRow 组成，一个 TableRow 就表示 TableLayout 中的每一行，这一行可以由多个子元素组成。属性分别：android:stretchColumns表示可将控件进行拉伸，android:shrinkColumns表示可将控件进行缩小， android:collapseColumns表示控件的隐藏，比如我们正在编写一个计算机界面，需要有文本的编辑框和不同的数字键盘。

下面我们通过实战来体会一下，创建一个activity_main.xml布局，代码如下所示：

<?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"
    android:collapseColumns=""
    android:stretchColumns="*">
    <EditText
        android:layout_weight="2"
        android:text="0"
        android:gravity="right|center_vertical"
        />
    <TableRow
        android:layout_weight="1">
        <Button android:text="C"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="+/-"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="%"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="➗"   android:layout_height="match_parent" android:textSize="20sp"/>
    </TableRow>
    <TableRow
        android:layout_weight="1">
        <Button android:text="7"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="8"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="9"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="✖️"   android:layout_height="match_parent" android:textSize="20sp"/>
    </TableRow>
    <TableRow
        android:layout_weight="1">
        <Button android:text="4"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="5"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="6"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="-"   android:layout_height="match_parent" android:textSize="20sp"/>
    </TableRow>
    <TableRow
        android:layout_weight="1">
        <Button android:text="1"
            android:layout_height="match_parent"/>
        <Button android:text="2"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="3"   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="+"   android:layout_height="match_parent" android:textSize="20sp"/>
    </TableRow>
    <TableRow
        android:layout_weight="1">
        <Button android:text="0"  android:layout_span="2" android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="."   android:layout_height="match_parent" android:textSize="20sp"/>
        <Button android:text="="   android:layout_height="match_parent" android:textSize="20sp"/>
    </TableRow>
</TableLayout>

这些代码看起来很复杂，其实很简单，这里设置了EditText编辑框，用于输入数字，然后设置5行4列，分别是TableRow控件中设置4个Button按钮，将每个控件设置android:layout_weight权重属性，下面我们来看下效果，如图6所示：

约束布局ConstraintLayout

ConstraintLayout称作约束布局，ConstraintLayout 使用约束的方式来指定各个控件的位置和关系的，它有点类似于 RelativeLayout，但远比 RelativeLayout 要更强大，它可以有效地解决布局嵌套过多的问题。可视化布局=拖拽控件 布局