Toggle navigation
首页
问答
文章
积分商城
专家
专区
更多专区...
文档中心
返回主站
搜索
提问
会员
中心
登录
注册
柿饼_PersimmonUI
【PersimmonUI柿饼学习营】+ DaZhou+ 手把手教你做计算器
发布于 2018-08-31 12:12:12 浏览:3550
订阅该版
这两天又被柿饼UI的强大惊到了,营里面发的第二篇教程,寥寥几字就教会我们最一款强大的计算器,而且不用写一丁点C代码,说的我都激动了。下面先上成果视频,还是放到GitHub上面了,有需要的请先移步GitHub,看完之后我再教您一步步做这样的计算器。 [GitHub工程代码、视频仓](https://github.com/2SCZhou/PersimUI_learn.git) 先讲一下大致的思路,做到胸中有丘壑,然后再按照思路一点点完善。 1. 屏幕不支持竖屏显示,所以要准备一张W x H 为800*480的计算器UI图片。为什么要这么准备呢?这里面是有学问的。横屏显示的计算器UI先不说做出来按键手感如何,界面处理不好,一定会非常丑。我们先算笔帐:H为480,去掉一个合理大小的结果显示框,大概还能有300左右的按键显示区,也就是按键显示区的高大概为300左右。您不能整个800的宽吧?做出来肯定巨丑。说到美,您想到了什么?是黄金分割比吗?聪明,没错,就是 0.618,宽长之比!这样算出来大概在485左右。好了,这两个关键数据出来一切都好做了!再细想下去,剩下的部分怎么处理?不能都留白吧,那做出来肯定也是巨丑!这就得加上背景渲染了,铺满整个剩下的空间,这样做出来才好看。 2. 漂亮的UI有了,第二部叫要考虑用户的使用体验了。有哪些体验?不能计算错是最基本的吧,手指触感反馈得令人舒服吧。其实作为一个项目,做好这两点需求基本就够了,说做奇技淫巧的请滚粗,这项目给多少钱我也不接!具体落实下来,代码无BUG,按键大小得照顾到大部分人的手指尖大小,键按下去,得有按压反馈吧,不考虑震动反馈,得有色变反馈吧! 3. 小结一下:以上两步,貌似给我一个嵌入式开发工程师没关系吧,我TM看错页面了?怎么讲的都是UI设计师的事情呢?对喽!您没看错!这就是柿饼UI强大的地方!您要是做过团队老大,您现在就能理解我飞一样的心情了!把这些工作交给团队内专业的UI设计,让他们出苦力,我们就写一点点JS代码,还能对外宣称UI开发得3天,代码得10天(其实1小时)。哈哈,钱跟捡的一样。。。 感谢柿饼的强大! 好了,项目大致规划好了,我们开始一步步做吧: 1. 计算器UI准备 我不是专业UI设计,我也就嘴上说的好,各位看到了不要笑我的调色  一开始从小米手机自带的计算器UI抠图,结果屏幕不支持竖屏,做出来效果也不好,就从WIN10自带计算器扣的图,处理了一下。 这种色调,我觉得配下图的按键变色反馈会好一点。  2. 新建工程,新建一个page1,并把page1的背景图片设置为上面UI图片如下图所示:  3. 为每一个按键铺设实体按键,大小正好能覆盖上面的每个键大小,如下图所示:  然后更改按键的属性,其实这些软件都是这套路,老掉牙,没啥难的。这里说下要注意的点:在柿饼UI工具中,每个空间都有自己唯一的名字,这个不能重复!把这个button的名称设置为num1,然后再在调用属性里面填上C语言中所谓的handler,就是按键按下去的时候,会调用这个函数进行处理。 再处理按键反馈的效果实现,透明度设置为0,此时的按键就透明了,就能显现下面的UI图片了。删除按键的“显示图片”,同时删除按键的文本显示,此时效果如下:  再把按键的“点击图片”换成我们上面准备的按压反馈图片,这样就能实现按下反馈了。效果如下: 由于人的视觉暂留效果,按下去,这个图片会一闪,色彩非常好,按下时,人的心理反馈也很好。 下面是按键属性的设置:  差不多了,就这样把每个按键都处理一下,想想UI是不是很苦逼,没有我们用代码发现计算机的美那样高大上:lol。 4. 下面就是代码处理部分了,这里只用写JS代码就可以了。JS是面向对象的脚本语言,这就注定了他简单轻量,编程高效。具体代码实现请看GitHub中page1.js 此处不再赘述。 好了,看完之后,你要是能感觉到整篇文章是为UI设计写的,你就能感受到柿饼UI工具的强大!基本不需要什么编程工作,做出来的效果还这么骚!在不知道开发过程的情况下,你能知道我的计算器是我一个人花了3个小时做成的(2个半小时做UI)?如果我有个团队,时间是不是更充分?做的效果更好? 期待柿饼UI正式发布! DaZhou
查看更多
2
个回答
默认排序
按发布时间排序
flyboy
2018-08-31
Do my self();
猴赛雷啊!
DaZhou
2018-08-31
这家伙很懒,什么也没写!
[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=37582&ptid=7913][color=#999999]flyboy 发表于 2018-8-31 15:42[/color][/url][/size] 猴赛雷啊![/quote] 类猴!
撰写答案
登录
注册新账号
关注者
0
被浏览
3.6k
关于作者
DaZhou
这家伙很懒,什么也没写!
提问
10
回答
49
被采纳
0
关注TA
发私信
相关问题
1
【PersimmonUI柿饼学习营】+ A Byte of China + 环境搭建&20W年薪广告
2
【柿饼学习营】+werrysuzhen+20W年薪作业
3
【PersimmonUI柿饼学习营】+ meetwit + 20W年薪广告&lesson01
4
【PersimmonUI柿饼学习营】+ DaZhou + 20W年薪作业+视频有彩蛋
5
【PersimmonUI柿饼学习营】+ DMY+ lesson01 20W年薪广告
6
【PersimmonUI柿饼学习营】+ Bigmagic+20W年薪广告&day01
7
【PersimmonUI柿饼学习营】+ chowguohua+年薪广告
8
【柿饼学习营】+werrysuzhen+脚本及事件学习
9
【PersimmonUI柿饼学习营】+ A Byte of China + 2048游戏
10
【PersimmonUI柿饼学习营】+ DaZhou + 2048游戏 + 一周感悟
推荐文章
1
RT-Thread应用项目汇总
2
玩转RT-Thread系列教程
3
机器人操作系统 (ROS2) 和 RT-Thread 通信
4
五分钟玩转RT-Thread新社区
5
国产MCU移植系列教程汇总,欢迎查看!
6
【技术三千问】之《玩转ART-Pi》,看这篇就够了!干货汇总
7
关于STM32H7开发板上使用SDIO接口驱动SD卡挂载文件系统的问题总结
8
STM32的“GPU”——DMA2D实例详解
9
RT-Thread隐藏的宝藏之completion
10
【ART-PI】RT-Thread 开启RTC 与 Alarm组件
最新文章
1
github高阶加速,速度可达带宽峰值,测试到146Mbit/s
2
英飞凌携手RT-Thread举办嵌入式网络应用开发沙龙,带你从0到1搭建智能数据网关
3
BL808 RT-Thread Wi-Fi 驱动适配
4
rt-thread 系统运行期改变网卡配置
5
简单的步进电机驱动调试
热门标签
RT-Thread Studio
串口
LWIP
Env
AT
SPI
Bootloader
FinSH
ART-Pi
CAN总线
Hardfault
USB
文件系统
RT-Thread
DMA
SCons
线程
MQTT
RT-Thread Nano
STM32
RTC
ESP8266
rt-smart
flash
ota在线升级
WIZnet_W5500
FAL
I2C
packages_软件包
UART
cubemx
freemodbus
潘多拉开发板_Pandora
定时器
BSP
PWM
ADC
socket
中断
rt_mq_消息队列_msg_queue
keil_MDK
SDIO
Debug
AB32VG1
MicroPython
C++_cpp
编译报错
msh
QEMU
ulog
本月问答贡献
出出啊
1500
个答案
338
次被采纳
小小李sunny
1389
个答案
276
次被采纳
张世争
714
个答案
157
次被采纳
crystal266
522
个答案
153
次被采纳
whj467467222
1216
个答案
146
次被采纳
本月文章贡献
出出啊
1
篇文章
12
次点赞
小小李sunny
1
篇文章
1
次点赞
张世争
2
篇文章
1
次点赞
crystal266
2
篇文章
5
次点赞
whj467467222
2
篇文章
1
次点赞
回到
顶部
发布
问题
分享
好友
手机
浏览
扫码手机浏览
投诉
建议
回到
底部