Android基础篇-基本布局

Android布局是开发中必不可少的一部分，熟悉一些常用的布局和属性可以大大提高开发效率。

布局名称	使用场景	使用率
LinearLayout	适合比较简单的布局场景，按照水平或垂直方向排列视图	频繁
RelativeLayout	适合复杂的布局，子布局需要相对于其他布局或父布局进行摆放。	频繁
ConstraintLayout	适合复杂的布局，通过约束条件轻松排列子视图的位置	频繁
FrameLayout	适合单一子视图简单布局。覆盖式布局，可以实现布局叠加	一般
GridLayout	适合展示类似于网格一样、大小相等的多个视图的布局	单独用较少，通常用组件RecyclerView创建和管理
TableLayout	适合展示表格结构布局	较少

编写布局的时候，尽量扁平化布局，减少层级嵌套，因为布局层级越深，UI的加载速度越慢。
通常情况下，不同的布局是需要配合使用的。

设计布局中通用的一些属性如下：

• layout_gravity 布局重心，将布局中的所有元素位于父元素的某个位置上
• gravity 重心，把控件内的元素放在控件的某个位置，文本控件适用
• textAllCaps 按钮英文默认全大写，设置该属性值false允许小写
  

1.线性布局(LinearLayout)

属性	属性值	作用
orientation	- vertical：垂直方向 - horizontal：水平方向	选择布局的排列方向
baselineAligned	- true - false	设置布局子元素的基线对齐，默认是true。对子视图是TextView、Button等包含文本的组件才有效，用于文本对齐功能比较有用
baselineAlignedChildIndex	子视图的索引，从0开始	指定线性布局元素在垂直方向以指定子视图索引的基线对齐
divider	资源文件	通过引入资源设置布局中子视图之间的分割效果，需要搭配showDividers一起使用
showDividers	- middle 子视图之间显示 - beginning 第一个视图前显示 - end 最后一个视图后显示 - none 不显示	设置分割效果资源在布局子视图中的显示位置，可以组合使用，如在第一个视图前，最后一个视图后同时显示： android:showDividers=“beginning|end”
dividerPadding	像素值	设置分割资源的内边距，如果线性布局是垂直布局，表示设置分割资源左右内边距，否则为上下内边距
layout_weight	整数	如果多个元素设置这个属性，他们会根据权重大小将剩余空间按照比例进行划分空间，通常用来实现均分，按比例划分布局等

使用线性布局构造一个垂直布局，子元素之间需要有分割线,分割线左右不填满。
1.定义分割线的资源divider.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:height="1dp" />
            <solid android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

2.主布局

<?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"
    android:orientation="vertical">
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:divider="@drawable/divider"
        android:dividerPadding="3dp"
        android:orientation="vertical"
        android:showDividers="middle">

        <Button
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="Text 1" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="Text 2" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:text="Text 3" />
    </LinearLayout>
</LinearLayout>

最终结果是这个样子，对于一些简单的布局通过这种方式设置间隔还是挺好用的。

2.相对布局(RelativeLayout)

相对布局，顾名思义，就是需要有一个参照物，可以是父布局，也可以是同级的其他布局。
不建议使用left/right,等同于start/end，本文统一忽略left/right的属性定义

属性	属性值	作用
layout_alignParentTop	布尔值	置于父容器顶部
layout_alignParentBottom	布尔值	置于父容器底部
layout_alignParentStart	布尔值	置于父容器左边
layout_alignParentEnd	布尔值	置于父容器右边
layout_centerVertical	布尔值	置于父容器垂直方向居中
layout_centerHorizontal	布尔值	置于父容器水平方向居中
layout_centerInParent	布尔值	置于父容器水平垂直居中
layout_alignBaseline	参照视图的id	设置与参考布局基线对齐
layout_alignTop	参照视图的id	设置布局和参考布局顶部对齐
layout_alignBottom	参照视图的id	设置布局和参考布局底部对齐
layout_alignStart	参照视图的id	设置布局和参考布局左边缘对齐
layout_alignEnd	参照视图的id	设置布局和参考布局右边缘对齐
layout_below	参照视图的id	设置布局置于参考布局下方
layout_above	参照视图的id	设置布局置于参考布局上方
layout_toStartOf	参照视图的id	设置布局置于参考布局左边
layout_toEndOf	参照视图的id	设置布局置于参考布局右边

使用相对布局实现以下效果，从代码可以看到，相对布局只需要一层布局就可以定位整个布局元素，实现复杂布局。

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

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/music" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="40dp"
        android:layout_marginBottom="50dp"
        android:text="Confirm" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="40dp"
        android:layout_marginBottom="50dp"
        android:text="Cancel" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignStart="@+id/tv_tip1"
        android:layout_alignTop="@+id/tv_name"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_icon"
        android:layout_centerHorizontal="true"
        android:text="Welcome"
        android:textSize="27sp" />

    <TextView
        android:id="@+id/tv_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_icon"
        android:layout_alignBaseline="@+id/tv_name"
        android:layout_marginStart="20dp"
        android:layout_toEndOf="@id/tv_name"
        android:text="music"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/tv_tip1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_name"
        android:layout_centerHorizontal="true"
        android:text="I am RelativeLayout demo"
        android:textSize="21sp" />
</RelativeLayout>

3.约束布局(ConstraintLayout)

