布局设计和实现:计算器UI【TableLayout、GridLayout】
一、使用TableLayout实现计算器UI
1.新建一个空白项目布局
根据自己的需求输入其他信息
填写完成后,点击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"><!-- 第一行,显示计算结果 --><TableRowandroid:layout_width="match_parent"android:layout_height="90dp"><TextViewandroid: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><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="10dp" ><Buttonandroid: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="("/><Buttonandroid: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=")"/><Buttonandroid: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="%"/><Buttonandroid: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><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="10dp" ><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="10dp" ><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="10dp" ><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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"/><Buttonandroid: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><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="10dp" ><Buttonandroid: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"/><Buttonandroid: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="."/><Buttonandroid: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="="/><Buttonandroid: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>
可以看到实现了这样的一个效果
-
第一个
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 分配一个唯一的标识符。
-
-
第二个
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)}
}
需要注意以下几个条件:
- 确保替换
"table"
为您的布局文件的实际名称(不包括文件扩展名)。这样,Android 就会将该布局文件加载到 Activity 中并显示出来。- 确保您的
table.xml
文件位于res/layout
目录中。通常,它应该是这个目录的子目录下的一个 XML 布局文件。- 在您的 Kotlin 代码中,您可以通过
findViewById
方法来获取布局中的视图元素,例如,如果要获取布局中的某个按钮,可以这样做:
实现效果
二、使用GridLayout实现计算器UI
其他实现方式一样,对应的布局xml如下
<?xml version="1.0" encoding="utf-8"?>
<GridLayoutxmlns: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"><TextViewandroid: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" /><Buttonandroid:gravity="center"android:layout_height="wrap_content"android:text="("android:textSize="24sp"android:layout_columnSpan="1"/><Buttonandroid:gravity="center"android:layout_height="wrap_content"android:text=")"android:textSize="24sp"android:layout_columnSpan="1"/><Buttonandroid:gravity="center"android:layout_height="wrap_content"android:text="%"android:textSize="24sp"android:layout_columnSpan="1"/><Buttonandroid:gravity="center"android:layout_height="wrap_content"android:layout_weight="1"android:text="CE"android:textSize="24sp"android:layout_columnSpan="1"/><!-- 第三行,数字按钮 --><Buttonandroid:layout_height="wrap_content"android:text="7"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="8"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="9"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="÷"android:gravity="center"android:textSize="24sp"/><!-- 第四行,数字按钮 --><Buttonandroid:layout_height="wrap_content"android:text="4"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="5"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="6"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="×"android:gravity="center"android:textSize="24sp"/><!-- 第五行,数字按钮 --><Buttonandroid:layout_height="wrap_content"android:text="1"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="2"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="3"android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="-"android:gravity="center"android:textSize="24sp"/><!-- 第六行,数字按钮、小数点和等号 --><Buttonandroid:layout_height="wrap_content"android:text="0"android:gravity="center"android:textSize="24sp"android:layout_columnSpan="1"/><Buttonandroid:layout_height="wrap_content"android:text="."android:gravity="center"android:textSize="24sp"/><Buttonandroid:layout_height="wrap_content"android:text="="android:gravity="center"android:textSize="24sp"android:layout_columnSpan="1"/><Buttonandroid:layout_height="wrap_content"android:text="+"android:gravity="center"android:textSize="24sp"/></GridLayout>
修改成下图即可
实现效果
相关文章:

布局设计和实现:计算器UI【TableLayout、GridLayout】
一、使用TableLayout实现计算器UI 1.新建一个空白项目布局 根据自己的需求输入其他信息 填写完成后,点击Finish即可 2. 设计UI界面 在res/layout文件夹中的XML文件中创建UI界面。在这个XML文件中,您可以使用TableLayout来设计计算器界面。 2.1 创建l…...

stack与queue的简单封装
前言: stack与queue即栈和队列,先进后出/先进先出的特性我们早已了然于心, 在学习数据结构时,我们利用c语言实现栈与队列,从结构体写起,利用数组或指针表示他们的数据成员,之后再一个个实现他们…...
ChatGPT使用技巧整理
目录 1. 让ChatGPT扮演专家角色2. 告诉ChatGPT你的身份3. 限制ChatGPT的回答长度4. 让ChatGPT一步步思考5. 明确你的要求和目的6. 提供充分的背景信息7. 始终结构化思考你的prompt1. 让ChatGPT扮演专家角色 当你们讨论的是市场营销问题时,你可以要求ChatGPT扮演一个具有20年从…...
机器学习笔记 - 维度诅咒的数学表达
1、点之间的距离 kNN分类器假设相似的点也可能有相同的标签。但是,在高维空间中,从概率分布中得出的点往往不会始终靠近在一起。 我们可以用一个简单的例子来说明这一点。 我们将在单位立方体内均匀地随机绘制点(如图所示),并研究该立方体内测试点的 k 个最近邻将占用多少…...
组合计数训练题解
CF40E 题目链接 点击打开链接 题目解法 首先,如果 n , m n,m n,m 一奇一偶,那么答案为 0 0 0 原因是从行和列的角度分析, − 1 -1 −1 个数的奇偶性不同 可以发现 k < max { n , m } k<\max\{n,m\} k<max{n,m} 的性质很微…...
P1095 [NOIP2007 普及组] 守望者的逃离
[NOIP2007 普及组] 守望者的逃离 - 洛谷 首先DP的套路就是先找状态 这题也找不出其他的状态了,只有时间一个 所以用f[i]表示时刻i能走多远 而仔细一想实际上决策只有跑、闪现、停三种决策 然而闪现的耗蓝要和跑步一同计算十分麻烦 于是把它们分开算࿱…...

