aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 22828|回复: 10

分享一个plus界面贴图练习的作品Ovplayer播放器界面

[复制链接]

38

主题

129

回帖

1045

积分

荣誉会员

积分
1045
发表于 2018-4-6 00:23:30 | 显示全部楼层 |阅读模式
本帖最后由 popdes 于 2018-4-6 21:30 编辑

好长时间没专门练习界面贴图, 今天花了一天时间仿了一个视频播放器, 纯plus贴图 , 里面所有的可见元素均为Plus贴图实现!
代码里基本用到了Plus的所有扩展功能, 送给所有喜欢aar的人 ^_^

最后说一句: Plus贴图真方便
2018.4.6 10:30
更新了下, 注释掉了Jacen说的DPI那个代码,解决错位问题.
2018.4.6 11:50
更新了下自定义的贴图函数ctrlSkin(res){}导致界面出错内存崩溃问题, 将所有skin展开了,目前来看貌似这个问题解决了.
2018.4.6 21.05
更新了主界面全屏设置,导航替换为win.ui.tabs()实现
2018.4.6 21.29
更新新增加的tabs可删除功能

源码下载链接:https://pan.baidu.com/s/1dmCTaTm-lMhJu5gMSCjlGw 密码:awy0

QQ截图20180406000846.jpg

