【Android】入门05：帧布局、表格布局、网格布局

1.帧布局

一层一层向上摆放的布局，重叠的元素上层会遮挡下层。默认子元素都是堆叠在左上角。

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

    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#FF0000"></TextView>

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#00ff00"></TextView>

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#0000ff"></TextView>
</FrameLayout>

可以使用

android:layout_gravity="center"

设置其子元素的位置

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#FF0000"
        android:layout_gravity="center"
        ></TextView>

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#00ff00"></TextView>

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:background="#0000ff"></TextView>
</FrameLayout>

2.表格布局

将布局直接分成行与列。实现效果类似于HTML中的Table。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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">

    <TableRow>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="1"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="2"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="3"></Button>
    </TableRow>
    <TableRow>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="4"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="5"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="6"></Button>
    </TableRow>
    <TableRow>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="7"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="8"></Button>

        <Button
            android:backgroundTint="#E8E8E8"
            android:textColor="@color/black"
            android:text="9"></Button>
    </TableRow>
</TableLayout>

拉伸列

通过设置

android:stretchColumns  
可以传单值，也可以传多值（多值之间通过 ","分割），所有列都伸展传入"*"

<TableLayout 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:stretchColumns="0,1,2"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</TableLayout>

收缩列

通过设置

android:shrinkColumns
可以传单值，也可以传多值（多值之间通过 ","分割），所有列都伸展传入"*"
如果别的列宽度不够时会压缩被设置的列

<TableLayout 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:shrinkColumns="1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

3.网格布局

与表格布局类似，区别在于可直接在父元素制定行列数量，也可制定子元素跨行、跨列。

GridLayout属性
android:columnCount   列数量
android:rowCount 行数量
android:orientation 拜访方向 默认水平方向 horizontal
子元素属性
android:layout_rowSpan 跨行
android:layout_columnSpan 跨列（在使用跨行跨列之后需要使用android:layout_gravity="fill"进行填充，否则元素大小不变，只是位置空出来了）

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:rowCount="3"
    android:orientation="horizontal"
    >

    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:text="1"></Button>

    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:text="2"></Button>

    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:text="3"></Button>

    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="4"></Button>
    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:layout_rowSpan="2"
        android:layout_gravity="fill"
        android:text="5"></Button>
    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:text="6"></Button>
    <Button
        android:backgroundTint="#E8E8E8"
        android:textColor="@color/black"
        android:text="7"></Button>
</GridLayout>