目录
前言
1.线性布局LinearLayout
2.相对布局RelativeLayout
3.表格布局TableLayout
4.网格布局GridLayout
实现一个计算器界面
改Button按钮颜色
5.帧布局FrameLayout
前言
在Android应用程序中，界面是由布局和控件组成的。控件是功能单元，负责接受用户的输入或者展示信息。而布局就是框架，来组织和定位这些控件的位置。
我们先来简单了解一下Android中一些常见的布局
1.线性布局LinearLayout
线性布局内的子控件通常被指定为水平或者竖直排列。
常用属性
| 属性名称 | 说明 |
| android:orintation | 设置布局内控件的排列顺序 （vertical为竖直，horiztal为水平） |
| android:layout_weight | 在布局内设置控件的权重，属性值可以直接写int值 |
| android:layout_width | 设置布局或控件的宽度 |
| android:layout_height | 设置布局或控件的高度 |
| android:background | 设置布局或者控件的背景 |
| android:gravity | 线性布局中，子容器相对于父容器所在的位置 |
- 当layout_width为0时，layout_weight表示水平方向的宽度比例。
- 当layout_height为0时，layout_weight表示竖直方向的高度比例。
竖直摆放：
<?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"><Buttonandroid:id="@+id/btn1"android:text="按钮1"android:layout_width="wrap_content"android:layout_height="wrap_content"/><Buttonandroid:id="@+id/btn2"android:text="按钮1"android:layout_width="wrap_content"android:layout_height="wrap_content"/><Buttonandroid:id="@+id/btn3"android:text="按钮1"android:layout_width="wrap_content"android:layout_height="wrap_content"/>
</LinearLayout>
我们将父容器的orintation改为horiatal就是水平布局
2.相对布局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"android:layout_margin="40sp"><Buttonandroid:id="@+id/btn1"android:text="左上角"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"/><Buttonandroid:id="@+id/btn2"android:text="上居中"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"/><Buttonandroid:id="@+id/btn3"android:text="右上角"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"/><Buttonandroid:id="@+id/btn4"android:text="左居中"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"/><Buttonandroid:id="@+id/btn5"android:text="居中"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"/><Buttonandroid:id="@+id/btn6"android:text="右居中"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"/><Buttonandroid:id="@+id/btn7"android:text="左下角"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"/><Buttonandroid:id="@+id/btn8"android:text="下居中"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_alignParentBottom="true"/><Buttonandroid:id="@+id/btn9"android:text="按钮9"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"/>
</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"><Buttonandroid:id="@+id/target_btn"android:text="都以我为中心"android:textSize="10sp"android:textColor="@color/black"android:layout_centerInParent="true"android:layout_width="wrap_content"android:layout_height="wrap_content"/><Buttonandroid:id="@+id/btn_1"android:text="我在中心下面"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:textColor="@color/black"android:layout_below="@+id/target_btn"android:layout_marginTop="40dp"android:layout_alignLeft="@+id/target_btn"/><Buttonandroid:id="@+id/btn_2"android:text="我在中心上面"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:textColor="@color/black"android:layout_above="@+id/target_btn"android:layout_marginBottom="40dp"android:layout_alignLeft="@+id/target_btn"/><Buttonandroid:id="@+id/btn_3"android:text="我在中心左面"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:textColor="@color/black"android:layout_alignBottom="@+id/target_btn"/><Buttonandroid:id="@+id/btn_4"android:text="我在中心右面"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:textColor="@color/black"android:layout_alignTop="@+id/target_btn"android:layout_toRightOf="@+id/target_btn"android:layout_marginLeft="40dp"/>
</Relative
3.表格布局TableLayout
表格布局采用列、行的形式来管理控件，不需要明确声明其中有多少行和多少列，而是在通过在表格中添加TableRow布局或者控件来控制表格的行数，在TableRow布局中添加控件来控制表格的列数。
这种布局和后序讲的GridLayout的区别就是能够制定各列宽度不一样的表格，而网格布局只能制定列宽度一样的布局。
由于TableLayout继承于线性布局LinearLayout布局，所以表格布局支持线性布局的属性，此外，还有其他常用的属性：
| 属性名称 | 说明 |
| android:stretchColumns | 设置可拉伸的列。如：android:stretchColumns=“0”，表示第1列可以拉伸 |
| android:shrinkColumns | 设置可收缩的列。如：android:shrinkColumns=“1,2”，表示第2、3列可以收缩 |
| android:collapseColumns | 设置可以隐藏的列。如：android:collapseColumns=“0”，表示第1列可以隐藏 |
此外，表格布局中控件的常用属性：
| 属性名称 | 说明 |
| android:layout_column | 设置该控件显示的位置，如：android:layout_column="1"，表示在第2个位置显示 |
| android:layout_span | 设置该控件占据第几列，默认为第1列 |
示例：
<?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"><TableRow><Buttonandroid:text="按钮1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="0"/><Buttonandroid:text="按钮2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="1"/></TableRow><TableRow><Buttonandroid:text="按钮3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="1"/><Buttonandroid:text="按钮4"android:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_column="1"/></TableRow><TableRow><Buttonandroid:text="按钮5"android:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_column="2"/></TableRow>
</TableLayout>
4.网格布局GridLayout
网格布局是android14.0引入的，使用它可以减少布局嵌套。
常见属性：
| 属性 | 说明 |
| android:columnCount | 设置最大列数 |
| android:rowCount | 设置最大行数 |
| android:orientation | GridLayout中子元素的布局方向 |
| android:alignmentMode | alignBounds：对齐子视图边界 alignMargins ：对齐子视距内容，默认值 |
| android:columnOrderPreserved | 使列边界显示的顺序和列索引的顺序相同，默认是true |
| android:rowOrderPreserved | 使行边界显示的顺序和行索引的顺序相同，默认是true |
| android:useDefaultMargins | 没有指定视图的布局参数时使用默认的边距，默认值是false |
使用layout_columnSpan 、layout_rowSpan时要加上layout_gravity属性，否则没有效果；另外item在边缘时宽高计算会出现错误，需要我们手动设置宽高，否则达不到想要的效果。
GridLayout在API21时引入了android:layout_columnWeight和android:layout_rowWeight来解决平分问题。
实现一个计算器界面
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:columnCount="4"android:rowCount="9"android:orientation="horizontal"><TextViewandroid:text="计算器"android:textSize="15sp"android:layout_columnSpan="4"android:layout_gravity="center"/><TextViewandroid:id="@+id/result"android:layout_gravity="fill"android:gravity="end"android:layout_columnSpan="4"android:text="0"android:background="#D5D4CF"android:textSize="50dp"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="%" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="CE" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="C"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="delete"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="1/x" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="x^2" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="x^(1/2)"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="÷"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="7" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="8" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="9"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="X"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="4" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="5" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="6"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="-"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="1" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="2" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="3"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="+"/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="+/-" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="0" /><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="."/><Buttonandroid:layout_gravity="fill"android:layout_columnWeight="1"android:text="="/></GridLayout>
改Button按钮颜色
不过我们实际的计算器是没有那么明显的绿色的，那怎么改呢？
我们可以找到AndroidManifest.xml，在里找到以下主题。
Ctrl+鼠标左键进入themes.xml文件，将改写为：
Theme.MaterialComponents.DayNight.NoActionBar.Bridge
当我们返回我们的XML文件就会看到
5.帧布局FrameLayout
帧布局用于在屏幕上创建一块空白的区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与布局的左上角对齐。
2个特殊属性：
| 属性 | 相关方法 | 说明 |
| android:foreground | setForeground(Drawable) | 设置该帧布局容器的前景图像 |
| android:foregroundGravity | setForeground(int) | 定义绘制前景图像的gravity属性 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"><TextViewandroid:layout_width="300dp"android:layout_height="300dp"android:layout_gravity="center"android:background="#FF33ffff" />
<TextViewandroid:layout_width="240dp"android:layout_height="240dp"android:layout_gravity="center"android:background="#FF33ccff" />
<TextViewandroid:layout_width="180dp"android:layout_height="180dp"android:layout_gravity="center"android:background="#FF3399ff" />
<TextViewandroid:layout_width="120dp"android:layout_height="120dp"android:layout_gravity="center"android:background="#FF3366ff" />
<TextViewandroid:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:background="#FF3300ff" />
</FrameLayout>
总体来讲，FrameLayout由于定位的欠缺，导致它的应用场景也比较少，不过之后使用碎片的时候是可以使用到的。
以上就是在android中几个常见的界面布局。
就先到这里了~
下期预告：android的一些常见的控件。
