Android新手开发之旅-基本布局方式(三)

liu

本节来了解帧布局(FrameLayout)和表格布局(TableLayout)

一、帧布局(FrameLayout)

     这个布局会默认把控件放在屏幕上的左上角的区域,后续添加的控件会覆盖前一个,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个控件

     常用属性有：
        1、android:foreground:设置改帧布局容器的前景图像
          2、android:foregroundGravity:设置前景图像显示的位置

       例子：

           
实现代码：

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="bottom">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@color/colorPrimary" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/black" />
</FrameLayout>

二、表格布局(TableLayout)
      
      Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。 当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列， 当为View时，该View将独占一行
        TableLayout的行数由开发人员直接指定，即有多少个TableRow对象（或View控件），就有多少行。

      TableLayout的列数等于含有最多子控件的TableRow的列数。

       可设置的属性

       1、全局属性即列属性，有如下三个参数：

       （1）android:stretchColumns    设置可伸展的列。该列可以向行方向伸展，最多可占据一整行

       （2）android:shrinkColumns     设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示

       （3）android:collapseColumns  设置要隐藏的列

       注意：以上三个参数设置值的时候索引是从“0”开始的，也可以设置多个,用逗号隔开比如”0,3”

       2、单元格属性

             （1）android:layout_column    指定该单元格在第几列显示

             （2）android:layout_span        指定该单元格占据的列数（未指定时，为1）

       示例，如下图：
               
               

       实现代码请往下看↓↓↓

liu

[XML] 纯文本查看 复制代码

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

    <!-- android:collapseColumns="1,3" 索引从0开始,隐藏第二列和第四列 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1,3">

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5" />
        </TableRow>
    </TableLayout>

    <!-- android:stretchColumns="1" 索引从0开始,第二列可拉伸 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:stretchColumns="1">

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />
        </TableRow>
    </TableLayout>

    <!-- android:shrinkColumns="1" 索引从0开始,第二列可收缩 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:shrinkColumns="1">

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5" />
        </TableRow>
    </TableLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent" />

    <!-- android:layout_span="2" 占两列  android:layout_column="1"显示在第二列 -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">

        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第一列" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第二列" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第三列" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第四列" />

        </TableRow>

        <!-- android:layout_span="2" 占两列 -->
        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:text="1" />
        </TableRow>

        <!-- android:layout_column="1"显示在第二列 -->
        <TableRow>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:text="1" />
        </TableRow>

    </TableLayout>
</LinearLayout>

竹林风

真是难得给力的帖子啊。

竹林风

楼主加油，我们都看好你哦。

站长苏飞

楼主加油，我们都看好你哦。

Amy

这个背景真好看

惜

看到这帖子真是高兴！

范范

楼主加油，我们都看好你哦。