当前课程知识点：移动快速应用开发 > 第五章 我的绘图板 > 绘图板界面设计 > 绘图板界面设计
大家好
从这一讲开始
我们将进行新的APP绘图板的开发
通过这个事例我们将学习以下内容
第一 掌握绘图动画模块中的画布和球形精灵组件的用法
第二
掌握对话框和滑动条组件的用法
第三
掌握屏幕跳转和数值传递的方法
让我们先来看一下APP的界面
任务要求
通过滑动屏幕可以实现手指绘图功能
点击屏幕下方的 精灵画圆
清除屏幕
保存图像按钮
分别实现绘制实心圆
清除屏幕中的内容
以及保存等功能
点击画布设置按钮
可跳转到 seetings 屏幕
通过拖动滑块设置画笔宽度
并查看效果
点击确定按钮
返回 Screen1 屏幕
并保存画笔设置
下面我们就将完成绘图版的界面设置
1 用户界面设计
新建一个项目命名为 draw
根据任务要求进行组件设计
在左侧组件栏中选择相应的组件拖入屏幕中
由于对话框组件是非可视组件
因此显示在屏幕下方
大家用自己的账号登录开发网站之后
新建一个项目
项目名字叫 draw
那么我们下面来进行界面设计
首先添加一个水平布局
设置水平布局的高度和宽度
水平布局的高度
我们设置为75%的比例
宽度
我们设置为充满
再添加我们的画布组件
添加到我们的布局中去
那么设置画布组件的高度和宽度都为充满
那么将我们的画笔颜色设置为绿色
接着再向其中添加我们的球形精灵
设置球形精灵的半径为20
可见性不勾选
坐标
只要放置在我们的画布当中就可以了
接着我们再添加第二个水平布局
设置水平布局的高度
比例为15%
设置宽度为充满
设置为居中对齐
水平居中对齐
垂直居中对齐
那么在第二个水平布局中
我们需要添加四个按钮
下面我们为按钮1
设置文本
文本名为精灵画圆
设置按钮2的文本为画布设置
按钮3的文本
为清除屏幕
按钮四的文本
我们设置为保存图片
由于我们四个按钮设置在水平布局中
那么为了保证美观
我们可以将每个按钮的形状设置为圆角模式
下面我们将再添加两个非可视化组件
计时器
用于产生时间间隔的定时事件
再添加一个对话框
用于产生保存图像完成的提示信息
其中对话框我们不做任何的修改
计时器中的一直计时和启用计时两个复选框
必须全部勾选
同时将计时间隔设置为2000
下面我们设置第二个屏幕
点击增加屏幕
设置屏幕的名称为Settings添加标签设置
标签的宽度为充满
设置文本
为设置画笔宽度
添加一个水平布局
设置水平布局的高度为75
宽度为充满
在水平布局中添加画布
设置画布的高度和宽度都为充满
设置画笔
颜色为绿色
接着在水平布局的下方添加一个标签
设置标签的宽度为充满
设置文本为拖动滑块
设置画笔粗细
接着添加滑动条
设置滑动条
左侧颜色为红色
右侧颜色为绿色
宽度为充满最大值设置为10
最小值设置为2
那么由于现在默认的屏幕已经被我们使用
所以下面我们还要点击Settings屏幕
将Settings屏幕中的允许滚动勾选
我们继续向下方添加我们的水平布局
设置水平布局对齐方式都为居中
高度为10
宽度充满将一个按钮添加到第二个水平布局中
文本设置为确定
文本的对齐方式
可以设置为居中
至此我们的界面设置完成
这一讲我们实现了游戏的界面设计
下一讲中我们将完成各种功能的逻辑代码设计
感谢大家观看
再见
-App Inventor简介
-第一个应用-喵喵叫的小猫
--喵喵叫的小猫
-App Inventor的调试方法
-作业--作业
-拓展练习
-石头剪刀布界面设计
-选择结构
--选择结构
-组件介绍
--组件介绍
-石头剪刀布逻辑设计
-作业--作业
-计算器的界面设计
--计算器的界面设计
-过程的定义
--过程的定义
-实现整数运算的计算器
-带小数点的计算器
--带小数点的计算器
-代码测试
--代码测试
-作业--作业
-我的词典界面设计
--我的词典界面设计
-语言翻译
--语言翻译
-文字朗读
--文字朗读
-语音识别
--语音识别
-作业--作业
-绘图板界面设计
--绘图板界面设计
-手指作画
--手指作画
-精灵画圆
--精灵画圆
-绘图的保存
--绘图的保存
-作业--作业
-社交应用界面设计
--社交应用界面设计
-拨号并收发短信
--拨号并收发短信
-短信的分类保存
--短信的分类保存
-短信的选择与删除
--短信的选择与删除
-作业--作业
-条码扫描器
--条码扫描器
-申请Web-API的步骤和调试方法
-Web客户端
--Web客户端
-JSON格式数据的解析方法
-扫码识物
--扫码识物1
--扫码识物2
-作业--作业
-人工智能技术介绍
--人工智能技术介绍
-扫描仪界面设计
--扫描仪界面设计
-百度AI 函数介绍
-扫描仪的代码实现
--扫描仪的代码实现
-作业--作业
-拓展练习
