布局设计和实现：计算器UI【TableLayout、GridLayout】

2023-09-18 17:49:35

一、使用TableLayout实现计算器UI

1.新建一个空白项目布局

s在这里插入图片描述

根据自己的需求输入其他信息

在这里插入图片描述

填写完成后，点击Finish即可

2. 设计UI界面

在res/layout文件夹中的XML文件中创建UI界面。在这个XML文件中，您可以使用TableLayout来设计计算器界面。

2.1 创建layout文件夹

但是默认创建出来的项目并不会包含layout布局文件夹，因此需要我们自行创建

在这里插入图片描述

在res目录内，右键单击鼠标，然后选择 “New” -> “Android Resource Directory” 选项。

在这里插入图片描述

在弹出的对话框中，将 “Directory name” 设置为 “layout”，然后点击 “OK”。

在这里插入图片描述

2.2 创建xml文件

在layout目录内，右键单击鼠标，然后选择 “New” -> “Layout Resource File” 选项。

在这里插入图片描述

修改一下信息

在这里插入图片描述

如果需要直接写XML代码，可点击右上角进行Code切换
在这里插入图片描述

2.3编写布局代码

<?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"
    android:background="#D8ECF3">

    <!-- 第一行，显示计算结果 -->
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="90dp">

        <TextView
            android:gravity="bottom|right"
            android:textSize="70dp"
            android:singleLine="true"
            android:layout_margin="15dp"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:id="@+id/textView"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btn_left"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="("/>
        <Button
            android:id="@+id/btn_right"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text=")"/>

        <Button
            android:id="@+id/btn_quyu"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="%"/>

        <Button
            android:id="@+id/btn_CE"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="CE"
            />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btn_7"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="7"
            />
        <Button
            android:id="@+id/btn_8"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="8"
            />
        <Button
            android:id="@+id/btn_9"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="9"
            />
        <Button
            android:id="@+id/btn_chu"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="÷"
            />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btn_4"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="4"
            />
        <Button
            android:id="@+id/btn_5"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="5"
            />
        <Button
            android:id="@+id/btn_6"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="6"
            />
        <Button
            android:id="@+id/btn_cheng"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="×"
            />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btn_1"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="1"
            />
        <Button
            android:id="@+id/btn_2"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="2"
            />
        <Button
            android:id="@+id/btn_3"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="3"
            />
        <Button
            android:id="@+id/btn_jian"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="-"
            />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btn_0"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="0"
            />
        <Button
            android:id="@+id/btn_dian"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="."
            />
        <Button
            android:id="@+id/btn_dengyu"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="="
            />
        <Button
            android:id="@+id/btn_jia"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="25sp"
            android:text="+"
            />
    </TableRow>

</TableLayout>

可以看到实现了这样的一个效果

在这里插入图片描述

  1. 第一个 TableRow:

    • android:layout_width 和 android:layout_height 属性设置为 match_parent 和 90dp，表示这个 TableRow 的宽度会填满其父容器，并且高度为 90dp。

    • TextView 元素是 TableRow 内的子元素。它有以下属性：

      • android:gravity="bottom|right"：文本在 TextView 中的对齐方式，文本在底部和右边对齐。
      • android:textSize="70dp"：文本的字体大小为 70dp。
      • android:singleLine="true"：文本只显示在一行内。
      • android:layout_margin="15dp"：设置 TextView 的外边距为 15dp。
      • android:layout_width="match_parent" 和 android:layout_height="120dp"：TextView 的宽度会填满 TableRow，高度为 120dp。
      • android:id="@+id/textView"：为 TextView 分配一个唯一的标识符。

  2. 第二个 TableRow:

    • android:layout_width 和 android:layout_height 属性设置为 match_parent 和 match_parent，表示这个 TableRow 的宽度会填满其父容器，高度也会填满。

    • 这个 TableRow 包含了四个 Button 元素，每个按钮代表不同的操作。

      • 每个按钮的 android:id 属性用于标识按钮。
      • android:layout_marginLeft="10dp"：设置按钮之间的左外边距为 10dp。
      • android:gravity="center"：设置按钮内文本的对齐方式为居中。
      • android:layout_width="0dp" 和 android:layout_weight="1"：这些属性是使用权重来均分 TableRow 中的宽度。每个按钮的宽度都会根据权重平均分配，以使它们在 TableRow 中平均分布。
      • android:textSize="25sp"：按钮内文本的字体大小为 25sp。
      • android:text：按钮上显示的文本内容。这个布局代码的作用是创建一个包含一个文本框和一组操作按钮的界面，可能用于一个简单的计算器或表达式输入界面。

3.应用布局

3.1 打开主文件

打开 Kotlin Activity 文件，通常是在 src/main/java/com/yourpackage/YourActivity.kt 中

在这里插入图片描述

3.2 修改内容视图

在 Activity 类的 onCreate 方法中，通过 setContentView 方法将布局文件设置为 Activity 的内容视图。假设您的布局文件名为 table.xml，在 onCreate 方法中添加以下代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.table)
    }
}

