Android常见的界面布局

目录

前言

1.线性布局LinearLayout

2.相对布局RelativeLayout

3.表格布局TableLayout

4.网格布局GridLayout

实现一个计算器界面

改Button按钮颜色

5.帧布局FrameLayout


前言

在Android应用程序中,界面是由布局和控件组成的。控件是功能单元,负责接受用户的输入或者展示信息。而布局就是框架,来组织和定位这些控件的位置。

我们先来简单了解一下Android中一些常见的布局

1.线性布局LinearLayout

线性布局内的子控件通常被指定为水平或者竖直排列。

常用属性

|---------------------------|------------------------------------------------|
| 属性名称 | 说明 |
| android:orintation | 设置布局内控件的排列顺序 (vertical为竖直,horiztal为水平) |
| android:layout_weight | 在布局内设置控件的权重,属性值可以直接写int值 |
| android:layout_width | 设置布局或控件的宽度 |
| android:layout_height | 设置布局或控件的高度 |
| android:background | 设置布局或者控件的背景 |
| android:gravity | 线性布局中,子容器相对于父容器所在的位置 |

  • 当layout_width为0时,layout_weight表示水平方向的宽度比例。
  • 当layout_height为0时,layout_weight表示竖直方向的高度比例。

竖直摆放:

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

    <Button
        android:id="@+id/btn1"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn2"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn3"
        android:text="按钮1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

我们将父容器的orintation改为horiatal就是水平布局

2.相对布局RelativeLayout

相对布局通过相对定位的方式来指定子控件的位置。

RelativeLayout以父容器或者其他子控件为参照物,来指定布局内子控件的位置。

在相对布局中,其子控件具备一些属性,用于指定子控件的位置,一般是多个一起使用,

相对布局中子控件的属性:

根据父容器定位

XML 复制代码
<?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"
    android:layout_margin="40sp">

    <Button
        android:id="@+id/btn1"
        android:text="左上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"/>


    <Button
        android:id="@+id/btn2"
        android:text="上居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"/>


    <Button
        android:id="@+id/btn3"
        android:text="右上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"/>


    <Button
        android:id="@+id/btn4"
        android:text="左居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"/>


    <Button
        android:id="@+id/btn5"
        android:text="居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>



    <Button
        android:id="@+id/btn6"
        android:text="右居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>



    <Button
        android:id="@+id/btn7"
        android:text="左下角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>



    <Button
        android:id="@+id/btn8"
        android:text="下居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>


    <Button
        android:id="@+id/btn9"
        android:text="按钮9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

根据子控件来定位

XML 复制代码
<?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:id="@+id/target_btn"
        android:text="都以我为中心"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn_1"
        android:text="我在中心下面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
       android:layout_below="@+id/target_btn"
        android:layout_marginTop="40dp"
        android:layout_alignLeft="@+id/target_btn"/>

    <Button
        android:id="@+id/btn_2"
        android:text="我在中心上面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_above="@+id/target_btn"
        android:layout_marginBottom="40dp"
        android:layout_alignLeft="@+id/target_btn"/>

    <Button
        android:id="@+id/btn_3"
        android:text="我在中心左面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_alignBottom="@+id/target_btn"
       />
    
    <Button
        android:id="@+id/btn_4"
        android:text="我在中心右面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10sp"
        android:textColor="@color/black"
        android:layout_alignTop="@+id/target_btn"
        android:layout_toRightOf="@+id/target_btn"
        android:layout_marginLeft="40dp"/>
</Relative

3.表格布局TableLayout

表格布局采用列、行的形式来管理控件,不需要明确声明其中有多少行和多少列,而是在通过在表格中添加TableRow布局或者控件来控制表格的行数在TableRow布局中添加控件来控制表格的列数。

这种布局和后序讲的GridLayout的区别就是能够制定各列宽度不一样的表格,而网格布局只能制定列宽度一样的布局。

由于TableLayout继承于线性布局LinearLayout布局,所以表格布局支持线性布局的属性,此外,还有其他常用的属性:

|-----------------------------|-------------------------------------------------------|
| 属性名称 | 说明 |
| android:stretchColumns | 设置可拉伸的列。如:android:stretchColumns="0",表示第1列可以拉伸 |
| android:shrinkColumns | 设置可收缩的列。如:android:shrinkColumns="1,2",表示第2、3列可以收缩 |
| android:collapseColumns | 设置可以隐藏的列。如:android:collapseColumns="0",表示第1列可以隐藏 |

此外,表格布局中控件的常用属性

|---------------------------|-------------------------------------------------------|
| 属性名称 | 说明 |
| android:layout_column | 设置该控件显示的位置,如:android:layout_column="1",表示在第2个位置显示 |
| android:layout_span | 设置该控件占据第几列,默认为第1列 |

