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

news2024/11/26 18:33:38

一、使用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>

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1019992.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【PyTorch攻略（1/7）】 张量基本语法

【PyTorch攻略（1/7）】 张量基本语法

一、说明 Tensor 是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。在 PyTorch 中&#xff0c;我们使用张量对模型的输入和输出以及模型的参数进行编码。 张量类似于 NumPy 和 ndarray&#xff0c;除了张量可以在 GPU 或其他硬件加速器上运行。事实上&#xff0c;张量和…
阅读更多...
Navicat 连接数据库出现1251

Navicat 连接数据库出现1251

原因&#xff1a; MySQL8.0以上版本的加密方式和MySQL5.0的不一样&#xff0c;所以Navicat连接MySQL会报错。 1251 - Client does not support authentication protocol requested by server; consider upgrading MysQl. cdient– 修改远程连接权限 % 可换为自己的电脑ip GRAN…
阅读更多...
Spring Boot实现web.xml功能

Spring Boot实现web.xml功能

Spring Boot实现web.xml功能 1. 基于注解实现1.1 组件注册1.2 WebInitParam注解 2. 基于编码实现2.1 Servlet & Filter2.2 Listener 3. 总结 在Spring Boot中&#xff0c;不再需要使用传统的 web.xml 文件来配置web应用的功能&#xff0c;Spring Boot支持通过注解和基于代码…
阅读更多...
132.【MySQL_进阶】

132.【MySQL_进阶】

MySQL_进阶 (一)、存储引擎1.MySQL体系结构(1).连接层(2).服务层(3).引擎层(4).存储层 2.存储引擎简介(1).查看某张表的数据引擎(2).展示此版本支持的所有存储引擎(3).创建表my_myisam,并指定MyIASM存储引擎(4).存储引擎示列 3.存储引擎 _ Innodb(1).Innodb 介绍(2).Innodb 特点…
阅读更多...
展会预告 | 图扑邀您共聚 IOTE 国际物联网展·深圳站

展会预告 | 图扑邀您共聚 IOTE 国际物联网展·深圳站

参展时间&#xff1a;9 月 20 日- 22 日 图扑展位&#xff1a;9 号馆 9B 35-1 参展地址&#xff1a;深圳国际会展中心&#xff08;宝安新馆&#xff09; IOTE 2023 第二十届国际物联网展深圳站&#xff0c;将于 9 月 20 日- 22 日在深圳国际会展中心&#xff08;宝安&#xf…
阅读更多...
C#，数值计算——Hashtable的计算方法与源程序

C#，数值计算——Hashtable的计算方法与源程序