需要注意以下几个条件：

  1. 确保替换 "table" 为您的布局文件的实际名称（不包括文件扩展名）。这样，Android 就会将该布局文件加载到 Activity 中并显示出来。
  2. 确保您的 table.xml 文件位于 res/layout 目录中。通常，它应该是这个目录的子目录下的一个 XML 布局文件。
  3. 在您的 Kotlin 代码中，您可以通过 findViewById 方法来获取布局中的视图元素，例如，如果要获取布局中的某个按钮，可以这样做：

实现效果

在这里插入图片描述

二、使用GridLayout实现计算器UI

其他实现方式一样，对应的布局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="match_parent"
    android:columnCount="4"
    android:rowCount="6"
    android:padding="16dp"
    android:layout_gravity="center"
    android:background="#D8ECF3">


    <TextView
        android:gravity="bottom|right"
        android:textSize="70dp"
        android:singleLine="true"
        android:layout_margin="15dp"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_columnSpan="4"
        android:layout_rowSpan="2" />

    <Button
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="("
        android:textSize="24sp"
        android:layout_columnSpan="1"/>

    <Button
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text=")"
        android:textSize="24sp"
        android:layout_columnSpan="1"/>
    <Button
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="%"
        android:textSize="24sp"
        android:layout_columnSpan="1"/>

    <Button
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="CE"
        android:textSize="24sp"
        android:layout_columnSpan="1"/>

    <!-- 第三行，数字按钮 -->
    <Button
        android:layout_height="wrap_content"
        android:text="7"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="8"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="9"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="÷"
        android:gravity="center"
        android:textSize="24sp"/>

    <!-- 第四行，数字按钮 -->
    <Button
        android:layout_height="wrap_content"
        android:text="4"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="5"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="6"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="×"
        android:gravity="center"
        android:textSize="24sp"/>

    <!-- 第五行，数字按钮 -->
    <Button
        android:layout_height="wrap_content"
        android:text="1"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="2"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="3"
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="-"
        android:gravity="center"
        android:textSize="24sp"/>

    <!-- 第六行，数字按钮、小数点和等号 -->
    <Button
        android:layout_height="wrap_content"
        android:text="0"
        android:gravity="center"
        android:textSize="24sp"
        android:layout_columnSpan="1"/>
    <Button
        android:layout_height="wrap_content"
        android:text="."
        android:gravity="center"
        android:textSize="24sp"/>
    <Button
        android:layout_height="wrap_content"
        android:text="="
        android:gravity="center"
        android:textSize="24sp"
        android:layout_columnSpan="1"/>
    <Button
        android:layout_height="wrap_content"
        android:text="+"
        android:gravity="center"
        android:textSize="24sp"/>

</GridLayout>

修改成下图即可在这里插入图片描述
实现效果

在这里插入图片描述

更多推荐

“MicroPython在微控制器上实现I2S支持：详细指南与完整Python示例代码

第一部分：MicroPython与微控制器简介1.MicroPython简介MicroPython是Python3的精简、高效、快速实现，专为微控制器和受限制的环境设计。与传统的Python相比，MicroPython是为了在资源受限的设备上运行而优化的，这意味着它可以在只有几十KB的RAM和存储空间的设备上运行。2.

