【Android】App开发-布局篇

UI的开发离不开各个组件的精准布局，在我们学习了控件之后（👉控件篇​​​​​​​），我们就需要对这些控件进一一排布，让它们在各个指定的位置。

目录

LinearLayout线性布局

RelativeLayout布局

FrameLayout布局

TableLayout布局

GridLayout布局

---

LinearLayout线性布局

在我们学习其它的布局方式之前，先来看最基础的布局--线性布局。在做线性布局的测试之前，我们需要在main.xml文件中先创造一个层：

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

首先我们在Activity_main.xml文件中只留第一行清空其它的，然后输入<LinearLayout>就会弹出一前一后两个<LinearLayout>、<\LinearLayout>代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>
</LinearLayout>

我们对于LinearLayout的基础设置写在第一个里面：

<LinearLayout 
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

这里我们对于基础的宽和高的设置都是满屏。接下来就是对于子线性布局的控制属性：orientation，它有两个属性：vertical和horizontal，前者表示接下来的子布局都是纵向布局，而后者表示接下来的布局时横向水平布局。我们也可以利用layout_gravity来控制子布局的对齐方式，它的参数就有很多了：

接下来就是权重的概念，权重layout_weight表示的是子布局会加上布局方向上所剩余的面积的比重。例如我们设置三个子布局，它们都是纵向布局。例如纵向长度为100dp，三个子布局的大小我们设置均为20，那么还剩下40dp，而第一个子布局权重为5，第二个为4，第三个为1，那么第一个最终加上权重为：20+40*1/2=40dp，第二个为：20+40*4/10=36dp，第三个为20+40*1/10=24dp。因为权重概念容易混淆，并且如果我们设置了某个子布局大小为match_parent，将会带来很大麻烦。所以我们一般设置某个权重方向上的子布局大小为0，那么此时它们的大小将按照权重来分配，不用考虑它们之前分别有多少。

最后是分割线的概念，分割线就是子布局之间的分界线，这条线可以是TextView设置的backgroud，也可以是我们指定的图片，这里我们需要用到：divider、showDividers和dividerpadding。第一个用来设置分界线，它可以是某种颜色的线或者某张图片，第二个是显示分界线，第三个是分界线偏移（距离左边屏幕）

    android:divider="@color/black"
    android:showDividers="middle"
    android:dividerPadding="100dp"

下面是实验效果：

RelativeLayout布局

RelativeLayout布局是一种主要描述各个组件关系的布局，即它主要用于布局调整各个层的位置。它的主要属性有：

        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
---------------------------------------------------
        android:layout_toLeftOf="@id/L2"
        android:layout_toRightOf="@+id/L2"
        android:layout_above="@id/L2"
        android:layout_below="@id/L2"
        android:layout_alignTop="@id/L2"
        android:layout_alignBottom="@id/L2"
        android:layout_alignLeft="@id/L2"
        android:layout_alignRight="@+id/L2"

分界线上面的属性表示各个组件基于父容器也就是我们的整个手机背景的位置：android:layout_alignParentBottom表示组件基于父容器左对齐； android:layout_alignParentLeft表示组件基于父容器右对齐；android:layout_alignParentBottom和android:layout_alignParentTop分别表示基于父容器底部和顶部对齐； android:layout_centerHorizontal、android:layout_centerVertical、 android:layout_centerInParent分别表示基于父容器水平居中、垂直居中和完全居中。

分界线下面的属性是各个组件基于兄弟组件的位置，即相对位置。既然是基于兄弟组件，那么我们不可避免需要设置兄弟组件的id，这里我设置为L2。下面就来看看各个属性的作用：android:layout_toLeftOf="@id/L2"、android:layout_toRightOf="@+id/L2"、android:layout_above="@id/L2"、android:layout_below="@id/L2"分别表示这个组件在L2组件的左、右、上、下方；而android:layout_alignTop="@id/L2"、 android:layout_alignBottom="@id/L2"、 android:layout_alignLeft="@id/L2"、android:layout_alignRight="@+id/L2"则分别表示位于兄弟组件的上边界、下边界、左边界和右边界。

但是我们从上面可以很直观看出来，这些相对的偏移量都不是具体的数值，只是一个相对模糊的关系，我们在现实中往往需要确定的偏移量，这时候就需要用到margin组件了，它是表示某个组件在父容器的偏移量，它的属性有：

        android:layout_marginLeft="50dp"
        android:layout_marginBottom="60dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="10dp"
        android:layout_margin="60dp"

它们分别表示基于父容器的相对偏移量，而这里有一个比较特殊，那就是margin，它是基于各个边界的偏移量，是一个总的数值。回顾之前的控件，我们不难发现，调整控件与父容器的距离我们用margin，而调整组件间的相对位置，我们就要使用到padding了。

FrameLayout布局

framelayout布局出来的效果和之前RelativeLayout布局的效果类似，都是在父容器的左上角开始绘制子容器，并且子容器有叠加的效果，但是它与RelativeLayout不同的是，framelayout是多层的布局而Relative是单层布局。

<FrameLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <FrameLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/black"

</FrameLayout>

TableLayout布局

TableLayout布局是一种表格布局，它类似于Excel的表格，但是不同的是它没有分割线。TableLayout它是纵向排布的，也就是说如果我们写入多个组件，它们会呈现从上往下的排布方式，并且每一个都占满一行：

 

要想在某一行塞进多个组件，需要配合用到TableRow，将每一个组件放入TableRow里面即可：

     <TableRow>
        
     //.....
     </TableRow>

因为我们的控件都是从左到右排布，并且一旦超过一定数值，控件就不会继续显示，此时就有了一些处理一行控件的办法：

    android:shrinkColumns="0"
    android:stretchColumns="0"
    android:collapseColumns="0"

它们分别表示：收缩指定序列号的组件、拉伸指定序列号的组件、隐藏指定序列号的组件。收缩指的是当一行满了有组件溢出之后，收缩某个特定的组件会使指定序列号的组件变长，以达到使更多组件显示的目的；而拉伸指的是当一行未满，拉伸某个组件会将这一行填满；隐藏就是直接隐藏掉指的序列号组件。

子控件：

    android:layout_column="2"
    android:layout_span="1"

这两个子控件分别表示显示在那一列和跨几列展示，注意，这里的这两个子控件属性是位于TableRow里的控件的属性，并且需要有两个以上的TableRow来做参考才能有效果。

GridLayout布局

GridLayout布局也是属于网格布局，只不过这种布局方式比前面的TableLayout布局更加灵活，这里我们还是以5个按钮为例，先来看看这个布局的一些常用属性：

    android:orientation="vertical"
    android:rowCount="4"
    android:columnCount="5"

我们可以看到，常见的属性有：orientation、rowcount、columncount，第一个我们在之前就见过，它表示将控件横向排布还是纵向排布；第二个和第三个功能类似，都是规定一列/一行中最多能够放进去的控件的个数，如果超过了就换行：

对于子控件的属性，我们可以利用layout_column、layout_columnspan、layout_gravity和layout_columnweight等等这些属性来设置，它们的用法和之前在其它层上的一样。

最后是ConstraintLayout，这个是约束布局，这个布局我们我们一般在design界面来调整，是一个可以我们自己配置的布局，非常方便：

---

参考资料：布局篇参考资料