1 文本格式 using System; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer { public abstract class Hashtable<K> { private int nhash { get; set; } private int nmax { get; set; } pr…
阅读更多...
基于反向推理的序列预测模型

基于反向推理的序列预测模型

序列预测是机器学习中的一个关键问题，涉及到频繁序列挖掘、时间序列预测、自然语言处理等多个领域。在预测模型中，一个关键的挑战就是如何有效地利用历史信息进行预测。目前，大多数预测模型都是基于历史信息进行前向推理，这种方法在输入序列不完全或未知的情况下，其预测效…
阅读更多...
性能测试-性能工程全景图、实施方案、建设目标（20）

性能测试-性能工程全景图、实施方案、建设目标（20）

性能工程是一个关注系统性能层面的体系，包含测试环境的性能测试、生产环境的性能测试、性能调优、容量规划等多个方面 性能工程主要包括如下3个部分 ❑建设性能测试理论体系和流程规范、链路分析基础知识体系和流程规范、性能调优基础理论体系和流程规范。 ❑搭建高效协同的工…
阅读更多...
Typora远程代码执行漏洞CVE-2023-2317

Typora远程代码执行漏洞CVE-2023-2317

0x00 前言 漏洞详情 版本16.7以前的Typora中的updater/update.html存在基于DOM的XSS&#xff0c;可以通过加载定制的markdown文件实现任意javascript代码执行。 原理分析 漏洞触发点位于Typora的updater.html文件&#xff0c;通过特定协议typora://即可访问&#xff0c;同时…
阅读更多...
PDF怎样加密？希望这些方法可以帮助大家

PDF怎样加密？希望这些方法可以帮助大家

PDF怎样加密&#xff1f;我们平时会使用到非常多的pdf文件&#xff0c;相信大家也接触过这样一种pdf文件&#xff0c;当我们想要打开这个pdf文件的时候被告知需要输入一个密码后才能真正打开&#xff0c;都则这个文件你是无法打开的&#xff0c;这是因为这个pdf文件已经进行了加…
阅读更多...
自动化和数字化在 ERP 系统中意味着什么？

自动化和数字化在 ERP 系统中意味着什么？

毋庸置疑&#xff0c;ERP系统的作用是让工作更轻松。它可以集成流程&#xff0c;提供关键分析&#xff0c;确保你的企业高效运营。这些信息可以提高你的运营效率&#xff0c;并将有限的人力资本重新部署到更有效、更重要的需求上。事实上&#xff0c;自动化和数字化是ERP系统最…
阅读更多...
思维导图怎么画好看又简单？看看这个方法

思维导图怎么画好看又简单？看看这个方法

思维导图怎么画好看又简单&#xff1f;思维导图是一种非常有用的工具&#xff0c;可以帮助我们组织和展示思维。如果你想要画出既好看又简单的思维导图&#xff0c;那么我们可以使用一些思维导图制作工具。下面就给大家介绍一款个人觉得很好用的思维导图制作工具。 【迅捷画图】…
阅读更多...
【八大经典排序算法】堆排序

【八大经典排序算法】堆排序

【八大经典排序算法】堆排序 一、概述二、思路解读三、代码实现&#xff08;大堆为例&#xff09; 一、概述 堆排序是J.W.J. Williams于1964年提出的。他提出了一种利用堆的数据结构进行排序的算法&#xff0c;并将其称为堆排序。堆排序是基于选择排序的一种改进&#xff0c;通…
阅读更多...
嵌入式应用范围为什么这么广？

嵌入式应用范围为什么这么广？

嵌入式应用范围为什么这么广&#xff1f; 嵌入式技术的应用范围远比我们想象的要广泛。从传统的角度看&#xff0c;空调、电饭煲、电风扇、冰箱、遥控器、路由器、洗衣机、智能手机、投影仪、音响等等&#xff0c;几乎每天都在使用的产品都离不开嵌入式技术。 而随着互联网的…
阅读更多...
【力扣周赛】第 363 场周赛（完全平方数和质因数分解）

【力扣周赛】第 363 场周赛（完全平方数和质因数分解）

文章目录 竞赛链接Q1&#xff1a;100031. 计算 K 置位下标对应元素的和竞赛时代码写法2——手写二进制中1的数量 Q2&#xff1a;100040. 让所有学生保持开心的分组方法数&#xff08;排序后枚举分界&#xff09;竞赛时代码 Q3&#xff1a;100033. 最大合金数&#xff08;二分答…
阅读更多...
400电话客服中心电话：为您提供全方位的客户服务

400电话客服中心电话：为您提供全方位的客户服务

在现代商业环境中&#xff0c;提供优质的客户服务是企业成功的关键之一。为了满足客户的需求和解决问题&#xff0c;许多企业选择设立400电话客服中心。400电话是一种特殊的电话号码&#xff0c;可以通过固定电话和移动电话拨打&#xff0c;客户可以通过这个号码与企业进行沟通…
阅读更多...
数据库问题记录（粗略版）oracle、mysql等主流数据库通用

数据库问题记录（粗略版）oracle、mysql等主流数据库通用

1. ORA-00918&#xff1a;未明确定义列 该问题情况大致为&#xff1a;select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE&#xff0c;只返回表结构&#xff0c;不返回数据。 举一反三&#xff1a; select * from temp where 1&…
阅读更多...
12306 抢票小助手: 完整易用的抢票解决方案 | 开源日报 0917

12306 抢票小助手: 完整易用的抢票解决方案 | 开源日报 0917

testerSunshine/12306 Stars: 31.4k License: MIT 12306 购票小助手是一个使用 Python 编写的项目&#xff0c;主要功能包括自动打码、自动登录、准点预售和捡漏、智能候补以及邮件通知等。该项目具有以下核心优势&#xff1a; 支持多个版本的 Python提供验证码本地识别功能可…
阅读更多...
JVM执行流程

JVM执行流程

一、Java为什么是一种跨平台的语言&#xff1f; 通常&#xff0c;我们编写的java源代码会被JDK的编译器编译成字节码文件&#xff0c;再由JVM将字节码文件翻译成计算机读的懂得机器码进行执行&#xff1b;因为不同平台使用的JVM不一样&#xff0c;所以不同的JVM会把相同的字节码…
阅读更多...
TypeScript逆变 ：条件、推断和泛型的应用

TypeScript逆变 ：条件、推断和泛型的应用

TypeScript逆变 &#xff1a;条件、推断和泛型的应用 1 一个类型问题 有一个名为 test 的函数&#xff0c;它接受两个参数。第一个参数是函数 fn&#xff0c;第二个参数 options 受到 fn 参数的限制。乍一看&#xff0c;这个问题貌似并不复杂&#xff0c;不是吗&#xff1f;糊…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023