3

知识分享—设计计算器的UI界面

 2 years ago
source link: https://os.51cto.com/article/703001.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
知识分享—设计计算器的UI界面-51CTO.COM
知识分享—设计计算器的UI界面
作者：木棉花小蓝 2022-03-02 15:35:57
一个计算器的UI界面由显示台和按键区组成。显示台可以通过一个不含子组件的容器组件实现，而按键区则需要用到Table布局（即表格布局）。

55797d2282f1305e80343570385b1c9f49c17f.png

​​想了解更多内容，请访问：​​

​​51CTO和华为官方合作共建的鸿蒙技术社区​​

​​https://ost.51cto.com​​

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

b1e9a5d1176ca701f7540934ea6a2977f54504.jpg

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

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

b44db9d98841bf6917c561291ef1111519c46e.jpg

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

c66743107041193a144327305e660719f552fc.jpg

设计显示台

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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout                                           //将DirectionalLayout改为DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <DirectionalLayout                              //设置不含子组件的容器组件（这里以DiretionalLayout为例）
        ohos:background_element="gray"        //背景色设为灰色
        ohos:height="295vp"
        ohos:width="match_parent"
        ohos:id="$+id:box"/>                 //设置id号
    <Button                                          //设置一个无点击效果的按钮组件
        ohos:below="$id:box"                    //使该组件处在id号为“box”的组件的正下方
        ohos:height="35vp"
        ohos:width="match_parent"
        ohos:id="$+id:board"                        //设置id号
        ohos:background_element="white"/>

</DependentLayout>

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

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

a29d7be490374239f08486319d90e67697922f.jpg

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

<?xml version="1.0" encoding="utf-8"?> 
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">     //将Button的形状设置为圆形
    <solid
        ohos:color="black"/>   //将Button的背景色设置为黑色
</shape>

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

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">    //将Button的形状设置为圆形
    <solid
        ohos:color="green"/>    //将Button的背景色设置为绿色
</shape>

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

设计按键区

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

 <TableLayout                        //设置Table布局
        ohos:below="$id:board"      //使TableLayout处在id号为“board”的组件的正下方
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:row_count="5"                  //设置行数
        ohos:column_count="4">          //设置列数

</TableLayout>

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

<Button
            ohos:height="80vp"               
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="C"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="del"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="%"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="/"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="7"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="8"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="9"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="X"
            ohos:text_color="white"
            ohos:text_size="35vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="4"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>

        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="5"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="6"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>

        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="—"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="1"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="2"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="3"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>

        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="+"
            ohos:text_color="white"
            ohos:text_size="55vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="Exit"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="0"
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:button"
            ohos:text="."
            ohos:text_color="white"
            ohos:text_size="30vp"
            ohos:margin="5vp"/>
        <Button
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:background_element="$graphic:buttonspecial"
            ohos:text="="
            ohos:text_color="white"
            ohos:text_size="55vp"
            ohos:margin="5vp"/>

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

a6c23f0961f659bcd8106032fa58dac4c7f36d.png

本期的知识分享在这就告一段落了。

​​想了解更多内容，请访问：​​

​​51CTO和华为官方合作共建的鸿蒙技术社区​​

​​https://ost.51cto.com​​

546cdda2700ce6739ad05949479f5fd1c8ace1.jpg

责任编辑：jianghua 来源： 鸿蒙社区
zanpc.bd208a1.pngzanpchover.fdd60ba.png
weixin.23cd8b3.png 分享到微信
weibo.16d6b4f.png 分享到微博

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK