android的常见布局,Android常见布局

在Android中免不了用到布局，今天主要学习下Android常见布局

线性布局(LinearLayout)

帧布局(FrameLayout)

相对布局(RelativeLayout)

表格布局(TableLayout)

约束布局(ConstraintLayout)

线性布局

线性布局比较简单，下面通过一个例子介绍一下。

计算器.png

布局文件献上，此文件的布局是一个计算器(对于常见控件，暂不介绍)。

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

android:layout_marginVertical="20dp"

android:gravity="right"

android:textSize="20sp"

android:text="0"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="%"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="√"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="x²"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="1/x"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="CE"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="C"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="←"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="÷"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="7"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="8"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="9"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="×"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="4"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="5"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="6"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="-"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="1"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="2"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="3"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="+"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="wrap_content">

android:layout_weight="1"

android:text="±"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="0"

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="."

android:layout_width="0dp"

android:layout_height="wrap_content" />

android:layout_weight="1"

android:text="="

android:layout_width="0dp"

android:layout_height="wrap_content" />

上面布局文件中：

android:layout_weight

表示权重

android:orientation

表示控件的方向

horizontal

表示水平方向

vertical

表示垂直方向

android:layout_width

表示控件的宽

android:layout_height

表示控件的高

android:layout_margin

表示控件的外边距

android:padding

表示内边距

相对布局

还是通过例子，这次我们用相对布局来完成。

2.png

android:layout_width="match_parent"

android:layout_height="match_parent">

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

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

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

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

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

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

android:layout_width="match_parent"

android:orientation="vertical"

android:shrinkColumns="0,1,2"

android:stretchColumns="0,1,2"

android:layout_height="match_parent">

android:layout_height="wrap_content">

android:layout_height="wrap_content">

android:layout_height="wrap_content">

Shrinkable 表示该列的宽度可以进行收缩，以使表格能够适应父容器的大小

Stretchable 表示该列的宽度可以进行拉伸，以使能够填满表格中的空闲空间

约束布局

约束布局常用于拖控件当中。我们把控件拖入屏幕当中，当前控件会有四个小圆圈，我们可以设置约束条件。

image.png