Android 基本布局以及应用_andriod布局举例应用-优快云博客

本文链接：https://blog.youkuaiyun.com/AprilCos/article/details/72873027

本文介绍了Android开发中常见的四种布局：LinearLayout、FrameLayout、GridLayout和TableLayout。LinearLayout按照垂直或水平方向排列元素，支持通过layout_weight属性调整控件大小。FrameLayout中元素位于左上角，后面的元素会覆盖前面的。GridLayout创建网格布局，类似表格。TableLayout则用于构建多行多列的布局，每个TableRow代表一行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、布局

1.LinearLayout 线性布局
2.FrameLayout 单帧布局，也有中文翻译为帧布局、框架布局
3.GridLayout网格布局
4.TableLayout 表格布局

常用的属性有

    1.android:orientation：可以设置布局的方向
    2.android:id - 为控件指定相应的ID
    3.android:text - 指定控件当中显示的文字，需要注意的是，这里尽量使用string.xml
    4.android:gravity - 指定控件的基本位置，比如说居中，居右等位置
    5.android:textSize - 指定控件当中字体的大小
    6.android:background - 指定控件所用的背景色，RGB命名法
    7.android:layout_width - 指定控件的宽度
    8.android:layout_height - 指定控件的高度
    9.android:layout_weight - 指定控件的占用比例
    10.android:padding - 指定控件的内边距，也就是说控件当中的内容
    11.android:sigleLine - 如果设置为真的话，则将控件的内容显示在一行当中

图解
这里写图片描述

1、 LinearLayout 线性布局
线性布局是Android开发中最常见的一种布局方式，它是按照垂直或者水平方向来布局，通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直（vertical）和水平（horizontal）两种。线性布局的排列在某行或者某列并不会自动换行或换列，就是说如果采用水平布局，控件宽度超过屏幕显示的话，后面的控件都将被隐藏，不会自动换行。
layout_weight属性以控制各个控件在布局中的相对大小。layout_weight属性是一个非负整数值；线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。例如，在水平布局的LinearLayout中有两个Button，这两个Button的layout_weight属性值都为1，那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0，控件会按原大小显示，不会被拉伸；对于其余layout_weight属性值大于0的控件，系统将会减去layout_weight属性值为0的控件的宽度或者高度，再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度。

看看代码的运行效果

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:text="2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="8"
       >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

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

        >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:text="4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"/>
    </LinearLayout>
</LinearLayout>

上面代码运行效果如下
这里写图片描述
先用布局把屏幕分成上中下三层，再用android:layout_weight（权重）按比例0：8：0的比例指定比例的占用。
再用android:layout_weight把上面3个按钮（Button）中间的按钮设置为2，
因为中间Button的高为0所以就没有显示在布局中，这样就会使第一个Button和第三个Button分别显示在左上和又上。
中间的先用 android:layout_gravity=”center”属性将布局剧中，然后再用android:orientation=”vertical”改变布局的方向，再把中间布局的Button剧中，左下和右下一样的操做。

2.FrameLayout 单帧布局
FrameLayout是布局中最简单的一个布局，在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。

代码以及效果如下：

<?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">
    <ImageButton
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#ff0000"
        android:layout_gravity="center"
        />
    <ImageButton
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:background="#27ff18"
        android:layout_gravity="center"
        />
    <ImageButton
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="#fb0ff7"
        android:layout_gravity="center"
        />
    <ImageButton
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:background="#fcd705"
        android:layout_gravity="center"
        />
    <ImageButton
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="#3c5ceb"
        android:layout_gravity="center"
        />

</FrameLayout>

效果图：
这里写图片描述
上面每一种颜色都是一个按钮，单帧布局不会像线性布局那样每个组件之间自动对齐，而是一个一个覆盖

3.GridLayout网格布局
GridLayout网格布局是Android4.0之后新加入的布局方式与表格布局相似。

看看代码吧，这里就简单的做了一个计算机的排版

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4">

    <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="/"
        /><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"
        /><Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        /><Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="x"
        /><Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        /><Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        /><Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        /><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:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="0"

        /><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="+"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"

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

</GridLayout>

效果图

这里写图片描述

4.TableLayout 表格布局
TableLayout顾名思义，此布局为表格布局，适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >
        <TableRow>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="1111"
                android:background="#ff0000"
                android:layout_weight="1"
                />
        </TableRow>
        <TableRow>
            <TextView
                android:text="2行1列"
                android:background="#FF00FF88"

                />
            <TextView
                android:text="222"
                android:background="#FF88"
                android:layout_weight="2"
                />
            <TextView
                android:text="222"
                android:background="#FF00FF"
                android:layout_weight="2"
                />
        </TableRow>
    </TableLayout>
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">

        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表2ddddddddddddddd"
                android:background="#b9f506"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表"
                android:background="#0b5ce8"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表2ddddddddddddddddddd"
                android:background="#f9e211"
                />
        </TableRow>
        <TableRow>
            <TextView
                android:text="表2"
                android:background="#b9f506"
                />
            <TextView
                android:text="表2"
                android:background="#0b5ce8"
                />
            <TextView
                android:text="表2"
                android:background="#f9e211"
                />
        </TableRow>

    </TableLayout>
</LinearLayout>