示例**:**

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TableRow>
        <Button
            android:text="按钮1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"/>
        
        <Button
            android:text="按钮2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"/>
    </TableRow>
    
    <TableRow>
        <Button
            android:text="按钮3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"/>

        <Button
            android:text="按钮4"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="1"/>
    </TableRow>
    
    <TableRow>
        <Button
            android:text="按钮5"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="2"/>
    </TableRow>
</TableLayout>

4.网格布局GridLayout

网格布局是android14.0引入的,使用它可以减少布局嵌套。

常见属性

|----------------------------------|---------------------------------------------------|
| 属性 | 说明 |
| android:columnCount | 设置最大列数 |
| android:rowCount | 设置最大行数 |
| android:orientation | GridLayout中子元素的布局方向 |
| android:alignmentMode | alignBounds:对齐子视图边界 alignMargins :对齐子视距内容,默认值 |
| android:columnOrderPreserved | 使列边界显示的顺序和列索引的顺序相同,默认是true |
| android:rowOrderPreserved | 使行边界显示的顺序和行索引的顺序相同,默认是true |
| android:useDefaultMargins | 没有指定视图的布局参数时使用默认的边距,默认值是false |

使用layout_columnSpanlayout_rowSpan时要加上layout_gravity属性,否则没有效果;另外item在边缘时宽高计算会出现错误,需要我们手动设置宽高,否则达不到想要的效果。

GridLayout在API21时引入了android:layout_columnWeightandroid:layout_rowWeight来解决平分问题。

实现一个计算器界面

XML 复制代码
<?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="wrap_content"
    android:columnCount="4"
    android:rowCount="9"
    android:orientation="horizontal">

    <TextView
        android:text="计算器"
        android:textSize="15sp"
        android:layout_columnSpan="4"
        android:layout_gravity="center"/>
    <TextView
        android:id="@+id/result"
        android:layout_gravity="fill"
        android:gravity="end"
        android:layout_columnSpan="4"
        android:text="0"
        android:background="#D5D4CF"
        android:textSize="50dp"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="%" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="CE" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="C"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="delete"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="1/x" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="x^2" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="x^(1/2)"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="÷"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="7" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="8" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="9"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="X"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="4" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="5" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="6"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="-"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="1" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="2" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="3"/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="+"/>
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="+/-" />
    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"

        android:text="0" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="."/>

    <Button
        android:layout_gravity="fill"
        android:layout_columnWeight="1"
        android:text="="/>

</GridLayout>

改Button按钮颜色

不过我们实际的计算器是没有那么明显的绿色的,那怎么改呢?

我们可以找到AndroidManifest.xml,在里找到以下主题。

Ctrl+鼠标左键进入themes.xml文件,将改写为:

XML 复制代码
Theme.MaterialComponents.DayNight.NoActionBar.Bridge

当我们返回我们的XML文件就会看到

5.帧布局FrameLayout

帧布局用于在屏幕上创建一块空白的区域,添加到该区域中的每个子控件占一帧,这些帧会一个一个叠加在一起,后加入的控件会叠加在上一个控件上层。默认情况下,帧布局中的所有控件会与布局的左上角对齐。

2个特殊属性:

|-------------------------------|-----------------------------|------------------------|
| 属性 | 相关方法 | 说明 |
| android:foreground | setForeground(Drawable) | 设置该帧布局容器的前景图像 |
| android:foregroundGravity | setForeground(int) | 定义绘制前景图像的gravity属性 |

XML 复制代码
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:background="#FF33ffff" />
<TextView
    android:layout_width="240dp"
    android:layout_height="240dp"
    android:layout_gravity="center"
    android:background="#FF33ccff" />
<TextView
    android:layout_width="180dp"
    android:layout_height="180dp"
    android:layout_gravity="center"
    android:background="#FF3399ff" />
<TextView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_gravity="center"
    android:background="#FF3366ff" />
<TextView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:background="#FF3300ff" />
</FrameLayout>

总体来讲,FrameLayout由于定位的欠缺,导致它的应用场景也比较少,不过之后使用碎片的时候是可以使用到的。


以上就是在android中几个常见的界面布局。

就先到这里了~

下期预告:android的一些常见的控件

相关推荐
Eastsea.Chen35 分钟前
MTK Android12 user版本MtkLogger
android·framework
长亭外的少年8 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
建群新人小猿10 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神12 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛12 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee
Y多了个想法12 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526
NotesChapter13 小时前
Android吸顶效果,并有着ViewPager左右切换
android
_祝你今天愉快15 小时前
分析android :The binary version of its metadata is 1.8.0, expected version is 1.5.
android
暮志未晚Webgl15 小时前
109. UE5 GAS RPG 实现检查点的存档功能
android·java·ue5
麦田里的守望者江15 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin