【PersimmonUI柿饼学习营】+ A Byte of China + 平板界面

2018-9-9 03:13 [复制链接] 9 2121

本帖最后由 ianhom 于 2018-9-11 13:39 编辑
6 D, [, q% y% q" N2 _! Q' @4 x$ h1 J: ^9 V! V
第三周作业:制作平板效果
0 ^2 l3 C/ F: @/ B
" B- n9 ~  b( f( r' j0 z4 h5 _5 r开发环境
8 r8 \4 u1 h3 z) BRTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏3 m$ @2 Q2 x) k) u
wx_camera_1535343243074.jpg
+ d% A: a0 v- O9 P) i* P: M! v% B! U
( K0 I6 O) @% S. ~: n开发过程
0 a# k: y6 p' b( G- D本周进一步学习了PersimmonUI柿饼的控件功能,配合丰富的API,JavaScript可以方便灵活实现酷炫的效果。作业的重点:滑动解锁,应用集成,使用新应用尝试新的API、下拉动画效果% v. L3 u0 |# y; I/ Q/ C
1 j/ w: V6 T; g& d# w
滑动解锁:使用slider控件,范围拉的足够大,隐藏图片即可,滑屏成功后将数字键盘显示出来,输入密码(6666),若不正确可重新输入,若正确在进入主页面。+ e" _" u% v0 m: R
TIM截图20180909025752.png
/ a8 ^. a, d4 Y) B; h: F9 P TIM截图20180909025852.png ' k4 I* }; U6 N  ]/ ~! h7 C9 F
TIM截图20180909025955.png & r+ {: n" O' z4 f
TIM截图20180909030035.png ' o9 Y9 P9 p; {' m  {/ a: m3 d$ x
) p# W0 R9 M8 d6 k) e  c
应用集成:在前两周的学习中,已经完成了RT-Thread广告,计算器和2048,这里需要将这些应用集成到主页中。主页中需要增加ListCtrl作为一个大容器,实现滑动选择。然后在ListCtrl中增加若干个Panel作为小容器,在Panel中存放button和label即可,我们可以通过button来切换不同的page(即应用)。还要在每个应用中增加一个back键以便回到主页面。
3 S: c% m" h/ \& y  b' v( @5 S, Y0 c TIM截图20180909030230.png 9 L) c4 Y4 Y6 b% I0 J6 ]( @# A
TIM截图20180909030344.png - |( ~2 G  p' i& x, d

" z! v* D. E+ }- f3 g新API:最关键的是时间API,在这次作业中新增了一个小游戏,如果选择了No,则这个No的button会跑到一个随机位置,就是傲娇地不让点,如果点击的是YES,等5秒后可以退回到主页面,这个page中没有设置back键,只能等时间到后退出。
  V; f7 w6 |" N# o* } TIM截图20180909030555.png
+ d. b; k: ?, Y. \1 R详情请参考源码; E6 t1 v: I% [5 P8 H& k/ D
  1. var t = 5;
    + I% A4 H, b. b4 y) M3 ^2 q4 {
  2. var page = {0 Y' t7 p  F+ ^. @, o# M/ i/ S) }
  3.     data : {timer1 : 0, timer2 : 0},
    4 Q1 O4 e- s* ]. n9 b: T
  4.     : i& Y- U. L: c+ }0 ?- r
  5.     onYes : function(e)
    - _4 B! U( y. B0 c; `
  6.     {
    ) L5 T% {3 P2 c! ]7 G9 q; j( h
  7.         var thiz = this;
    6 D, m4 A. n+ Y% k# q6 Y$ n6 x
  8.         : x8 h1 U6 _7 J% F5 x  a
  9.         this.setData({label2 : {position : {x:268,y:79},refresh:true}})0 n) r& C6 c4 e" q; e; c
  10.         this.setData({page3: {refresh:true}})
    ! ^. D" n7 L9 o' t) F

  11. 5 j) l; n0 K2 H) |7 B3 m. m
  12.         this.data.timer1 = setTimeout(function()
      c- M# t& \7 f' V$ f4 F
  13.         {2 b" A8 ?. E+ P; b; B5 w* Q
  14.             console.log('timer1 timeout');1 {! W; ^3 c3 J1 L0 C: o
  15.             clearInterval(thiz.data.timer2);
    9 a; ?. }8 m- o0 [' X2 S  \
  16.             clearTimeout(thiz.data.timer1);
    ! f" Z+ H& Z5 L7 d- }
  17.             pm.navigateBack();; j' g+ x- j; L. w4 h
  18.         }, 1000 * 5);
    6 x* U/ p5 N$ D! f
  19. ( O* v+ q3 a9 Y0 B: s3 C
  20.         this.data.timer2 = setInterval(function()" g' h8 s. K( p7 P  f$ D: `# D
  21.         {
    . r0 A+ I$ S0 `- v. U( c
  22.             console.log(t)
    % }* l6 x0 P4 `1 n+ }9 Z& F2 H' P
  23.             t -= 1;
    ' \! W8 d1 D, j9 f" B0 }
  24.         }, 1000);; I4 I& U7 B: f
  25.     },! p4 j( y) Z) h! M
  26.     onNo : function(e)& W) N+ t' z" `
  27.     {
    $ _; h2 p% W4 y( y/ P' S( r
  28.         var xx = Math.floor(Math.random()*600+10)
    , C0 q( _0 F/ v# N
  29.         var yy = Math.floor(Math.random()*360+100)
    1 Y$ F( g* C( i* g; k4 `  B# h2 A3 i. f
  30.         console.log(xx,yy)( H1 e1 F! y% j3 N- q" j4 M
  31.         this.setData({button2 : {position : {x:xx,y:yy},refresh:true}})/ \/ u# R+ ~% Y9 g; J
  32.         this.setData({page3: {refresh:true}})
    $ J" m( Z$ S  t) Y
  33.     }
    / ~8 B! Z# }: p) c
  34. };3 N1 f# V# ]' J! T7 S, W( @) W

  35. % N# ^. D% \" p$ F# K$ y7 C9 k
  36. Page(page);
复制代码

$ e8 }4 X7 x+ v
$ A) E2 w4 w! X. C. f7 c0 Z下拉动画效果:这里我们尝试使用timer的API和setData position的方式来组合一个下拉通知栏,定时快速修改通知栏的页面位置,实现下拉的动画效果。
" @% W' u7 s0 v3 H5 n2 S; O TIM截图20180909141751.png
# E) z1 h6 _6 Z% C' Z' C  G, p$ ?
5 F# n$ R; ?5 h
  1. var p = -470;
    6 b; C# |& {% M
  2. var q = 0;
    : |# s: _3 W# Q1 ?
  3. var page = {  H) Z# Q0 Y& s; M4 A
  4.     data : {timer1 : 0, timer2 : 0},
    % P3 z% T! [7 `( L3 q; {
  5.     onbutton: function(e)$ [  q. o) |8 J0 f
  6.     {4 E  Y# c, a; H0 f
  7.         var thiz = this;0 G  [2 C/ b# L4 n
  8.               1 E4 X9 k% y5 V4 d  B5 r+ G/ b
  9.         switch(e.target.id){& W. e+ b* X: A
  10.             case "button1":; w" ~) \& @4 [. B2 t9 E
  11.                 pm.navigateBack();
    - F/ ?9 J- U+ b4 M
  12.                 break;
    5 x) F( \$ [" p' J) }6 [
  13.             case "button2":
    , s7 E+ f  ^& B
  14.                 pm.navigateTo({url: "page4/page4"});
    $ N0 v8 ]! v. u8 c
  15.                 break;
    - Y* j0 ]" M. I! t& @# s, R: r# T4 j
  16.             case "button3":
    . t# g" u& c3 k8 C0 n, S( i
  17.                 pm.navigateTo({url: "page5/page5"});
    6 c  B" \8 Y7 J7 o
  18.                 break;9 s; u) n8 f4 b: A6 F
  19.             case "button4":6 t4 H8 [2 E7 {  o7 Y4 }
  20.                 pm.navigateTo({url: "page3/page3"});
    / X$ m: R, e: w7 n, c) M# z0 o
  21.                 break;( F) O, a  T' ~( J: a
  22.             case "button5":
    2 @/ s' x( S8 f% l) j
  23.                 pm.navigateTo({url: "page6/page6"});
    ' g2 L- W) X- l6 i8 g: y
  24.                 break;  
    4 d- d! a; n/ q# Q# j% H3 {( u
  25.             case "button6":7 V+ g3 k3 J; R
  26.             case "button7":+ y* ]& s2 f( P, g; Q2 I
  27.             case "button8":5 ?* [! r# q# R0 }4 G! m. i
  28.             case "button9":
    0 _/ R, I. v1 t- D
  29.             case "button10":# h; K/ a  [/ b( O8 M1 U, p
  30.             case "button11":
    - f% A8 e" o# g: E  M& A! C* p0 ]
  31.                 pm.navigateTo({url: "page7/page7"});
    , X; X6 c5 s- p1 G; B. K! ]2 ?2 z- O! n
  32.                 break;  
    # Q+ X( H% {, N5 f) H: ^. I' t/ `( U
  33.             case "button12":* }2 q: Q$ ]% f3 n; U/ {
  34.                 this.data.timer1 = setTimeout(function()/ r  D" \6 ?% b' G- ?) X
  35.                 {4 B0 {6 d& b7 U, c$ E
  36.                     console.log('timer1 timeout');0 H* S& ?# k* m+ Z5 B9 p( A) _
  37.                     clearInterval(thiz.data.timer2);- g+ K) B2 c$ }$ _& _4 C* N
  38.                     clearTimeout(thiz.data.timer1);
    5 Y1 x0 P" h' r; W4 X6 n
  39.                     p = -470
    ! j! X, [4 \4 i( D: ^9 q
  40.                 }, 300 * 1);8 t( Y: v4 D9 D6 j6 g5 @5 O3 d4 ^
  41. 4 R0 g  O/ S- x7 }, b: x
  42.                 this.data.timer2 = setInterval(function()
    1 g; a+ ?7 S5 N8 k$ F0 z/ L
  43.                 {
    / P, O7 U" N; B$ r, C- C
  44.                     thiz.setData({listctrl2 : {position : {x:19,y:p}}})/ ~/ W% |9 E9 Q# @9 r
  45.                     thiz.setData({listctrl2 : {refresh:true}})
    . P" E1 ]$ a! c" d% g
  46.                     //thiz.setData({page2: {refresh:true}})
    & h; @, J5 A' w
  47.                     p += 16;) w+ N! j7 f* B5 n
  48.                 }, 10);$ `4 N: {" I$ x
  49.            6 g8 S. w/ `) A
  50.                 this.setData({label2 : {position : {x:268,y:79},refresh:true}})
      c" v. p! G' S& r5 b
  51.                 this.setData({page3: {refresh:true}})
    + G% ?  N6 W; D: w

  52. - U3 t$ h8 ~" @9 l+ O  s3 V
  53.                 break;2 h3 w& L. O3 ?8 t6 f
  54.             case "button13":+ \) s3 p  A5 ]- I- G
  55.                 this.data.timer1 = setTimeout(function()/ w- E8 F1 a* n3 v% C
  56.                 {/ w* K2 |1 J& n1 v
  57.                     console.log('timer1 timeout');
    ! D! r- f9 q. D2 e
  58.                     clearInterval(thiz.data.timer2);
    " b. J7 |6 P* z3 _7 J' j) i
  59.                     clearTimeout(thiz.data.timer1);6 a' M; E2 m/ n! t5 s
  60.                     q = 0
    ' |# Z2 f" O8 K' }5 ~6 H, \
  61.                     thiz.setData({page2: {refresh:true}})
    1 _0 v8 i" l& }, }4 E

  62. 3 [4 A2 [1 H% b0 c
  63.                 }, 300 * 1);
    3 T. T9 _0 n% v! l5 D

  64. 8 q& b: B; X' r- y5 |$ v4 Q5 q/ u
  65.                 this.data.timer2 = setInterval(function()
    4 d! U, G* Q( O3 O! D" r
  66.                 {) c/ Z. w, z) y
  67.                     thiz.setData({listctrl2 : {position : {x:19,y:q}}})6 o; x/ Q' U! B$ e2 q
  68.                     thiz.setData({listctrl2 : {refresh:true}})6 m4 ?# f5 G+ I  S$ v
  69.                     //thiz.setData({page2: {refresh:true}})
    ; r7 w8 W" n7 \
  70.                     q -= 16;( l/ P& V& T+ E- M- e: b
  71.                 }, 10);2 ^( h. B7 \( B5 M6 Z: {+ V* \
  72.            3 e; @0 g* q/ h4 W: r# l; |5 F, t
  73.                 this.setData({label2 : {position : {x:268,y:79},refresh:true}})6 x: x8 h% N8 y+ g  L/ U
  74.                 this.setData({page3: {refresh:true}})& F' c5 o# R( m: M

  75. 0 _! _! A7 g& m5 \
  76.                 break;% H# V  W  J' @. {$ y
  77.         }      " R: \& G8 Z' g. _5 b, z
  78.     }
    0 p( S* t: E: F+ K/ y
  79. };8 _% Q2 k* Z3 {7 Q

  80. ' n, L( W3 ^7 w2 C% K& ?8 N# y% ]
  81. Page(page);% a' ?% r# i1 M5 h: y" r
复制代码
  i( _3 }& I. ^3 s+ J& m
* C+ z  k( I2 I8 r( y
附件是柿饼工程,这里抛砖引玉,期待大家更完善、更有趣的版本。) `4 w% Z) p3 ]0 I* t
! W- Z* t& N5 p" A$ C; a1 j1 |  {
效果展示
' O8 ?; D6 I: @0 E) e/ m滑屏解锁,输入密码,进入应用,退出,锁屏 hw3.gif
7 ]$ T1 z, l8 G8 v0 p+ n. X2 Q! M9 e. W( g
增加了一个小游戏
! b' b. W0 r" u1 G# X5 E hw3-1.gif
8 `3 \* h# S& E3 _- a& x! }* z; T5 ~' G& b' |
模拟下拉通知栏
  @: g* n$ B4 x( T2 V  }  l GIF.gif
9 ]% C5 i% Z1 }7 o5 y1 x! B
0 K: S8 |4 ?; M# l' M总结
3 P* N2 W9 C6 |  g) C$ ~时间匆忙,还有好多控件没有试验,不过相信后面的学习中肯定会使用到。3 z! q! P1 U" d( p
在设计时,要考虑清楚控件之间的堆叠关系
" j8 D9 u' r6 `. B: I# }: v1 `程序中应该还有不完善的地方,期待大佬们多多指导。
. J0 F/ V1 F5 v% G4 O
# |( D5 e$ S% `柿饼工程
# r* t* ?/ v- n& w hw3-1-10.rar (12.26 MB, 下载次数: 660)
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2018-9-10 10:02:34 | 显示全部楼层
膜拜
使用道具 举报 回复
发表于 2018-9-11 13:47:06 | 显示全部楼层
使用道具 举报 回复
发表于 2018-9-14 15:43:56 | 显示全部楼层
这玩意这么好用,牛逼。
使用道具 举报 回复
发表于 2018-9-14 16:53:54 | 显示全部楼层
小住住 发表于 2018-9-14 15:43. O! y3 n  V$ c) l
这玩意这么好用,牛逼。
8 @6 T. f0 R) l- w
恩,确实挺方便的
使用道具 举报 回复
发表于 2018-9-14 16:54:09 | 显示全部楼层
werrysuzhen 发表于 2018-9-10 10:02
+ ?; P. H( I; _# |# B; M2 O# E膜拜
2 X, T8 v: [& S2 c$ H. B
是柿饼做的好,我是个搬运工
使用道具 举报 回复
发表于 2018-9-14 16:54:23 | 显示全部楼层
flyboy 发表于 2018-9-11 13:47
4 \# b0 k1 m* _! p, [3 \* P, Y  z
7 O0 r. x; ?" I4 O* s, N/ X
柿饼确实很强
使用道具 举报 回复
发表于 2018-9-14 22:53:30 | 显示全部楼层
还需要更强
使用道具 举报 回复
发表于 2018-12-17 12:44:17 | 显示全部楼层
入门教程在哪里
使用道具 举报 回复
发表于 2018-12-19 08:55:03 | 显示全部楼层
yuexiaoban 发表于 2018-12-17 12:44
. P+ ?2 F" q6 s入门教程在哪里
& w9 G/ y$ ~# h. A
官网入门教程里就有
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

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

Powered by RT-Thread

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