自学鸿蒙应用开发（20）- UI布局实战练习

自学鸿蒙应用开发（20）- UI布局实战练习

首先是画面布局的表示结果：

在设计这个布局的时候，最主要的考虑是布局的伸缩性，也就是说当屏幕的分辨率发生变化时，希望可以保证每个组件尽量可以正确表示。

画面背景

全体背景画面的背景使用了一个具有条纹的黑色背景Plastic.png

使用该图像的布局代码如下：

如第6行所示，直接将background_element只想保存于media目录之下的图像文件即可。

组件大小调整策略

开发程序需要考虑不同分辨率情况下的表示结果，因此应该尽量避免减少采用直接值的情况。本例使用如下策略：

垂直方向：为了保证数据的显示效果，包含输入表达式和结果的布局按照TextFileld来决定高度；其他所有的按钮行使用按照固定比例分配高度。

水平方向：TextField占满屏幕，其他所有按钮行占满屏幕宽度，其中的按钮按照固定比例分配空间。

定制Checkbox

我们希望定制上档键的表示方式，因此文字和标记的颜色进行了定制。首先是文字的颜色，可以通过布局文件指定选中和非选中状态的颜色，具体如下面代码第10行和第11行所示：

但是很遗憾，好像只能通过代码指定标记颜色方法，具体如下面代码所示：

ShapeElement elementButtonOn = new ShapeElement();elementButtonOn.setRgbColor(RgbPalette.GREEN);elementButtonOn.setShape(ShapeElement.RECTANGLE);ShapeElement elementButtonOff = new ShapeElement();elementButtonOff.setRgbColor(RgbPalette.WHITE);elementButtonOff.setShape(ShapeElement.RECTANGLE);StateElement checkElement = new StateElement();checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);Checkbox checkbox = (Checkbox) findComponentById(ResourceTable.Id_check_box);checkbox.setButtonElement(checkElement);

相似的功能，必须使用两种方式设定。略微有点不爽。

实际的动作效果如下：

Checkbox Customize

定制按钮

布局中通过背景组件指定按钮的形状，圆角半径，内部颜色以及边界线宽度和颜色。

关于TableLayout

按照正常的想法，功能按钮，数字按钮分区更应该使用TableLoyout而不是为每行指定一个DirectionLayout。但是作者在使用该布局时遇到了一个问题：无法让布局中的组件按照比例分配空间，只能设定固定坐标。而坐标单位又有没有按照屏幕比例分配的类型，无论如何也不能实现根据分辨率自动调节组件大小的功能，因此只能放弃使用TableLayout。希望今后可以支持这种用法。

布局代码

以下是实际的布局代码ability_main.xml，仅供参考：

新书介绍

​​《实战Python设计模式》​​是作者最近出版的新书，拜托多多关注！

本书利用Python 的标准GUI 工具包tkinter，通过可执行的示例对23 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题；另一方面通过对这些问题的解决过程进行说明，让读者明白在编写代码时如何判断使用设计模式的利弊，并合理运用设计模式。

对设计模式感兴趣而且希望随学随用的读者通过本书可以快速跨越从理解到运用的门槛；希望学习Python GUI 编程的读者可以将本书中的示例作为设计和开发的参考；使用Python 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础，迅速构建自己的系统架构。

觉得本文有帮助？请分享给更多人。

面向对象开发，面向对象思考！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。