Python的多重继承和MixIn

前言：嗨喽~大家好呀，这里是魔王呐❤~!python更多源码/资料/解答/教程等点击此处跳转文末名片免费获取多重继承继承是面向对象编程的一个重要的方式，因为通过继承，子类就可以扩展父类的功能。回忆一下Animal类层次的设计，假设我们要实现以下4种动物：Dog-狗狗；Bat-蝙蝠；Parrot-鹦鹉；Ostrich-鸵

FFMpeg zoompan 镜头聚焦和移动走位

案例原始图片#输出帧数，默认25帧/秒，25*4代表4秒#s=1280x80#输出视频比例，可以设置和输入图片大小一致#zoom+0.002表示每帧放大的倍数，下面代码是25帧/每秒*4秒，共1000帧#最终是0.002*25*4=0.2，最终是放大1.2倍ffmpeg-i"./sdout/1.jpg"\-filter

APP应用如何选择云服务器？又如何备案呢？

APP备案应到其网络接入服务商处进行提交，如APP使用的是西部数码云服务器，就通过西部数码提交APP备案申请。APP备案申请前，需要开通一台云服务器。购买云服务器时，需要先了解APP应用的需求和估算负载量，以便选择到大小合适的云服务器。1.了解APP应用需求需要了解APP应用程序需要多少计算资源、存储空间和带宽等。这将

simulink代码生成

文章目录simulink代码生成simulink生成嵌入式C代码simulink生成AUTOSAR代码simulink代码生成Simulink是一种基于图形的编程环境，用于建模、仿真和分析动态系统。它是MathWorks公司的MATLAB软件的一个附加产品。Simulink代码生成是指使用Simulink模型生成可在其

3D大模型如何轻量化？试试HOOPS Communicator，轻松读取10G超大模型！

随着计算机技术的不断发展，3D模型在各行各业中的应用越来越广泛。然而，随着模型的复杂性和规模不断增加，处理和浏览超大型3D模型变得越来越具有挑战性。本文将探讨如何轻量化3D大模型，以及如何使用HOOPSCommunicator来读取和浏览10GB以上的超大模型。>>点击申请3D模型轻量化及格式转换解决方案一、3D大模型

清华博士面试的准备（已通过）

内修（30%）不管如何任何人都不能影响你的心态。因为冷静、理性，才能处理好95%以上的问题。剩下的5%我可以不拥有。不能既要、又要、还要。尊重客观规律。放下我执。价值导向、解决问题为导向。允许一切事情的发生，是我们最大的底牌。我是谁不重要，你是谁也不重要，重要的是大家一起做了什么事情。见天地、见众生、见自己每个人都了不

vue-h5：移动Web单击事件和延迟300ms的问题

在PC端的网页，大部分的交互是通过click事件来实现的，然而在移动端，则是通过touch事件来实现触摸交互。单击或者点击事件，指的是鼠标按下并且在短时间内放开【一般是小于300ms】。那么移动端，也是类似，在手指触摸到屏幕开始计算时间，并且在300ms内离开屏幕。这就是移动端的单击事件，手指触摸成为touch。tou

数据组合利器：从入门到精通Python中的zip()函数应用

介绍zip()函数是Python内置的一个非常有用的函数，它可以将多个可迭代对象打包成一个元组构成的新的可迭代对象。本文将深入探讨zip()函数的用法，从入门到精通。目录zip()函数的基本用法使用zip()函数合并列表使用zip()函数进行解压缩zip()函数在循环中的应用不等长可迭代对象的处理zip()函数与*操作

轻松搞定Spring集成缓存，让你的应用程序飞起来！

Spring集成缓存缓存接口开启注解缓存注解使用@Cacheable@CachePut@CacheEvict@Caching@CacheConfig缓存存储使用ConcurrentHashMap作为缓存使用Ehcache作为缓存使用Caffeine作为缓存主页传送门：📀传送Spring提供了对缓存的支持，允许你将数据

网络安全（黑客）自学

