Android布局

Android布局

常见的布局有：

1. 相对布局RelativeLayout
2. 线性布局LinearLayout
3. 表格布局TableLayout
4. 网格布局GeidLayout
5. 帧布局FrameLayout

了解一下Android中的尺寸单位

View

• View在Android中可以理解为视图，占据屏幕上的一块矩形区域，负责提供组件绘制和事件处理的方法。
• View类是所有widgets组件的基类
• View类位于android.view包中；view类的子类一般位于Android.widget包中。

LinearLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="300dp"
              android:layout_width="300dp"
              android:layout_gravity="center"
              android:gravity="center|top"
              android:orientation="horizontal"
              xmlns:android="http://schemas.android.com/apk/res/android">
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮1"
    />

    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮2"
    />
    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:orientation="vertical"
                  xmlns:android="http://schemas.android.com/apk/res/android">
        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="按钮3"
        />
        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="按钮4"
        />
        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="按钮7"
        />
    </LinearLayout>
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮5"
    />
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮6"
    />
</LinearLayout>

代码解读：

• android:layout_height：定义layout的高度
• android:layout_width：定义layout的宽度
• android:layout_gravity：定义整个layout的位置
• android:gravity：定义layout里面的内容的位置
• android:orientation:定义layout内部元素的布局方向
• android:layout_weight：定义元素所占的权重

需要注意的是我们再里面嵌套了一个LinearLayout。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pCXLT3z-1614872736899)(E:\typora\images\image-20201017170436812.png)]

FrameLayout

FrameLayout布局是最简单的一个布局，应用程序开发人员不能为 FrameLayout 中填充的组件指定具体填充位置，默认情况下，这些组件都将被固定在屏幕的左上角，后放入的组件会放在前一个组件上进行覆盖填充，形成部分遮挡或全部遮挡。

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

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteY="1dp"
            tools:layout_editor_absoluteX="1dp"
            android:id="@+id/myframe"
            tools:ignore="MissingConstraints">

        <TextView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="#f06"
                android:id="@+id/textView"/>
        <TextView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="#fff"
                android:id="@+id/textView2"/>
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

相对布局RelativeLayout

有两种布局方式：一个是相对父组件相对布局，一个是相对邻近的组件相对布局

属性	描述
android:layout_above="@id/xxx"	将控件置于给定 ID 控件之上
android:layout_below="@id/xxx"	将控件置于给定 ID 控件之下
android:layout_toLeftOf="@id/xxx"	将控件的右边缘和给定 ID 控件的左边缘对齐
android:layout_toRightOf="@id/xxx"	将控件的左边缘和给定 ID 控件的右边缘对齐
android:layout_alignBaseline="@id/xxx"	将控件的 baseline 与给定 ID 的 baseline 对齐
android:layout_alignTop="@id/xxx"	将控件的上边缘和给定 ID 控件的上边缘对齐
android:layout_alignBottom="@id/xxx"	将控件的底边缘和给定 ID 控件的底边缘对齐
android:layout_alignLeft="@id/xxx"	将控件的左边缘和给定 ID 控件的左边缘对齐
android:layout_alignRight="@id/xxx"	将控件的右边缘和给定 ID 控件的右边缘对齐
android:layout_alignParentLeft=“true”	将控件的左边缘和父控件的左边缘对齐
android:layout_alignParentTop=“true”	将控件的上边缘和父控件的上边缘对齐
android:layout_alignParentRight=“true”	将控件的右边缘和父控件的右边缘对齐
android:layout_alignParentBottom=“true”	将控件的底边缘和父控件的底边缘对齐
android:layout_centerInParent=“true”	将控件置于父控件的中心位置
android:layout_centerHorizontal=“true”	将控件置于水平方向的中心位置
android:layout_centerVertical=“true”	将控件置于垂直方向的中心位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="相对布局"
              android:id="@+id/label"
              android:textSize="50sp"
    ></TextView>
    <EditText android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@id/label"
              android:id="@+id/edit"
    >
    </EditText>
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/edit"
            android:layout_alignParentRight="true"
            android:text="ok"
            android:layout_marginLeft="10dp"
            android:id="@+id/ok"
    ></Button>
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/edit"
            android:text="cancle"
            android:layout_toLeftOf="@id/ok"
    ></Button>


