当前课程知识点:移动快速应用开发 > 第二章石头剪刀布 > 石头剪刀布界面设计 > 石头剪刀布界面设计
好
大家好
在前面的内容里
我们已经介绍了APP Inventor的
顺序结构以及赋值语句
并完成了一个简单的案例
这一讲中我们将制作一个猜拳游戏APP
通过这个案例
我们主要学习以下这些内容
第一了解选择结构程序设计思想
第二
掌握随机数、对画框、图像组件的使用方法
第三
掌握简单界面布局的方法
任务叙述
在日常生活中我们经常会做猜拳游戏
通过剪刀石头布的规则定胜负
在这一讲中
我们来进行人机猜拳游戏
点击出去按钮
手机也会相应随机出拳
对话框会显示人的胜负
双方的比分会显示在界面上
最终运行界面如图所示
下面我来介绍人机猜拳程序的设计过程
一
用户界面设计
新建一个项目命名为Fingerguess
根据任务要求进行界面设计
在左侧组件面板中选择标签、按钮、图像和
水平布局四个组件
拖放至屏幕中
界面设计如图所示
新建项目Fingerguess进入工作面板后
我们要进行水平布局的设置
添加四个水平布局
添加完四个水平布局之后
我们要对水平布局的属性进行设置
我们把它的宽度设为充满高度
高度暂且不变
设置完水平布局之后
我们在水平布局里面添加
第一个水平布局里面添加的是图像
框一个
在第三个水平布局里面也要添加图像框
其他两个水平布局里面
我们添加的是标签和按钮
第二个
税务局里面我们添加的是三个标签
这添加三个标签什么作用
我们是起到了一个显示比分的作用
那么在第四个水平布局里面
我们添加的是三个按钮
这个按钮是起到一个什么作用
它起到的是一个显示我们的猜拳的剪刀
石头布的这样的一个图像的按钮
好
那么我们上传好这个图片以后
我们要对图片进行一个添加
那么我们首先看到我们的水平布局里面的
图像一
那么我们这个时候添加图片选择什么
我们选择的是
上传我们的添加素材里面的图片
上传以后大家可以看到说发现这个图片
比较的大
那么这个时候我们要将它的宽度和高度给
它设置一下
然后水平布局给它居中图像二要添加的也
是我们要选择的图像
那么我们这个地方可以添加的是我们要
显示的默认的这个值
添加一个剪刀
那么同样我们的设置的时候也要进行一个
高度和宽度的设置
然后在水平不及三里面
我们选择我们的水平居中
那么标签这个地方
我们选择水平布局里面的标签
那这个标签我们要显示的
比如说1:2或者是1:3
那么这个时候14这个字体有点小
我们选择大一点的54号字
然后这个地方的文本里面的标签的字就不要了
这个字就可以删掉
写成什么
写成默认的话
我们写个默认值0
然后颜色我们选择黑色
我们不太显眼
我们选择红色
那么同样标签二
我们这个地方也是要换成54号字体
因为14号字可能在显示的时候不是很
明显
然后我们这个地方同样把标签二的文本的
内容
这个地方写一个什么
文本内容是一个比分的这样的一个内容
然后颜色是红色
标签三也是同样设置
好
设置完以后
大家可以看到整个我们要把水平布局二
里面的内容我们给它居中
这样子比分就集中了
可以
你还可以怎么样
还可以对它的字体进行一个加粗
这样比分就显得更显眼一些
那么下面再看我们的按钮的按钮的操作
这个按钮我们也要去添加我们的图片进去
这个时候我们按纽一的文本就不要了
要为什么这个地方我们要先选择我们的
默认的图片
不一个
然后石头一个剪刀一个阿布
一个剪刀一个
然后石头一个同样把文本框二里面的内容
显示出来
默认的话都比较大
默认比较大
那么这个时候我们可以怎样去添加的时候
选择把它调小一点高度和宽度
我们这个地方选择50高度
然后宽度我们可以选择60
60
60
好
那么下面这个一样的
同样要把它换成
50
好
标签三
这个文本要把它删掉
因为我们显示的是以图片为显示
不以文字为显示
好
同样我们要把水平布局里面的居左改成
居中
大家可以看到我们的这三个都集中了
好
那么我们整体看一下我们的属性的设置的
时候
发现我们要系统和个人出拳的时候
我们可以发现它的有点太瘦了
不太好看
那么这个时候我们可以选择怎么样
这里面的放大缩小图片来适应尺寸
那么这样子的话看起来就美观一些
同样它下面小图标就不需要了
这样子看起来我们整个整体就好看一点
好
那么我们下面就来对水平布局
还有里面的图像、标签和按钮来进行一个重命名
首先我们来看一下这个图像
我们重命名的原则
就是我们的类型加上我们的名称吗
把它设置为图像
然后我们需要的是一个系统出拳的这样的
一个名称
我们上面的需要的是系统出拳的名称
下面一个我们的标签会显示系统得分
标签显示系统得分
这个标签我们的名字就是冒号
下面一个就是我们的自己的选手的得分
好
下面我们来对第二个图像来进行一个命名
这个命名它是针对的是我们的个人出拳
好
那么下面还要针对我们三个按钮
这三个按钮是我们以图像显示的
第一个显示的名显示的为名称
第一个是不
第二个是剪刀
第三个是拳头
是吧
按钮1就是布 按钮2就是剪刀
按钮3就是拳头
石头
好确定
好
确定好以后
我们这个地方还需要一个组件
这个组件是什么
组建就是我们的对话框
这个对话框它要拉进来的时候也是一个非
可视化的组件
那么这个对话框用于显示就是比分输赢的
那么这个地方我们也不需要对它进行更名
比如说人赢了还是系统赢了
那么他会有一个提示
谢谢大家的收看
再见
-App Inventor简介
-第一个应用-喵喵叫的小猫
--喵喵叫的小猫
-App Inventor的调试方法
-作业--作业
-拓展练习
-石头剪刀布界面设计
-选择结构
--选择结构
-组件介绍
--组件介绍
-石头剪刀布逻辑设计
-作业--作业
-计算器的界面设计
--计算器的界面设计
-过程的定义
--过程的定义
-实现整数运算的计算器
-带小数点的计算器
--带小数点的计算器
-代码测试
--代码测试
-作业--作业
-我的词典界面设计
--我的词典界面设计
-语言翻译
--语言翻译
-文字朗读
--文字朗读
-语音识别
--语音识别
-作业--作业
-绘图板界面设计
--绘图板界面设计
-手指作画
--手指作画
-精灵画圆
--精灵画圆
-绘图的保存
--绘图的保存
-作业--作业
-社交应用界面设计
--社交应用界面设计
-拨号并收发短信
--拨号并收发短信
-短信的分类保存
--短信的分类保存
-短信的选择与删除
--短信的选择与删除
-作业--作业
-条码扫描器
--条码扫描器
-申请Web-API的步骤和调试方法
-Web客户端
--Web客户端
-JSON格式数据的解析方法
-扫码识物
--扫码识物1
--扫码识物2
-作业--作业
-人工智能技术介绍
--人工智能技术介绍
-扫描仪界面设计
--扫描仪界面设计
-百度AI 函数介绍
-扫描仪的代码实现
--扫描仪的代码实现
-作业--作业
-拓展练习