Python函数绘图与高等代数互融实例(八):箱线图|误差棒图|堆积图
Python函数绘图与高等代数互融实例(一):正弦函数与余弦函数 Python函数绘图与高等代数互融实例(二):闪点函数 Python函数绘图与高等代数互融实例(三):设置X|Y轴|网格线 Python函数绘图与高等代数互融实例(四):设置X|Y轴参考线|参考区域 Python函数绘图与高等代数互融实例(五…...

联想y7000 y7000p 2018/2019 不插电源 不插充电器, 直接关机 ,电量一直89%/87%/86%,V0005如何解决?
这种问题,没有外力破坏的话,电池不可能突然出事。这种一般是联想的固件问题,有可能发生在系统更新,或者突然的不正常关机或长时间电池过热,原因我不是很清楚。 既然发生了,根据我收集的解决方法,…...
stm32与esp8266通信
esp8266 #include <ESP8266WiFi.h> #include <ESP8266HTTPClient.h>// 测试HTTP请求用的URL // #define URL "http://162.14.107.118:8086/PC/modifyFoodPrice/0/6"// 测试HTTP请求用的URL // 设置wifi接入信息(请根据您的WiFi信息进行修改) const char…...
组合数 2.1 2.2
O(nlogn)预处理, O(1)查询 #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \nusing namespace std;typedef pair<int, int> PII; typedef long long ll; typedef long double ld;const int N 1000…...
【数组的中心位置】python实现-附ChatGPT解析
1.题目 数组的中心位置 题目 给你一个整数数组 nums,请计算数组的中心位置。 数组中心位置是数组的一个下标,其左侧所有元素相乘的积等于右侧所有元素相乘的积。 数组第一个元素的左侧积为 1,最后一个元素的右侧积为 1。 如果数组有多个中心位置,应该返回最靠近左边的那一个…...

黑马JVM总结(二十三)
(1)字节码指令-init 方法体内有一些字节,对应着将来要由java虚拟机执行方法内的代码,构造方法里5个字节代码,main方法里有9个字节的代码 java虚拟机呢内部有一个解释器,这个解释器呢可以识别平台无关的字…...

AI人体行为分析:玩手机/打电话/摔倒/攀爬/扭打检测及TSINGSEE场景解决方案
一、AI人体行为分析技术概述及场景 人体姿态分析/行为分析/动作识别AI算法,是一种利用人工智能技术对人体行为进行检测、跟踪和分析的方法。通过计算机视觉、深度学习和模式识别等技术,可以实现对人体姿态、动作和行为的自动化识别与分析。 在场景应用…...

HI_NAS linux 记录
dev/root 100% 占用解决记录 通过下面的命令查看各文件夹 大小 sudo du --max-depth1 -h # 统计当前文件夹下各个文件夹的大小显示为M 最终发现Var/log 占用很大空间 发现下面两个 log 占用空间很大,直接 rm-rf 即可 HI NAS python3 记录 # 安装pip3 sudo apt u…...

计算机图形学中的几何光学
文章目录 前言一、图形学中的光学二、光照模型1、经验型(简单)2、物理型(复杂) 前言 在学习Shader光照之前了解一下计算机图形学 一、图形学中的光学 镜面反射的效果例子:物体表面高光 慢反射的效果的例子:…...

「UG/NX」BlockUI 选择小平面区域 Select Facet Region
✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C」C/C程序设计「Win」Windows程序设计「DSA」数据结构与算法「File」数据文件格式 目录 控件说…...

【完全二叉树魔法:顺序结构实现堆的奇象】
本章重点 二叉树的顺序结构堆的概念及结构堆的实现堆的调整算法堆的创建堆排序TOP-K问题 1.二叉树的顺序结构 普通的二叉树是不适合用数组来存储的,因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆(一种二叉树)使用顺序结构…...

Maven官方镜像仓库与阿里云云效Maven
一、Maven官方镜像仓库 download maven-3 右击复制链接地址,使用wget命令直接在linux中下载: wget 链接地址history 二、阿里云云效Maven 详情查看maven 配置指南 打开 maven 的配置文件( windows 机器一般在 maven 安装目录的 conf/…...
python系列教程215——列表解析与矩阵
朋友们,如需转载请标明出处:https://blog.csdn.net/jiangjunshow 声明:在人工智能技术教学期间,不少学生向我提一些python相关的问题,所以为了让同学们掌握更多扩展知识更好地理解AI技术,我让助理负责分享…...

fonts什么文件夹可以删除吗?fonts文件夹删除了怎么恢复
在电脑上,fonts文件夹是存放字体文件的目录之一。尽管有时可能考虑删除该文件夹以节省硬盘空间或出于其他原因,但删除该文件夹可能会导致系统字体问题,影响用户的正常使用。因此,在删除之前需要考虑是否可以删除fonts文件夹&#…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...