搜索
楼主: Jacen.He

[win] 系列教程:使用plus控件制作精美界面

    [复制链接]

0

主题

4

帖子

29

积分

新手入门

Rank: 1

积分
29
发表于 2014-7-19 18:01:15 | 显示全部楼层

非常的强大,感觉掉咋天!

非常的强大,感觉掉咋天!
回复

使用道具 举报

0

主题

9

帖子

220

积分

二级会员

Rank: 3Rank: 3

积分
220
QQ
发表于 2014-7-21 09:56:50 | 显示全部楼层

赞,强大的aardio

赞,强大的aardio
回复

使用道具 举报

0

主题

18

帖子

125

积分

一级会员

Rank: 2

积分
125
发表于 2014-8-7 13:18:32 | 显示全部楼层

{:)} 很棒。

很棒。
回复

使用道具 举报

3

主题

12

帖子

90

积分

一级会员

Rank: 2

积分
90
发表于 2014-8-12 10:53:03 | 显示全部楼层

楼主,牛。感觉aau在一些细节上的处理非常好

楼主,牛。感觉aau在一些细节上的处理非常好
回复

使用道具 举报

0

主题

1

帖子

15

积分

新手入门

Rank: 1

积分
15
发表于 2014-9-4 10:22:07 | 显示全部楼层

如果能更灵活一点就好, 比如指定鼠标划过、按下的切图区域, 这样可以将1个按钮的各种状态放在一张图上

如果能更灵活一点就好, 比如指定鼠标划过、按下的切图区域, 这样可以将1个按钮的各种状态放在一张图上
回复

使用道具 举报

0

主题

10

帖子

70

积分

一级会员

Rank: 2

积分
70
发表于 2014-9-4 17:52:33 | 显示全部楼层

这个是好东西,让按钮不再单调了。收藏。

这个是好东西,让按钮不再单调了。收藏。
回复

使用道具 举报

3

主题

13

帖子

225

积分

培训班

积分
225
发表于 2014-9-28 12:23:03 | 显示全部楼层

Plus算是AAU很大的一个亮点,已经使用Plus绘制出了很炫的UI

Plus算是AAU很大的一个亮点,已经使用Plus绘制出了很炫的UI
回复

使用道具 举报

0

主题

2

帖子

11

积分

新手入门

Rank: 1

积分
11
发表于 2014-10-3 14:50:24 | 显示全部楼层

真的不错,愿aardio遍地开花!

真的不错,愿aardio遍地开花!
回复

使用道具 举报

5

主题

20

帖子

164

积分

一级会员

Rank: 2

积分
164
发表于 2014-10-15 17:08:01 | 显示全部楼层

非常好! 不知道能不能整张图,切部分显示呢? [img=88,22]http://g.hiphotos.bdimg.com/album/whcrop%3D8

非常好!
不知道能不能整张图,切部分显示呢?

这样就不用分太多小图了
回复

使用道具 举报

5

主题

442

帖子

2420

积分

五级会员

Rank: 8Rank: 8

