【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设计，我也就嘴上说的好，各位看到了不要笑我的调色
               ![Calculator.png](/uploads/201808/31/114319w8iae3g0tiywa08k.png)
               一开始从小米手机自带的计算器UI抠图，结果屏幕不支持竖屏，做出来效果也不好，就从WIN10自带计算器扣的图，处理了一下。
               这种色调，我觉得配下图的按键变色反馈会好一点。
               ![2.png](/uploads/201808/31/114446b0p20ihjy1biy0h0.png)

2. 新建工程，新建一个page1,并把page1的背景图片设置为上面UI图片如下图所示：
               ![1535687273(1).jpg](/uploads/201808/31/114950vo5dw5d6zogwec6o.jpg)

3. 为每一个按键铺设实体按键，大小正好能覆盖上面的每个键大小，如下图所示：
               ![1535687530(1).png](/uploads/201808/31/115232tog3tzo7tppbmtyt.png)
            然后更改按键的属性，其实这些软件都是这套路，老掉牙，没啥难的。这里说下要注意的点：在柿饼UI工具中，每个空间都有自己唯一的名字，这个不能重复！把这个button的名称设置为num1，然后再在调用属性里面填上C语言中所谓的handler，就是按键按下去的时候，会调用这个函数进行处理。
            再处理按键反馈的效果实现，透明度设置为0，此时的按键就透明了，就能显现下面的UI图片了。删除按键的“显示图片”，同时删除按键的文本显示，此时效果如下：
               ![1535687979(1).png](/uploads/201808/31/115957l37chpatoac8c36d.png)
            再把按键的“点击图片”换成我们上面准备的按压反馈图片，这样就能实现按下反馈了。效果如下：
               ![1535688106(1).jpg](/uploads/201808/31/120204foyr06ob0dddo0dr.jpg)由于人的视觉暂留效果，按下去，这个图片会一闪，色彩非常好，按下时，人的心理反馈也很好。

下面是按键属性的设置：
               ![1535688250(1).jpg](/uploads/201808/31/120426ant76o4zgmn9xn5u.jpg)![1535688298(1).jpg](/uploads/201808/31/120514edye5s8usrrf0es8.jpg)

差不多了，就这样把每个按键都处理一下，想想UI是不是很苦逼，没有我们用代码发现计算机的美那样高大上:lol。

4. 下面就是代码处理部分了，这里只用写JS代码就可以了。JS是面向对象的脚本语言，这就注定了他简单轻量，编程高效。具体代码实现请看GitHub中page1.js 此处不再赘述。

好了，看完之后，你要是能感觉到整篇文章是为UI设计写的，你就能感受到柿饼UI工具的强大！基本不需要什么编程工作，做出来的效果还这么骚！在不知道开发过程的情况下，你能知道我的计算器是我一个人花了3个小时做成的（2个半小时做UI）？如果我有个团队，时间是不是更充分？做的效果更好？
        期待柿饼UI正式发布！

DaZhou