首页 > 分享 > 【木棉花】知识分享——设计计算器的UI界面

【木棉花】知识分享——设计计算器的UI界面

前言

    我们的智能手机内都会存有一些系统自带的软件,这些软件内存占用不大,它们作为一种轻量化的应用在日常生活中被我们使用。在这些系统自带的软件中,计算器是我们能经常接触的,而笔者注意到,计算器的UI界面简洁美观,交互元素齐全,于是萌生了在DevEco Studio中自己设计计算器的UI界面的想法。

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

正文

   一般情况下,一个计算器的UI界面由显示台和按键区组成。显示台可以通过一个不含子组件的容器组件实现,而按键区则需要用到Table布局(即表格布局)。

   Table布局与其他布局形式的差别在于,它能通过表格的方式来划分子组件。而让按键区通过表格布局的方式来排布数目繁多的按键,则可以有效减少页面布局的复杂程度。Table布局通常带有的属性如下:

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

创建工程

  首先,我们选择Empty Ability,创建一个新的Java工程;

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

设计显示台

打开entry>src>main>java>resources>base>layout>ability_main_xml,将DirectionalLayout换成DependentLayout,并删除文件自带的文本内容为“Hello World”的Text组件,之后加入一个容器组件和一个Button组件;

 设置按键区中按键的背景元素

打开entry>src>main>java>resources>base>graphic,右击graphic,新建两个Graphic_Resource_File,其中一个命名为button,另一个命名为buttonspecial;

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

打开新建的button.xml,将文件中的代码改为如下代码:

再打开新建的buttonspecial.xml,将文件中的代码改为如下代码:

这样之后,按键的背景元素就设计好了;

设计按键区

打开entry>src>main>java>resources>base>layout>ability_main_xml,添加TableLLayout,使TableLayout内的组件能以4x5的表格形式排布;

接着,在TableLayout内加入20个Button组件。其中,前19个Button组件的背景引用button.xml内所定义的Button背景(背景色为黑色),而最后一个Button组件的背景则引用buttonspecial.xml内所定义的背景(背景色为绿色)。代码如下:

 效果

最后,打开Previewer查看效果。一个计算器的UI界面就诞生了。

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

结语

本期的知识分享在这就告一段落了。鉴于笔者能力有限,文章若有错误和不足之处,望读者指正。

【木棉花】知识分享——设计计算器的UI界面-鸿蒙开发者社区

相关知识

自学 UI 设计:从零开始的旅程
UI 设计的未来趋势:创新与技术的融合
UI设计师必备的色彩搭配理论-中国VI设计知识网
UI设计色彩搭配理论
UI 设计细节 1:颜色搭配的艺术
新手设计师必看:入门级 UI 设计工具推荐
基于深度学习的农作物叶片病害检测系统(UI界面+YOLOv5+训练数据集)
DIN5480花键计算器下载
UI设计师必备的配色理论
UI设计师必备的色彩搭配理论

网址: 【木棉花】知识分享——设计计算器的UI界面 https://m.huajiangbk.com/newsview542008.html

所属分类:花卉
上一篇: 未闻花名UI 易语言盒子UI 第
下一篇: 登录界面UI设计指南,跟着大厂学