在Android中免不了用到布局，今天主要学习下Android常见布局
- 线性布局（LinearLayout）
- 帧布局（FrameLayout）
- 相对布局（RelativeLayout）
- 表格布局（TableLayout）
- 约束布局（ConstraintLayout）
线性布局
线性布局比较简单，下面通过一个例子介绍一下。
计算器.png
布局文件献上，此文件的布局是一个计算器（对于常见控件，暂不介绍）。
<?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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_marginVertical="20dp"
android:gravity="right"
android:textSize="20sp"
android:text="0"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="%"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="√"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="x²"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="1/x"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="CE"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="C"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="←"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="÷"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="7"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="8"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="9"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="×"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="4"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="5"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="6"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="-"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="2"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="3"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="+"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_weight="1"
android:text="±"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="0"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="."
android:layout_width="0dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:text="="
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
上面布局文件中：
android:layout_weight |
表示权重 |
|---|---|
android:orientation |
表示控件的方向 |
horizontal |
表示水平方向 |
vertical |
表示垂直方向 |
android:layout_width |
表示控件的宽 |
android:layout_height |
表示控件的高 |
android:layout_margin |
表示控件的外边距 |
android:padding |
表示内边距 |
相对布局
还是通过例子，这次我们用相对布局来完成。
2.png
<?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_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/button"
android:layout_alignRight="@id/button"
android:text="Button" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button"
android:layout_alignRight="@id/button"
android:text="Button" />
<Button
android:layout_alignTop="@id/button"
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/button"
android:text="Button" />
<Button
android:layout_alignTop="@id/button"
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button"
android:text="Button" />
</RelativeLayout>
| android:layout_toLeftOf | 该组件位于引用组件的左方 |
|---|---|
| android:layout_toRightOf | 该组件位于引用组件的右方 |
| android:layout_above | 该组件位于引用组件的上方 |
| android:layout_below | 该组件位于引用组件的下方 |
| android:layout_alignParentLeft | 该组件是否对齐父组件的左端 |
| android:layout_alignParentRight | 该组件是否齐其父组件的右端 |
| android:layout_alignParentTop | 该组件是否对齐父组件的顶部 |
| android:layout_alignParentBottom | 该组件是否对齐父组件的底部 |
| android:layout_centerInParent | 该组件是否相对于父组件居中 |
| android:layout_centerHorizontal | 该组件是否横向居中 |
| android:layout_centerVertical | 该组件是否垂直居中 |
帧布局
所有的子控件都会在左上角，每个控件都会覆盖前面的控件
表格布局
3.png
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:shrinkColumns="0,1,2"
android:stretchColumns="0,1,2"
android:layout_height="match_parent">
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:text="1"/>
<Button android:text="1"/>
<Button android:text="1"/>
</TableRow>
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:text="1"/>
<Button android:text="1"/>
<Button android:text="1"/>
</TableRow>
<TableRow android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:text="1"/>
<Button android:text="1"/>
<Button android:text="1"/>
</TableRow>
</TableLayout>
Shrinkable 表示该列的宽度可以进行收缩，以使表格能够适应父容器的大小
Stretchable 表示该列的宽度可以进行拉伸，以使能够填满表格中的空闲空间
约束布局
约束布局常用于拖控件当中。我们把控件拖入屏幕当中，当前控件会有四个小圆圈，我们可以设置约束条件。
image.png