积分
2420
发表于 2014-10-15 17:26:29 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=67750&ptid=11486][c

雪枯灵 发表于 2014-10-15 17:08
非常好!
不知道能不能整张图,切部分显示呢?

小图有小图的方便,不需要去计算坐标,又不是网络图片不需要下载不需要节省这点文件数。
plus控件本来就是一个极简的界面控件,功能加太多参数与使用方法就越复杂,那不就变成了第二个HTMLayout了。
回复

使用道具 举报

0

主题

5

帖子

30

积分

新手入门

Rank: 1

积分
30
发表于 2015-2-3 16:29:53 | 显示全部楼层

很漂亮用学习了

很漂亮用学习了
回复

使用道具 举报

8

主题

45

帖子

276

积分

二级会员

Rank: 3Rank: 3

积分
276
发表于 2015-2-6 20:33:56 | 显示全部楼层

很好很强大,学习了! 觉得listview放在一个漂亮的界面里太不协调了,自绘咱又没那个水平,于是突发奇想用控件套嵌简单模拟了一个listview样式。变通一

很好很强大,学习了!
觉得listview放在一个漂亮的界面里太不协调了,自绘咱又没那个水平,于是突发奇想用控件套嵌简单模拟了一个listview样式。变通一下,其实也可以设计出自己想要的效果来...
  1. class ctrlLv{
  2.         ctor(frmbk /*输入构造函数所需要的参数*/ ){
  3.                 wfx,wfy,wfcx,wfcy = frmbk.getPos()
  4.                 ctab = {} //控件name表
  5.                 selidx = 0 //记录选中项的索引值
  6.                 lastcy = 0 //记录尾项的cy坐标
  7.                 //mouseidx = 0
  8.                   
  9.                 frmbk.add(
  10.                         bf={cls="custom";left=0;top=0;right=wfcx;bottom=wfcy;bgcolor=16777215;z=2};
  11.                         scroll={cls="custom";left=wfcx-13;top=0;right=wfcx;bottom=wfcy;hide=1;z=1};
  12.                 )
  13.                 frmbk.scroll.add(
  14.                         bf={cls="static";left=1;top=1;right=12;bottom=wfcy-1;bgcolor=8421504;notify=1;z=7}
  15.                 )
  16.                
  17.                 frmbf = frmbk.bf
  18.                 frmbf.wndproc = function(hwnd,message,wParam,lParam){
  19.                         if(!#ctab) return;
  20.                         if(message=0x200/*_WM_MOUSEMOVE鼠标移动指向*/){
  21.                                 for(i=1;#ctab;1){
  22.                                         if(frmbf[ctab[i]].bgcolor = 16777215 || frmbf[ctab[i]].bgcolor=15780518) continue;
  23.                                         frmbf[ctab[i]].bgcolor = 16777215
  24.                                         frmbf[ctab[i]].redraw()
  25.                                         //mouseidx = 0
  26.                                 }
  27.                                 frmbf.notify=0
  28.                         }
  29.                         elseif(message=0x201/*_WM_LBUTTONDOWN鼠标左键单击*/){
  30.                                 for(i=1;#ctab;1){
  31.                                         if(frmbf[ctab[i]].bgcolor=16777215) continue;
  32.                                         frmbf[ctab[i]].bgcolor = 16777215
  33.                                         frmbf[ctab[i]].redraw()
  34.                                         selidx = 0
  35.                                         ::PostMessage(frmbk.hwnd,0x201,1,1)
  36.                                         frmbf.notify=0
  37.                                         break;
  38.                                 }
  39.                         }
  40.                 }
  41.                
  42.                 import mouse
  43.                 var scroll = frmbk.scroll.bf
  44.                 var mx,my,srlrc
  45.                 scroll.wndproc = function(hwnd,message,wParam,lParam){
  46.                         if(message=0x201/*_WM_LBUTTONDOWN鼠标左键点击*/){
  47.                                 mx,my = mouse.getPos()
  48.                                 srlrc = scroll.getRect()
  49.                         }
  50.                         if(message=0x202/*_WM_LBUTTONUP鼠标左键弹起*/) srlrc = false;
  51.                         if(message=0x200/*_WM_MOUSEMOVE鼠标移动*/){
  52.                                 if(!srlrc) return;
  53.                                 var dx,dy = mouse.getPos()
  54.                                 var frc = frmbf.getRect()
  55.                                 var sdy = dy-my
  56.                                 //var fdy = 0-sdy*lastcy/(wfcy-2)
  57.                                 var fdy=0
  58.                                 if(sdy<0){
  59.                                         if(sdy<=1-scroll.top){
  60.                                                 sdy = 1-scroll.top
  61.                                                 fdy = 0-frc.top
  62.                                         }
  63.                                         else fdy = frc.top*sdy/(srlrc.top-1);
  64.                                 }
  65.                                 elseif(sdy>0){
  66.                                         if(sdy>=wfcy-scroll.bottom-1){
  67.                                                 sdy = wfcy-scroll.bottom-1
  68.                                                 fdy = wfcy-frc.bottom
  69.                                         }
  70.                                         else fdy = (wfcy-frc.bottom)*sdy/(wfcy-1-srlrc.bottom);
  71.                                 }
  72.                                 if(sdy=0) return;
  73.                                 ::OffsetRect(frc,0,fdy)
  74.                                 frmbf.setRect(frc)
  75.                                 ::OffsetRect(srlrc,0,sdy)
  76.                                 scroll.setRect(srlrc)
  77.                                 my = dy
  78.                                 //mx,my = dx,dy
  79.                         }
  80.                 }
  81.         }
  82.        
  83.         //获取项索引 文本
  84.         getItem = function(){
  85.                 if(selidx) return { idx=selidx;tt1=frmbf[ctab[selidx]].tt1.text;tt2=frmbf[ctab[selidx]].tt2.text };
  86.                 else return {idx="";tt1="";tt2=""};
  87.         }
  88.        
  89.         setItemRect = function(idx){
  90.                 var m = ..math.floor(wfcx/84)
  91.                 idx = idx-1
  92.                 var x = (idx%m)*84+1
  93.                 var y = ..math.floor(idx/m)*84+1
  94.                 var cx = x+83
  95.                 var cy = y+83
  96.                 return x,y,cx,cy
  97.         }
  98.        
  99.         setScrollRect = function(){
  100.                 if(lastcy<=wfcy){
  101.                         frmbk.scroll.hide = 1
  102.                         return
  103.                 }
  104.                 var srl = frmbk.scroll.bf
  105.                 var rc = frmbf.getRect()
  106.                 var y = (0-rc.top)/lastcy*(wfcy-2)
  107.                 var cy = (wfcy-2)*(wfcy-rc.top)/lastcy
  108.                 if(y<1) y = 1;
  109.                 if(cy>wfcy-1) cy = wfcy-1;
  110.                 srl.top = y
  111.                 srl.bottom = cy
  112.                 frmbk.scroll.hide = 0
  113.         }
  114.        
  115.         //添加一个项目
  116.         add = function(ttab,img){
  117.                 ..table.push( ctab,"ctrl"+..time.tick() )
  118.                 var n = #ctab
  119.                 var ctrl = ctab[n]
  120.                 var x,y,cx,cy = this.setItemRect(n)
  121.                 frmbf.add( [ctrl] = {cls="custom";idx=n;left=x;top=y;right=cx;bottom=cy;bgcolor=16777215;dl=1;dt=1;z=1} )
  122.                 //frmbf[ctrl].setRect( ::RECT(x,y,cx,cy) )
  123.                
  124.                 frmbf[ctrl].add(
  125.                         img = {cls="plus";bottom=38;right=60;left=24;top=2;dl=1;dt=1;z=5};
  126.                         tt1 = {cls="static";left=1;top=39;right=83;bottom=60;align="center";center=1;transparent=1;dl=1;dt=1;z=4};
  127.                         tt2 = {cls="static";left=1;top=61;right=83;bottom=78;align="center";center=1;transparent=1;dl=1;dt=1;z=4};
  128.                         st = {cls="static";left=0;top=0;right=83;bottom=83;transparent=1;notify=1;dl=1;dt=1;z=8}
  129.                 )
  130.                
  131.                 frmbf[ctrl].img.background = img
  132.                 frmbf[ctrl].tt1.text = ttab[2]
  133.                 frmbf[ctrl].tt2.text = ttab[1]
  134.                
  135.                 //滚动条设置
  136.                 if(cy>lastcy){
  137.                         lastcy = cy
  138.                         if(cy>wfcy){
  139.                                 frmbf.bottom = frmbf.top+cy
  140.                                 this.setScrollRect()
  141.                         }
  142.                 }
  143.                
  144.                 frmbf[ctrl].st.wndproc = function(hwnd,message,wParam,lParam){
  145.                         select(message) {
  146.                                 case 0x203/*_WM_LBUTTONDBLCLK鼠标左键双击*/ {
  147.                                         //frmbf.msgbox(frmbf[ctrl].tt1.text++'\r\n'++frmbf[ctrl].tt2.text)
  148.                                         ::PostMessage(frmbk.hwnd,0x203,1,1)
  149.                                 }
  150.                                 case 0x201/*_WM_LBUTTONDOWN鼠标左键单击*/ {
  151.                                         for(i=1;#ctab;1){
  152.                                                 if(frmbf[ctab[i]].bgcolor = 16777215) continue;
  153.                                                 if(ctab[i]!=ctrl){
  154.                                                         frmbf[ctab[i]].bgcolor = 16777215
  155.                                                         frmbf[ctab[i]].redraw()
  156.                                                 }
  157.                                         }
  158.                                         if(frmbf[ctrl].bgcolor=15780518) return;
  159.                                         frmbf[ctrl].bgcolor=15780518
  160.                                         selidx = frmbf[ctrl].idx
  161.                                         frmbf.notify=1
  162.                                         frmbf[ctrl].redraw()
  163.                                         //frmbf.redraw()
  164.                                         ::PostMessage(frmbk.hwnd,0x201,1,1)
  165.                                 }
  166.                                 case 0x200/*_WM_MOUSEMOVE鼠标移动指向*/ {
  167.                                         for(i=1;#ctab;1){
  168.                                                 if(frmbf[ctab[i]].bgcolor = 16777215) continue;
  169.                                                 if(ctab[i]!=ctrl && frmbf[ctab[i]].bgcolor!=15780518){
  170.                                                         frmbf[ctab[i]].bgcolor = 16777215
  171.                                                         frmbf[ctab[i]].redraw()
  172.                                                 }
  173.                                         }
  174.                                         if(frmbf[ctrl].bgcolor=12639424 || frmbf[ctrl].bgcolor=15780518) return;
  175.                                         frmbf[ctrl].bgcolor=12639424
  176.                                         //mouseidx = frmbf[ctrl].idx
  177.                                         frmbf.notify=1
  178.                                         frmbf[ctrl].redraw()
  179.                                         //frmbf.redraw()
  180.                                 }
  181.                         }
  182.                 }
  183.         }
  184.        
  185.         //删除选中项目
  186.         del = function(){
  187.                 if(!selidx) return;
  188.                 frmbf.remove(ctab[selidx])
  189.                 ..table.remove(ctab,selidx)
  190.                 var n = #ctab
  191.                 //if(!n) return;
  192.                 for(i=selidx;n;1){
  193.                         var ctrl = frmbf[ctab[i]]
  194.                         var x,y,cx,cy = this.setItemRect(i)
  195.                         ctrl.setRect( ::RECT(x,y,cx,cy) )
  196.                         ctrl.idx = i
  197.                 }
  198.                 selidx = 0
  199.                 ::PostMessage(frmbf.hwnd,0x201,1,1)
  200.                 if(!n) return;
  201.                
  202.                 var x,y,cx,cy = this.setItemRect(n)
  203.                 if(cy<lastcy ){
  204.                         var rc = frmbf.getRect()
  205.                         var dy=0
  206.                         if(cy>wfcy) rc.bottom=rc.top+cy;
  207.                         if(rc.bottom<wfcy) dy=wfcy-rc.bottom;
  208.                         if(cy<wfcy || rc.top+dy>0) dy=0-rc.top;
  209.                         lastcy = cy
  210.                         ::OffsetRect(rc,0,dy)
  211.                         frmbf.setRect( rc )
  212.                         this.setScrollRect()
  213.                 }
  214.         }
  215. }


  216. import win.ui;
  217. import inet.http
  218. var http = inet.http()
  219. /*DSG{{*/
  220. var winform = ..win.form(text="aardio Form";right=432;bottom=399;bgcolor=15780518)
  221. winform.add(
  222. adduser={cls="button";text="添加";left=6;top=259;right=99;bottom=289;z=2};
  223. custom={cls="custom";text="custom";left=4;top=4;right=430;bottom=242;autosize=1;bgcolor=16777215;border=1;center=1;composited=1;notify=1;transparent=1;z=1};
  224. itemidx={cls="static";text="项目索引:";left=210;top=248;right=272;bottom=264;transparent=1;z=5};
  225. itemidxv={cls="static";left=276;top=248;right=399;bottom=264;bgcolor=16777215;z=4};
  226. itemtt1={cls="static";text="项目文本1:";left=210;top=267;right=272;bottom=283;transparent=1;z=6};
  227. itemtt1v={cls="static";left=276;top=267;right=399;bottom=283;bgcolor=16777215;z=8};
  228. itemtt2={cls="static";text="项目文本2:";left=210;top=286;right=272;bottom=302;transparent=1;z=7};
  229. itemtt2v={cls="static";left=276;top=286;right=399;bottom=302;bgcolor=16777215;z=9};
  230. rmuser={cls="button";text="移除";left=107;top=259;right=200;bottom=289;z=3}
  231. )
  232. /*}}*/

  233. math.randomize()
  234. var uimg = http.get("http://qlogo3.store.qq.com/qzone/12345/12345/50")
  235. var cl = ctrlLv(winform.custom)

  236. winform.custom.wndproc = function(hwnd,message,wParam,lParam){
  237.         select(message) {
  238.                 case 0x201/*_WM_LBUTTONDOWN鼠标左键单击*/ {
  239.                         var item = cl.getItem()
  240.                         winform.itemidxv.text = item.idx
  241.                         winform.itemtt1v.text = item.tt1
  242.                         winform.itemtt2v.text = item.tt2
  243.                 }
  244.                 case 0x203/*_WM_LBUTTONDBLCLK鼠标左键双击*/ {
  245.                         var item = cl.getItem()
  246.                         win.msgbox( item.tt1+'\r\n'+item.tt2,"项目文本")
  247.                 }
  248.         }
  249. }

  250. winform.adduser.oncommand = function(id,event){
  251.         var tab = {math.random(22222222, 999999999);"昵称:"+string.random(5)}
  252.         cl.add(tab,uimg)
  253. }

  254. winform.rmuser.oncommand = function(id,event){
  255.         cl.del()
  256. }

  257. winform.show()
  258. win.loopMessage();
复制代码

PS:咱没系统的学过编程,只是一个业余爱好者,代码很简陋,也不规范,就是很纯粹地用代码实现了自己的一个想法,各位别见笑
回复

使用道具 举报

0

主题

5

帖子

30

积分

新手入门

Rank: 1

积分
30
发表于 2015-2-12 17:28:48 | 显示全部楼层

很详细,例子很经典,喜欢

很详细,例子很经典,喜欢
回复

使用道具 举报

4

主题

26

帖子

203

积分

二级会员

Rank: 3Rank: 3

积分
203
QQ
发表于 2015-4-17 11:33:10 | 显示全部楼层

很给力 老大加油

很给力 老大加油
回复

使用道具 举报

1

主题

5

帖子

48

积分

新手入门

Rank: 1

积分
48
QQ
发表于 2015-4-21 15:52:01 | 显示全部楼层

谢谢,谢得真的很好,学习了!学好了再来做贡献了!!!!

谢谢,谢得真的很好,学习了!学好了再来做贡献了!!!!
回复

使用道具 举报

5

主题

16

帖子

96

积分

一级会员

Rank: 2

积分
96
发表于 2015-5-8 17:48:51 | 显示全部楼层

使用plus控件制作横版导航按钮 在这个例子中,怎么样才能一运行程序就加载page3.aau?没找到相关代码

使用plus控件制作横版导航按钮
在这个例子中,怎么样才能一运行程序就加载page3.aau?没找到相关代码
回复

使用道具 举报

0

主题

2

帖子

38

积分

新手入门

Rank: 1

积分
38
发表于 2015-10-21 07:35:40 | 显示全部楼层

太谢谢了。正需要。

太谢谢了。正需要。
回复

使用道具 举报

0

主题

1

帖子

7

积分

新手入门

Rank: 1

积分
7
发表于 2016-3-31 16:56:42 | 显示全部楼层

不错,值得学习下

不错,值得学习下
回复

使用道具 举报

2

主题

38

帖子

258

积分

二级会员

Rank: 3Rank: 3

积分
258
发表于 2016-4-28 09:19:15 | 显示全部楼层

不错的教程,非常详细、非常实用,感谢Jacen、pinky的多年来的付出、大力支持,愿你们幸福美满,更愿aardio遍地开花。

不错的教程,非常详细、非常实用,感谢Jacen、pinky的多年来的付出、大力支持,愿你们幸福美满,更愿aardio遍地开花。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-16 23:28 , Processed in 0.078125 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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