当前课程知识点：移动快速应用开发 > 第三章 我的计算器 > 计算器的界面设计 > 计算器的界面设计
大家好
在上一讲中
我们介绍了彩票APP的开发
本单元我们将讲解算术计算器的开发
1 掌握三种界面布局方式
2 掌握过程的定义
3 学会软件测试方法 解决软件的BUG
一 界面布局组件界面布局
组件是设计界面时 用来安排组件排列规则
的组件
包括水平布局
垂直布局和表格布局三种类型
（1）水平布局
通过水平布局组件可以实现内部组建自左
向右的水平排列
（2）垂直布局
通过垂直布局组件可以实现内部组件
自上而下的垂直排列
最先加入的组件在顶部
后面加入的组件依次向下排列
（3）表格布局
表格布局用于使内部组件按照表格方式
排列
在表格布局组件中
组件按照表格的行和列
即单元格排列
弱多个组件占据同一个单元格
则只要最后一个组件可见
在每一行所有在垂直方向上居中对齐
在此前的例子中
我们已经用过了水平布局
在计算机案例中将使用到表格布局
下面我将进行界面设计
这是我们做好的一个应用界面
我们使用到了一个标签
一个含有16个按钮的表格布局
和一个水平布局里面的按钮等
下面我来开始整个操作
新建一个文件
我们命名为counter
首先我们拖入一个标签
标签是我们显示的最后的一个节运算的
结果
文本栏 为空
我们设置它的高度为50像素
它的宽度为175像素
那么这是我们的一个显示结果
我们拖入表格布局
把列数设为四
行数设为四
这样表格布局里面会是四行四列
添加一个按钮
设置它的高度为40像素
设置它的宽度为40像素
把它的文本设为七
这样我们就完成了一个按钮的一个设计
按照相同的办法完成整个界面的设计部分
好
现在我们基本上完成了表格布局里面16
个按钮的设置
下面我们添加等于号
选择水平布局
设它的高度为45像素
它的宽度为175像素
拖入一个按钮
它的高度为充满
宽度为充满
里面的文字为等于
我们把它加上粗体
把它字号变大一点
变成24
好
我们可以看到等于号变粗了
一般情况下
标签这个地方我们都会有个默认值为零
我们添加0
这是我们设置它的字号也为24
出题
在计算器当中我们一般数字零是在右边
所以我们选择文本对齐
畏惧又表格布局
那么设计完毕了
下面我们得给它设置它的一些命名
当界面设计完成以后
为了便于以后的操作
我们需要给每个按钮进行重命名
选择标签
点击重命名
我们命名为标签显示
按照同样的原则
我们把按钮一重命名为数字七
所有的按钮
我们从命名完成以后
界面设计部分到此结束
同学们
这节课我们完成了计算器的界面设计
介绍了表格布局
下次课我们将进行逻辑设计
谢谢大家收看
再见
-App Inventor简介
-第一个应用-喵喵叫的小猫
--喵喵叫的小猫
-App Inventor的调试方法
-作业--作业
-拓展练习
-石头剪刀布界面设计
-选择结构
--选择结构
-组件介绍
--组件介绍
-石头剪刀布逻辑设计
-作业--作业
-计算器的界面设计
--计算器的界面设计
-过程的定义
--过程的定义
-实现整数运算的计算器
-带小数点的计算器
--带小数点的计算器
-代码测试
--代码测试
-作业--作业
-我的词典界面设计
--我的词典界面设计
-语言翻译
--语言翻译
-文字朗读
--文字朗读
-语音识别
--语音识别
-作业--作业
-绘图板界面设计
--绘图板界面设计
-手指作画
--手指作画
-精灵画圆
--精灵画圆
-绘图的保存
--绘图的保存
-作业--作业
-社交应用界面设计
--社交应用界面设计
-拨号并收发短信
--拨号并收发短信
-短信的分类保存
--短信的分类保存
-短信的选择与删除
--短信的选择与删除
-作业--作业
-条码扫描器
--条码扫描器
-申请Web-API的步骤和调试方法
-Web客户端
--Web客户端
-JSON格式数据的解析方法
-扫码识物
--扫码识物1
--扫码识物2
-作业--作业
-人工智能技术介绍
--人工智能技术介绍
-扫描仪界面设计
--扫描仪界面设计
-百度AI 函数介绍
-扫描仪的代码实现
--扫描仪的代码实现
-作业--作业
-拓展练习
