Android常见布局

在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