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

2024-02-29 00:59
文章标签 实现 设计 布局 ui 计算器 gridlayout tablelayout

本文主要是介绍布局设计和实现：计算器UI【TableLayout、GridLayout】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、使用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"><!-- 第一行，显示计算结果 --><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>

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

在这里插入图片描述

  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"?>
<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】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/757150。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...
使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
PostgreSQL中MVCC 机制的实现

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg
阅读更多...
SpringBoot整合Flowable实现工作流的详细流程

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4
阅读更多...
C++中零拷贝的多种实现方式

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri
阅读更多...
C++高效内存池实现减少动态分配开销的解决方案

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现：TCMalloc与Jemalloc1. TCM
阅读更多...
OpenCV实现实时颜色检测的示例

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间
阅读更多...
Python实现精准提取 PDF中的文本,表格与图片

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
阅读更多...
基于Python实现一个Windows Tree命令工具

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一：创建批处理文件并添加到PATH1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2