涂鸦板1:用户界面

从这节课开始,我们用10集的容量,来讲解一款绘图应用,先来看看它的功能......

创建新的项目——涂鸦板,并部署与调色板相关的布局组件,看看如何表现数字滑动条所对应的颜色......

继续添加设置画笔线宽的组件......

原计划这节课可以实现两项功能——设置画布的画笔颜色以及画笔线宽,不料页面布局的任务如此繁琐,耗费了10多分钟时间。为了控制一节课的容量,决定这节课就到这里,都没来得及说再见......

问题:

应用中的现有组件的布局设置,是否能够适应不同宽度的手机屏幕?

作业:

按照第一段视频中用户界面的样式,试着将画布及画布下方的9个按钮组件添加到项目中。为了便于大家完成作业,这里将项目中的全部组件列在表格中,供参考。

报告:

截至2016年11月7日,总订阅人数增至1591位,这个周末净增22位,感谢大家的关注与支持。

(0)

相关推荐

  • Utopia

    今天,我们宣布的乌托邦的阿尔法版本,一个设计和编码环境的反应项目和组件,运行在浏览器.它结合了 VSCode 与设计和预览工具,以及完全双向同步:设计和代码实时更新.与任何设计工具不同,它使用反应代码 ...

  • Python 创建用户界面之 PyQt5 的使用

    之前给大伙介绍了下 tkinter,有朋友希望小帅b对其它的 Python  GUI 框架也说道说道,那么今天就来说说 PyQt5 如何创建用户界面. Qt 是用 C++ 写的开发工具,其中包含一个非 ...

  • Angular、React 和 Vue 三大框架,Web 开发该如何选择?

    终端研发部 1周前 前言 随着社交媒体和用户生成内容的爆炸式增长,互联网正在向更好的方向发展.为了跟上时代发展的步伐,提供更好的交互性,开发人员开始构建库和框架来简化交互式站点的构建.2006 年,J ...

  • 涂鸦板2:时间的秘密

    在上节课基础上,添加画布及按钮组件,注意对按钮组件宽度的设置...... 在添加了可视组件后,还须添加项目中唯一的非可视组件...... 为了便于大家理解计时器中"时间点"的概念, ...

  • 涂鸦板3:画笔设置

    在应用的用户界面设计完成之后,我们开始编写程序,逐步实现涂鸦板的功能. 首先要设置画笔的颜色,这正是我们熟悉的调色板功能.与此前的调色板项目对比,留心代码是如何被简化的...... 提示: (1)将重 ...

  • 涂鸦板4:选中按钮

    在项目中有六个功能按钮,它们定义了画布可以绘制的图形种类,并分别被命名为直线.曲线.方形.方块.圆形以及圆点.为了提示用户当前正在绘制的图形,我们让被选中的按钮处于不可用状态,即,设置该按钮的启用属性 ...

  • 涂鸦板5:方块与圆点

    在上节课中,我们只是设置了画布的画笔颜色及画笔线宽属性,还不曾领略画布的真正威力!从这节课开始,我们将体验画布的强大功能.画布可以用于创作(即将完成的涂鸦板),也可以用来开发游戏类应用(<App ...

  • 涂鸦板6:绘制曲线

    在涂鸦板应用中,用户需要设置画笔的颜色和线宽,点击"曲线"按钮,并用手指在手机的屏幕上拖动,此时,画布上会留下一道轨迹,我们称之为曲线.一旦实现了绘制曲线的功能,你几乎可以绘制任何 ...

  • 涂鸦板7:直线与方形

    "两点确定一条直线"是欧几里德几何学的公理之一,也是我们在画布上绘制直线的原理.这里所说的直线,并非几何学中定义的无限延长的直线,而是有起点和终点的线段. 两点不仅可以确定一条直线 ...

  • 涂鸦板8:绘制圆形

    App Inventor的画布组件已经内置了画园的功能,当已知圆心坐标及圆的半径时,就可以绘制一个实心圆或空心圆. 涂鸦板应用中,当用户选中了"圆形"按钮后,手指在屏幕上落下的点, ...

  • 涂鸦板9:保存作品

    我们已经完成了涂鸦板应用的绘画功能,你是否开始了自己的创作活动呢?或者,是否有小朋友参与到创作活动中了呢?将那些充满童趣的作品保留起来,在不久的将来,或许可以给已经长大成人的他(她)们一份温馨的回忆呢 ...

  • 涂鸦板10:课程小结

    App Inventor的画布组件可以将画布上绘制的图形以文件的形式保存到手机中,那么这个文件究竟存放在哪里呢? 涂鸦板的应用讲完了,你是否也完成了整个的应用呢?完成这样一个应用之后,你有哪些收获,又 ...