附上主界面的部分代码:
  1. import win.ui;
  2. /*DSG{{*/
  3. mainForm = win.form(text="Ovplayer播放器";right=1145;bottom=686;bgcolor=4208437;border="none")
  4. mainForm.add(
  5. closeButton={cls="plus";left=1106;top=13;right=1131;bottom=38;background="\res\Images\sys_close.png";dr=1;dt=1;notify=1;repeat="repeat-x";z=9};
  6. custom={cls="custom";text="custom";left=0;top=50;right=1146;bottom=687;ah=1;aw=1;bgcolor=8421376;db=1;dl=1;dr=1;dt=1;z=12};
  7. maxButton={cls="plus";left=1076;top=13;right=1101;bottom=38;background="\res\Images\sys_max.png";dr=1;dt=1;notify=1;repeat="repeat-x";z=8};
  8. minButton={cls="plus";left=1046;top=13;right=1071;bottom=38;background="\res\Images\sys_min.png";dr=1;dt=1;notify=1;repeat="repeat-x";z=7};
  9. modelPlus1={cls="plus";text="播放器";left=148;top=1;right=284;bottom=50;background="\res\Images\sys_tab_bkg.png";clipBk=false;color=12632256;dl=1;dt=1;font=LOGFONT(name='微软雅黑';h=-16);notify=1;repeat="repeat-x";z=2};
  10. modelPlus2={cls="plus";text="影视库";left=284;top=1;right=420;bottom=50;background="\res\Images\sys_tab_bkg.png";clipBk=false;color=12632256;dl=1;dt=1;font=LOGFONT(name='微软雅黑';h=-16);notify=1;repeat="repeat-x";z=4};
  11. plus={cls="plus";left=1007;top=0;right=1009;bottom=51;background="\res\Images\sys_split.png";clipBk=false;dr=1;dt=1;repeat="center";z=5};
  12. plus2={cls="plus";left=0;top=0;right=140;bottom=51;background="\res\Images\logo.png";clipBk=false;dl=1;dt=1;repeat="center";z=1};
  13. plus4={cls="plus";left=144;top=0;right=146;bottom=51;background="\res\Images\sys_split.png";clipBk=false;dl=1;dt=1;repeat="center";z=3};
  14. searchButton={cls="plus";left=950;top=12;right=979;bottom=41;background="\res\Images\sys_search.png";clipBk=false;dr=1;dt=1;notify=1;repeat="repeat-x";transparent=1;z=11};
  15. searchText={cls="plus";text="足球小将翼";left=776;top=13;right=980;bottom=42;align="left";background="\res\Images\sys_input.png";bkBottom=4;bkLeft=13;bkRight=32;bkTop=3;clipBk=false;color=12632256;dr=1;dt=1;editable=1;font=LOGFONT(name='微软雅黑');paddingLeft=17;paddingRight=33;paddingTop=7;transparent=1;z=10};
  16. setButton={cls="plus";left=1016;top=13;right=1041;bottom=38;background="\res\Images\sys_setting.png";dr=1;dt=1;notify=1;repeat="repeat-x";z=6}
  17. )
  18. /*}}*/

  19. import gdip.bitmap;
  20. import win.ui.tabs;

  21. /*顶部左侧导航皮肤{{*/
  22. //至少要添加2个创建好的选项卡(作为设计模板,创建成功后可清除)
  23. var tbs = win.ui.tabs(mainForm.modelPlus1,mainForm.modelPlus2);
  24. //指定选项卡的外观样式
  25. tbs.skin(
  26.      background = {
  27.                 //这里上下顺序很重要,切记!
  28.                 //focus = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  29.                 hover = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136,0,136,48);
  30.                 active = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  31.                 default = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(0,0,136,48);
  32.                 //disabled = gdip.bitmap("/res/images/btn-hover.png").clone(0,137*3,137,48);
  33.         };
  34.         color = {
  35.                 default = 0xFFc0c0c0;
  36.         hover = 0xFF06c9a9;
  37.         active = 0xFF06c9a9;
  38.     }
  39.     checked = {
  40.             background = {
  41.                     //这里上下顺序很重要,切记! default设置默认选中样式
  42.                         //focus = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  43.                         hover = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  44.                         active = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  45.                         default = gdip.bitmap("\res\Images\sys_tab_bkg.png").clone(136*2,0,136,48);
  46.                         //disabled = gdip.bitmap("/res/images/btn-hover.png").clone(0,137*3,137,48);
  47.                 };
  48.                 color = {
  49.                         default = 0xFF06c9a9;
  50.                 hover = 0xFF06c9a9;
  51.                 active = 0xFF06c9a9;
  52.             }
  53.     }
  54. )
  55. tbs.add({
  56.     text="看动漫";
  57.     hasCloseButton = true;
  58.     },"\其他窗口\shipinku.aardio"

  59. )
  60. //也可以用下面的代码自定义关闭按钮的外观样式
  61. tbs.closeButton.skin(
  62.     background = {
  63.         hover = 0xFFe35c51;
  64.         active = 0xFF8f241b;
  65.         default = 0x99FFCC66;
  66.     }
  67.     color = {
  68.         hover = 0xFFFFFFFF;
  69.         active = 0xFFEEEEEE;
  70.         default = 0xCCFFFFFF;
  71.     }
  72. )

  73. //可以自定义关闭按钮在选项卡上的显示位
  74. tbs.beforeShowCloseButton = function(strip,rcStrip,rcCloseButton){
  75.     return rcStrip.right - 15, rcStrip.top;
  76. }
  77. //给模版项添加加载的窗体
  78. tbs.loadForm(1,"\其他窗口\player.aardio");
  79. tbs.loadForm(2,"\其他窗口\shipinku.aardio");

  80. //默认选中
  81. tbs.selIndex = 1;
  82. /*}}*/
  83. /*顶部右侧皮肤{{*/
  84. var setButtonSkin = {
  85.                         background = {
  86.                                 hover = gdip.bitmap("\res\Images\sys_setting.png").clone(25,0,25,25);
  87.                                 active = gdip.bitmap("\res\Images\sys_setting.png").clone(25,0,25,25);
  88.                                 default = gdip.bitmap("\res\Images\sys_setting.png").clone(0,0,25,25);
  89.                         };
  90.                        
  91. }
  92. var minButtonSkin = {
  93.                         background = {
  94.                                 hover = gdip.bitmap("\res\Images\sys_min.png").clone(25,0,25,25);
  95.                                 active = gdip.bitmap("\res\Images\sys_min.png").clone(25,0,25,25);
  96.                                 default = gdip.bitmap("\res\Images\sys_min.png").clone(0,0,25,25);
  97.                         };
  98.                        
  99. }
  100. var maxButtonSkin = {
  101.                         background = {
  102.                                 hover = gdip.bitmap("\res\Images\sys_max.png").clone(25,0,25,25);
  103.                                 active = gdip.bitmap("\res\Images\sys_max.png").clone(25,0,25,25);
  104.                                 default = gdip.bitmap("\res\Images\sys_max.png").clone(0,0,25,25);
  105.                         };
  106.                         checked = {
  107.                                 background = {
  108.                                         hover = gdip.bitmap("\res\Images\sys_recovery.png").clone(25,0,25,25);
  109.                                         active = gdip.bitmap("\res\Images\sys_recovery.png").clone(25,0,25,25);
  110.                                         default = gdip.bitmap("\res\Images\sys_recovery.png").clone(0,0,25,25);
  111.                                 };       
  112.                         }
  113.                        
  114. }
  115. var closeButtonSkin = {
  116.                         background = {
  117.                                 hover = gdip.bitmap("\res\Images\sys_close.png").clone(25,0,25,25);
  118.                                 active = gdip.bitmap("\res\Images\sys_close.png").clone(25,0,25,25);
  119.                                 default = gdip.bitmap("\res\Images\sys_close.png").clone(0,0,25,25);
  120.                         };
  121.                        
  122. }
  123. mainForm.setButton.skin( setButtonSkin );
  124. mainForm.minButton.skin( minButtonSkin );
  125. mainForm.maxButton.skin( maxButtonSkin );
  126. mainForm.closeButton.skin( closeButtonSkin );
  127. /*}}*/
  128. /*顶部右侧基本功能{{*/
  129. mainForm.minButton.oncommand = function(id,event){
  130.         mainForm.show(0x6/*_SW_MINIMIZE*/);
  131. }

  132. mainForm.maxButton.oncommand = function(id,event){
  133.     mainForm.maxButton.checked = mainForm.hitmax()
  134. }

  135. mainForm.closeButton.oncommand = function(id,event){
  136.         mainForm.close();
  137. }
  138. /*}}*/
  139. /*搜索框皮肤{{*/
  140. var searchSkin = {
  141.                 background = {
  142.                         hover = gdip.bitmap("\res\Images\sys_search.png").clone(34,0,34,29);
  143.                         active = gdip.bitmap("\res\Images\sys_search.png").clone(34,0,34,29);
  144.                         default = gdip.bitmap("\res\Images\sys_search.png").clone(0,0,34,29);
  145.                 };
  146. }
  147. mainForm.searchButton.skin( searchSkin )
  148. //使其能够响应通知
  149. mainForm.searchButton.setParent( mainForm.searchText )
  150. /*}}*/

  151. mainForm.setButton.oncommand = function(id,event){
  152.         var frmChild,wb = mainForm.loadForm("\其他窗口\setList.aardio");
  153.         var x,y,cx,cy = win.getPos(mainForm.setButton.hwnd,true);
  154.         frmChild.setPos(x+cx/2-frmChild.width/2,y+cy);
  155.         frmChild.show();
  156. }

  157. mainForm.wndproc = function(hwnd,message,wParam,lParam){
  158.         select( message ) {
  159.                 case 0x201/*_WM_LBUTTONDOWN*/{
  160.                         mainForm.hitCaption();
  161.                 }
  162.                 else{
  163.                        
  164.                 }
  165.         }
  166. }

  167. mainForm.searchButton.oncommand = function(id,event){
  168.         mainForm.msgbox(mainForm.searchText.text);
  169. }
  170. //供其他界面调用
  171. mainForm.recFun = function(){
  172.         mainForm.maxButton.oncommand();
  173. }


  174. import win.ui.resizeBorder;
  175. win.ui.resizeBorder(mainForm,3);
  176. import win.ui.minmax;
  177. win.ui.minmax(mainForm,1000,500);
  178. import win.ui.shadow;
  179. win.ui.shadow(mainForm,,5);

  180. //mainForm.enableDpiScaling();
  181. mainForm.show();

  182. return win.loopMessage();
