当前课程知识点：移动快速应用开发 > 第二章石头剪刀布 > 石头剪刀布界面设计 > 石头剪刀布界面设计
好
大家好
在前面的内容里
我们已经介绍了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 函数介绍
-扫描仪的代码实现
--扫描仪的代码实现
-作业--作业
-拓展练习