</RelativeLayout>

TableLayout表格布局

TableLayout 又称为表格布局，以行列的方式管理组件。

TableLayout 布局没有边框，可以由多个 TableRow 对象或者其他组件组成，每个 TableRow 可以由多个单元格组成，每个单元格是一个 View。TableRow 不需要设置宽度 layout_width 和高度 layout_height，其宽度一定是 match_parent，即自动填满父容器，高度一定为 wrap_content，即根据内容改变高度。但对于 TableRow 中的其他组件来说，是可以设置宽度和高度的，只是必须是 wrap_content 或者 fill_parent。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:shrinkColumns="2"
        android:stretchColumns="1"
        android:collapseColumns="0"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮一"/>
    <TableRow>
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮二"/>
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮三"/>
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮四"/>
<!--        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮五"/>
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮六"/>-->
    </TableRow>
        <Button android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="按钮五"/>
    
</TableLayout>

TableLayout 布局提供了几个特殊属性，可以实现以下特殊效果。

• android:shrinkColumns 属性：该属性用于设置可收缩的列。当可收缩的列太宽以至于布局内的其他列不能完全显示时，可收缩列会纵向延伸，压缩自己所占的空间，以便于其他列可以完全显示出来。android:shrinkColumns=“1” 表示将第 2 列设置为可收缩列，列数从 0 开始。
• android:stretchColumns 属性：该属性用于设置可伸展的列。可伸展的列会自动扩展长度以填满所有可用空间。android:stretchColumns=“1” 表示将第 2 列设置为可伸展的列。
• android:collapseColumns 属性：该属性用于设置隐藏列。android:collapseColumns=“1” 表示将第 2 列隐藏不显示。

GridLayout

网格布局与表格布局相似，用一组无限细的直线将界面分割为行、列、单元。然后，指定空间显示的区域和控件在改区域的显示方式。网格布局实现了控件的交错显示，避免使用布局嵌套、更有利于自由编辑布局的开发。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rowCount="6"
            android:columnCount="4"
            xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textSize="50sp"
            android:layout_columnSpan="4"
    >
    </TextView>
    <Button android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="清除"
            android:layout_columnSpan="4"
    />
    <Button android:textSize="26sp" android:text="1"></Button>
    <Button android:textSize="26sp" android:text="2"></Button>
    <Button android:textSize="26sp" android:text="3"></Button>
    <Button android:textSize="26sp" android:text="*"></Button>
    <Button android:textSize="26sp" android:text="4"></Button>
    <Button android:textSize="26sp" android:text="5"></Button>
    <Button android:textSize="26sp" android:text="6"></Button>
    <Button android:textSize="26sp" android:text="/"></Button>
    <Button android:textSize="26sp" android:text="7"></Button>
    <Button android:textSize="26sp" android:text="8"></Button>
    <Button android:textSize="26sp" android:text="9"></Button>
    <Button android:textSize="26sp" android:text="+"></Button>
    <Button android:textSize="26sp" android:text="."></Button>
    <Button android:textSize="26sp" android:text="0"></Button>
    <Button android:textSize="26sp" android:text="="></Button>
    <Button android:textSize="26sp" android:text="-"></Button>


</GridLayout>

自定义组件和复用组件

在日常开发中我们经常需要自定义一些组件以便之后复用。

自定义组件

• layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:text="Hello World"
              android:textSize="50sp"
    />
</LinearLayout>

复用组件

使用include标签:<include layout="@layout/layout"></include>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
    <include layout="@layout/layout"></include>
    
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="Send"/>
</LinearLayout>

==ps:==自定义组件的根标签的宽度和高度要和内容自适应，不然调用它的组件的其他元素就不能显示出来。