约束布局也是一个强大的布局方式，使用简单，对于位置的摆放属性更加容易理解和使用。同时，约束布局还提供一个引导线的控件，其他元素可以相对于这条引导线(参考线，不显示在页面）进行定位，也比较实用，使定位元素更加清晰明确。

属性	属性值	作用
orientation	- vertical：垂直方向 - horizontal：水平方向	设置引导线的显示方向
layout_constraintGuide_begin	像素值	设置引导线的起始距离
layout_constraintGuide_end	像素值	设置引导线的结束距离
layout_constraintGuide_percent	小数值0-1之间	以比例方式设置引导线的起始距离
layout_constraintTop_toTopOf	参照视图的id	设置布局和参考布局顶部对齐
layout_constraintBottom_toBottomOf	参照视图的id	设置布局和参考布局底部对齐
layout_constraintTop_toBottomOf	参照视图的id	设置布局在参考布局下方
layout_constraintBottom_toTopOf	参照视图的id	设置布局在参考布局上方
layout_constraintStart_toStartOf	参照视图的id	设置布局和参考布局左边对齐
layout_constraintEnd_toEndOf	参照视图的id	设置布局和参考布局右边对齐
layout_constraintStart_toEndOf	参照视图的id	设置布局在参考布局右边
layout_constraintEnd_toStartOf	参照视图的id	设置布局在参考布局左边
layout_constraintBaseline_toTopOf	参照视图的id	设置布局的基线在参考布局上方
layout_constraintBaseline_toBottomOf	参照视图的id	设置布局的基线在参考布局下方
layout_constraintBaseline_toBaselineOf	参照视图的id	设置布局基线和参考布局基线对齐，常用于不同字体文本进行文字底部对齐

这里定义一个引导线，可以让多个尺寸不同的控件或视图在引导线上居中居中实现对齐效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--定义引导线(参考线）-->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="40dp" />

    <ImageView
        android:id="@+id/iv_icon1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:src="@drawable/wifi"
        app:layout_constraintBottom_toBottomOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="20dp"
        android:src="@drawable/music"
        app:layout_constraintBottom_toBottomOf="@+id/guideline"
        app:layout_constraintStart_toEndOf="@id/iv_icon1"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="0.1" />

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/music"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_year"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="130dp"
        android:text="2024"
        android:textSize="27sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_icon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="3/6 18:02"
        android:textSize="17sp"
        app:layout_constraintBaseline_toBaselineOf="@id/tv_year"
        app:layout_constraintStart_toEndOf="@+id/tv_year"
        app:layout_constraintTop_toBottomOf="@+id/iv_icon" />


</androidx.constraintlayout.widget.ConstraintLayout>

4.帧布局(FrameLayout)

可以叠加的布局，可以通过通用的定位属性，如margin,padding,layout_gravity等调整位置。
实现如下效果

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

    <View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="@android:color/holo_green_dark" />

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@android:color/holo_red_dark" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@android:color/holo_blue_dark" />


</FrameLayout>

5.表格布局(TableLayout)

表格布局使用TableLayout父标签，设计一个表格数据，使用TableRow
如果表格的宽度需要改变适应页面宽度，在TableLayout标签中可以设置压缩或拉伸属性，可同时控制多列
注意：如果TableRow中设置TextView没有内容，依然会占据空间，当新增其他元素挤压的时候就会显示出来。

属性	属性值	作用
stretchColumns	列的索引值，可多个，逗号隔开	设置第指定列元素可拉伸（表格索引从0开始），自动将页面剩余空间拉伸
shrinkColumns	列的索引值，可多个，逗号隔开	压缩指定列元素
collapseColumns	列的索引值，可多个，逗号隔开	设置元素隐藏，从页面消失不占空间
layout_column	列的索引值，单个	设置当前View所在的列
layout_span	列的数量值	指定当前View所占的列数，列数跨度

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="2">

    <!-- 表头 -->
    <TableRow>
        <TextView
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="name"
            android:textStyle="bold" />
        <TextView
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="age"
            android:textStyle="bold" />
        <TextView
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="hobby"
            android:textStyle="bold" />
    </TableRow>

    <!--表格数据行-->
    <TableRow>
        <TextView
            android:gravity="center"
            android:text="张三" />
        <TextView
            android:gravity="center"
            android:text="56" />
        <TextView
            android:gravity="center"
            android:text="下象棋" />
    </TableRow>

    <TableRow>
        <TextView
            android:gravity="center"
            android:text="李四" />
        <TextView
            android:gravity="center"
            android:text="18" />
        <TextView
            android:gravity="center"
            android:text="钓鱼" />
    </TableRow>

</TableLayout>

6.GridLayout网格布局(GridLayout)

网格布局更加灵活，在GridLayout标签要定义几行几列，元素按顺序从左到右，从上到下排列

属性	属性值	作用
columnCount	整数值	定义列数
rowCount	整数值	定义行数
android:layout_columnSpan	整数值	设置当前Viw所占的列数
layout_rowSpan	整数值	设置当前Viw所占的行数
layout_column	整数值	设置当前view所在的列

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:rowCount="6">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="2"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="3"
        android:text="清除" />

    <Button
        android:text="1"
        android:textSize="26sp" />

    <Button
        android:text="2"
        android:textSize="26sp" />

    <Button
        android:text="3"
        android:textSize="26sp"/>

    <Button
        android:text="4"
        android:textSize="26sp" />

    <Button
        android:text="5"
        android:textSize="26sp" />

    <Button
        android:text="6"
        android:textSize="26sp" />

    <Button
        android:text="7"
        android:textSize="26sp" />

    <Button
        android:text="8"
        android:textSize="26sp" />
</GridLayout>

以上就是全部内容，欢迎交流补充或修正！