复制代码

评分

参与人数 1 +90 收起 理由
cjc0045 + 90 赞一个!

查看全部评分

8

主题

32

回帖

384

积分

培训班

积分
384
发表于 2018-4-6 00:26:44 | 显示全部楼层
感谢分享,学习学习。

7

主题

33

回帖

428

积分

二级会员

积分
428
发表于 2018-4-6 00:30:22 | 显示全部楼层
谢谢 popdes                                            

50

主题

226

回帖

1679

积分

荣誉会员

积分
1679
发表于 2018-4-6 09:29:29 | 显示全部楼层
流弊!

2

主题

36

回帖

364

积分

二级会员

积分
364
发表于 2018-4-6 09:36:35 | 显示全部楼层
厉害了我滴个神,plus学习好实列,前排支持,载学习去了

0

主题

8

回帖

64

积分

一级会员

积分
64
发表于 2018-4-6 17:39:56 | 显示全部楼层
mainForm.enableDpiScaling() 去掉就好了 太漂酿了 谢谢P大公开源码啊 这下有的学啦 感谢 昨晚发贴出错了 不知道什么原因 说是字节数有限制 登陆不上就没截图。。。

42

主题

80

回帖

950

积分

荣誉会员

积分
950
发表于 2018-4-6 18:32:53 | 显示全部楼层
感谢分享!

2

主题

2

回帖

54

积分

一级会员

积分
54
发表于 2018-4-6 21:16:26 | 显示全部楼层
这个必须给顶一下,想不到plus控件可以做到这种程度。

10

主题

16

回帖

180

积分

一级会员

积分
180
发表于 2018-4-7 00:02:08 | 显示全部楼层
谢谢,学习了~
000000000000000000000000000000000000000000000000000000000000000000000000000000000000
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2024-4-19 14:49 , Processed in 0.063795 second(s), 27 queries .

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

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