前言：想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有

热文推荐
  1. Window 10安装MySQL 5.7

    1、访问如下链接进行下载：Mysql官方下载地址官方地址下载的东西没有那么多病毒~。这东西见仁见智吧哈哈~。有些人不怕这个。注意安装上面这个下面的是test2、填写mysql的环境变量具体操作步骤如下：在桌面按下快捷键“Win+R”输入“controlsysdm.cpl,EnvironmentVariables”并点击

  2. HEC-RAS 1D/2D水动力与水环境模拟教程

    详情点击公众号技术科研吧链接：HEC-RAS1D/2D水动力与水环境模拟教程前言水动力与水环境模型的数值模拟是实现水资源规划、环境影响分析、防洪规划以及未来气候变化下预测和分析的主要手段。然而，一方面水动力和水环境模型的使用非常复杂，理论繁复；另一方面，免费的水动力和水环境软件往往缺少重要功能，而商业软件则非常昂贵。H

  3. 泡泡玛特海外布局动作不断，开启东南亚潮玩盛会

    近日，泡泡玛特海外布局动作不断，9月8日至10日，泡泡玛特2023PTS潮流玩具展（下简称新加坡PTS）在新加坡滨海湾金沙成功举办，现场人气爆棚，三天吸引了超过2万观众入场，这也是泡泡玛特首次在海外举办大型潮玩展。9月20日，泡泡玛特泰国首店盛大开业，吸引超千名粉丝现场排队，并在当地社交媒体引发热议。实际上，泡泡玛特泰

  4. python浮点数比较的三种方法

    在Python中，由于浮点数在计算机内部的表示方式是二进制的，因此进行浮点数比较时可能会出现精度问题。为了解决这个问题，你可以使用以下几种方法来比较浮点数：使用近似比较：通过设置一个小的误差范围，在比较两个浮点数时，判断它们的差是否在这个误差范围内。例如，你可以定义一个epsilon值（即允许的误差范围）来比较两个浮点

  5. 国产自研BI系统，更懂中国企业数据分析需求

    国产自研BI系统是指由中国企业自主研发的商业智能（BI）系统，这类系统更加了解中国企业的数据分析需求，能够提供更加贴合实际的解决方案。比如说奥威BI系统就是典型的国产自研，不仅了解中国企业的数据分析需求，还根据多年的经验为中国企业量身打造了多套标准化的BI数据分析解决方案，为中国企业提供更低风险、高效性、高性价比的智能

  6. 分布式锁实现方法

    分布式锁什么时候需要加锁有并发，多线程有写操作有竞争关系场景：电商系统，下单流程：用户下单–>秒杀系统检查redis商品库存信息–>用户锁定并更新库存（mysql）—>秒杀系统更新redis问题：单机部署，单线程执行无问题，多线程并发操作会引起超卖解决：对用户下单后的步骤加锁，让线程排队，避免超卖（synchroniz

  7. Caddy Web服务器深度解析与对比：Caddy vs. Nginx vs. Apache

    🌷🍁博主猫头虎带您GotoNewWorld.✨🍁🦄博客首页——猫头虎的博客🎐🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》学会Golang语言，畅玩云原生，走遍大

  8. 电脑桌面透明便签软件是哪个？

    在现代快节奏的工作环境中，许多上班族都希望能够在电脑桌面上方便地记录工作资料、重要事项、工作流程等内容。为了解决这个问题，一款优秀的电脑桌面便签软件是必不可少的。在选择桌面便签软件时，许多用户也希望便签软件能够与电脑桌面壁纸相统一，提升桌面美观度。那么，桌面便签软件哪个好用？有没有一款支持透明皮肤的电脑桌面便签软件值得

  9. Java对比对象修改前与修改后字段发生的变化

    开发过程中，我们通常会对系统操作人对系统的操作进行记录，记录操作前后某个字段的变化，如下图2.提供一个工具类，可以比较一个对象里面，源对象，与修改后的对象，有哪些字段发生了改变，第一步/***@authorqiankun.hu*@version1.0.0*@createTime2023年09月20日17:00:00*@