【PersimmonUI柿饼学习营】+ DaZhou + 仿MacOS风格平板界面

2018-9-12 17:50 [复制链接] 3 1717

       时间过的真快,不知不觉间学习柿饼UI半个月了,这是我发表的第四篇帖子了。这次任务是做一款平板界面,用到了很多新特性,让我们闲话少叙,一起来再次见识柿饼UI工具的强大。国际惯例,下面是我此次的工程代码和效果视频,大家可以先下载查看。小道消息,柿饼UI工具马上就要公开了,大家先学先受益呦。
; _, P* x6 m( j  A& T       GitHub工程代码、视频仓! y( w5 j: S4 n+ t6 |6 u
6 B; x: N& |4 s2 u( _9 n2 o
       这次还是介绍操作的关键部分,即一些新的技能。其他基础操作请查阅我之前的相关帖子。一个是ListCtrl组件,它实现了和安卓ListView类似的列表拖拽功能,详见视频(弹,弹,弹,弹走鱼尾纹。就是这种感觉)我就问一下,其他基于单片机的UI设计工具,有这样的功能吗?或者能这样简单实现吗?另外一个是,柿饼UI允许自定义UI模块,供其他窗口调用,详见视频Seting那段的实现效果。
  V( g, ]4 R2 d6 s0 [4 v7 u! p( _7 d! s9 [
       首先,再一个窗口上,铺满整个ListCtrl,做成透明的效果,这个ListCtrl就是一个大载体,这个大载体实现列表左右或者上下的拖动效果。然后再在它上面铺满一个Panel,可以把它理解为一个能装很多控件的大容器,在里面放置我们项目需要的很多Button。效果如下图:' T1 L: X  D* L. T$ |( @
         1536745051(1).jpg ; u2 `$ ]) v3 R- d/ M% @9 k

% \. _% Q* b$ W+ z2 r        我们再来看一下,自定义面板的功能,先看下面的图,方框中为自定义的界面图,我的美工水平比较低,在专业的美工做下来,做的肯定非常有质感。& V. |3 K! O; C1 ]; C# Q! y
         1536745185(1).jpg $ n* D% ~2 ~4 `5 q- z
        请自行脑补一下,拖动安卓手机设置列表的感受,柿饼UI做出来的效果能同样提供给你。0 y3 Q" M" E. P" d6 d9 ^
        这里主要讲一下自定义UI怎么在JS中被调用,下面是关键代码:
; u0 i+ K4 n( q* ]: _& \  H9 X         1536745540(1).png
( s( ^" K; B) F" @8 w2 v0 m1 R* o        在哪个界面调用,就在那个page.js文件内加上上述代码。onLoad键在该页面被加载的时候被执行。! |8 P; x1 w% s9 u  Q$ l2 n
' U! w: X  k# U: D

$ Z( H, x( D. w' A. A3 ]         感觉这次帖子写的有点水,实在是心里有种“祥林嫂“的感觉。
1 x, |- E" {! x2 I0 s7 _: D; g6 }* U( f8 m  ^2 {6 q) s) W
DaZhou& a; T  _& t" J

" U- @0 w4 J9 I( ]4 @% l  e+ a' U; R% f  N* r; d
+ B: z) |0 r5 W3 E& N5 c4 @/ a

; K+ J0 S0 S1 f
, D0 O  F! c1 m* F# O
# x) \3 r2 [, }0 y" S  T
( n8 F! F* M  V! D) f9 l- \$ ~
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2018-9-18 21:25:18 | 显示全部楼层
加油!今天也把串口外设,网络相关的操作资料放出了,希望有更多精彩之作
使用道具 举报 回复
发表于 2018-9-28 15:54:51 | 显示全部楼层
PersimmonUI柿饼 开源了吗?
使用道具 举报 回复
发表于 2018-10-2 16:47:03 | 显示全部楼层
hnhebing 发表于 2018-9-28 15:54
0 @. }1 F+ Z0 O. ~& U: pPersimmonUI柿饼 开源了吗?

* p, J# {: I1 g( \就等我们最后一次交作业了
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表