aardio界面练习-音乐播放器
By
admin
at 2020-03-29 • 5人收藏 • 4001人看过
第二弹: 现在手机的ui好多, 今天仿一个不错的音乐播放器ui 界面.
下面的程序只用到了aardio中的plus / listbox控件来实现.
演示了plus贴图/进度条
演示了listbox自绘界面和无滚动条滚动
因为播放按钮UI作者未提供其他状态图片,所以未演示此处贴图,其实和1的原理一样
有类似列表需求的可以参考listboxExx自绘扩展库代码, 稍微修修改改即可变为另一个样子了
注: 界面上所用的字体,已打包在工程的lib/font文件夹里, 工程会自动安装该字体
如果列表界面滑动会闪烁, 就去这个mainform.aardio界面里开启双缓冲即可!
下面专门列出来比较重要的代码
主界面mainform.aardio
import fonts.fontAwesome; import win.ui; /*DSG{{*/ mainForm = win.form(text="music demo";right=374;bottom=666;bgcolor=16711422;border="none";composited=1;max=false;min=false;mode="popup";sysmenu=false;title=false) mainForm.add( custom={cls="custom";text="自定义控件";left=0;top=0;right=375;bottom=667;db=1;dl=1;dr=1;dt=1;repeat="tile";z=1} ) /*}}*/ //初始化 var cform = mainForm.custom.loadForm("\dlg\main1.aardio"); //加载右侧界面 subscribe("切换右",function(...){ mainForm.custom.loadForm("\dlg\main2.aardio"); } ) //加载左侧界面 subscribe("切换左",function(...){ mainForm.custom.loadForm("\dlg\main1.aardio"); } ) //加载字体 import fonts ..fonts.addFamily( ..io.appData("aardio/std/semibold.otf",$"~/lib/fonts/.res/semibold.otf"),"semibold" ) mainForm.show(); return win.loopMessage();
界面2代码, main2.aardio
import fonts.fontAwesome; import win.ui; /*DSG{{*/ var winform = win.form(text="music demo";right=374;bottom=666;bgcolor=16711422;border="none";max=false;min=false;mode="popup";sysmenu=false;title=false) winform.add( Formclose={cls="plus";text='\uF00D';left=23;top=23;right=39;bottom=41;color=14737632;font=LOGFONT(h=-18;name='FontAwesome');notify=1;z=2}; bk={cls="bk";left=0;top=571;right=375;bottom=667;bgcolor=16711422;z=6}; listbox={cls="listbox";left=0;top=107;right=375;bottom=568;items={};ownerDraw=1;z=5}; open={cls="plus";text='\uF144';left=331;top=22;right=359;bottom=48;color=14737632;font=LOGFONT(h=-21;name='FontAwesome');notify=1;z=3}; plus={cls="plus";left=16;top=587;right=80;bottom=651;background="\img\pic2.png";z=9}; plus2={cls="plus";left=286;top=587;right=318;bottom=619;background="\img\left4.png";font=LOGFONT(h=-60;name='FontAwesome');iconColor=16777215;notify=1;z=12}; plus3={cls="plus";left=327;top=587;right=359;bottom=619;background="\img\left5.png";font=LOGFONT(h=-60;name='FontAwesome');iconColor=16777215;z=13}; plus8={cls="plus";left=244;top=587;right=276;bottom=619;background="\img\left3.png";font=LOGFONT(h=-60;name='FontAwesome');iconColor=16777215;iconStyle={align="left";font=LOGFONT(h=-40;name='FontAwesome');padding={left=26}};z=11}; progress={cls="plus";left=88;top=646;right=359;bottom=650;bgcolor=14803425;forecolor=12015585;z=10}; static={cls="static";text="Queue";left=0;top=0;right=375;bottom=64;align="center";center=1;color=4473665;font=LOGFONT(h=-24;name='Sofia Pro Semi Bold Condensed');notify=1;transparent=1;z=1}; static2={cls="static";text="Up Next";left=16;top=70;right=164;bottom=102;center=1;color=4473665;font=LOGFONT(h=-32;name='Sofia Pro Semi Bold Condensed');notify=1;transparent=1;z=4}; static3={cls="static";text="This Girl";left=88;top=587;right=186;bottom=613;center=1;color=4473665;font=LOGFONT(h=-27;name='Sofia Pro Semi Bold Condensed');transparent=1;z=7}; static4={cls="static";text="Kung";left=88;top=612;right=161;bottom=636;center=1;color=11775914;font=LOGFONT(h=-19;name='Sofia Pro Semi Bold Condensed');transparent=1;z=8} ) /*}}*/ //按钮皮肤 var bskin = { color={ default=0xFFE0E0E0; hover=0xFFB757E1; active=0xFFB757E1; }; //选中状态 checked = { color={ default=0xFFB757E1; }; } } //应用皮肤 winform.Formclose.setParent(winform.static); winform.open.setParent(winform.static); winform.Formclose.skin(bskin); winform.open.skin(bskin); //头部拖动 winform.static.wndproc = function(hwnd,message,wParam,lParam){ if(message == 0x201/*_WM_LBUTTONDOWN*/){ winform.hitCaption() } } //设置进度区间,可自动切换到进度条显示模式 winform.progress.setProgressRange(1,100); winform.progress.progressPos = 10; //模拟进度再走动 winform.progress.startProgress(500,3); //导入listbox扩展自绘库 import listboxExx; //应用自绘 var libox = listboxExx(winform.listbox,64,0xFEFEFE,0xF2F2F2,0xEBEBEB); //模拟初始数据 var i = 1; for(j=1;15;1){ var sstab = {}; table.mixin(sstab,{ iImage = "\img\d"++math.random(1,7)++".jpg"; text = "star boy"++i; size = "The week day,daft ring!" }); winform.listbox.add(table.tostring(sstab)) i++; } //创建弹出菜单 var menuFile = win.ui.popmenu(winform); menuFile.add( "打开", function(id){ winform.msgbox("打开音乐") } ) //调用扩展库自定义的功能 libox.clickFunc = function(index){ menuFile.popup(); } //窗体关闭 winform.Formclose.onMouseClick = function(wParam,lParam){ winform.progress.stopProgress(); if(winform.parent){ mainForm.close(); }else { winform.close(); } } //模拟切换到左侧 winform.open.oncommand = function(id,event){ publish("切换左",) } winform.show(); win.loopMessage(); return winform;
界面1的代码比界面2要简单很多,就不罗列了,去下载完整工程后自己看吧
最重要的listboxExx.aardio 自绘扩展库代码:
//自绘列表 //listbox自绘 //import win.imageList; import gdi; import fonts.fontAwesome; import com.picture; class listboxExx{ ctor( winform,Iheight=51,backColor=0xFFFFFF,activedColor=0xFFF5E2,hoverColor=0xEEB7FF ){ //先设置行高(自绘用) winform.onMeasureItem = function(measureItem){ measureItem.itemHeight = Iheight; }; //在行间开始自绘 winform.onDrawItem = function(drawItem){ ..gdi.selectBrush( function(hdc,pen,brush){ //获取并分解需要显示的数据(字符串转表) var str = winform.getItemText(drawItem.itemID + 1); if(!str){ return; } var strTab = eval(str) var rc = drawItem.rcItem; ..gdi.fillRect(hdc,backColor,rc); if (drawItem.itemState & 1/*_ODS_SELECTED*/) { ..gdi.fillRect(hdc,activedColor,rc); }else { if(listboxsel == (drawItem.itemID+1)){ ..gdi.fillRect(hdc,hoverColor,rc); } } //删除文件 if(colorsel){ var x,y = ..win.getMessagePos(); var item = winform.hitTest(x,y,true); if((drawItem.itemID+1) == item){ font = ::LOGFONT(weight=500;color=0x6112FF;name='FontAwesome';h=-20); ..gdi.textOut(hdc,font,'\uF141',/*rc.width()/2+345*/rc.right-40, rc.top+Iheight/2); }else { font = ::LOGFONT(weight=500;color=0x9C9C9C;name='FontAwesome';h=-20); ..gdi.textOut(hdc,font,'\uF141',/*rc.width()/2+345*/rc.right-40, rc.top+Iheight/2); } }else { font = ::LOGFONT(weight=500;color=0x9C9C9C;name='FontAwesome';h=-20); ..gdi.textOut(hdc,font,'\uF141',/*rc.width()/2+345*/rc.right-40, rc.top+Iheight/2); } //文件图标 //..win.imageList.shell( 0/*_SHIL_LARGE*/ ).draw(strTab.iImage,hdc,rc.left+20,rc.top+10); //九宫格贴图 var bitmap = ..com.picture.loadBitmap(strTab.iImage) var bmpRC = ..table.clone(rc); bmpRC.left = bmpRC.left+16; bmpRC.top = bmpRC.top+8; bmpRC.right = bmpRC.left+48; bmpRC.bottom = bmpRC.bottom-8; ..gdi.drawBitmap(hdc,bitmap,bmpRC,0,0,0,0); //::DeleteObject(bitmap) //文件名 font = ::LOGFONT(weight=400;color=0x000000); ..gdi.textOut(hdc,font,strTab.text,bmpRC.right+10, rc.top+10); //文件大小 font = ::LOGFONT(weight=300;color=0xB0B0B0); ..gdi.textOut(hdc,font,strTab.size,bmpRC.right+10, rc.top+30); },drawItem.hDC,0xF5FDFF/*背景色*/,0xEEEEEE/*画笔色*/) }; winform.wndproc = function(hwnd,message,wParam,lParam){ select(message) { case 0x200/*_WM_MOUSEMOVE*/ { var x,y = ..win.getMessagePos(); var item = winform.hitTest(x,y,true); if(item == null){ return ; } if(listboxsel == item){ /* 若鼠标在同一行item内游动 */ x,y = ..win.toClient(winform.hwnd,x,y); var delrc = winform.getItemRect(item); delrc.left = delrc.right-40; delrc.top = delrc.top+20; delrc.bottom = delrc.bottom-20 ; //判断鼠标游动的区间是不是在[删除]按钮范围 if( ::PtInRect(delrc,x,y) ){ if(colorsel == false){ //鼠标从[删除]按钮外部移动到内部区域 colorsel = true; //设置更新区,并更新 winform.invalidate(winform.getItemRect(item)) winform.update(); } }else { if(colorsel == true){ //鼠标从内到外 colorsel = false; //设置更新区,并更新 winform.invalidate(winform.getItemRect(item)) winform.update(); } } }else { colorsel = false; //设置hover效果 listboxsel = item; if(beforesel == null){ //第一次执行,初始化 beforesel = listboxsel; }else { //先关闭上次绘制区域 if(beforesel){ winform.invalidate(winform.getItemRect(beforesel),0) } beforesel = listboxsel; } //绘制当前区域 winform.invalidate(winform.getItemRect(item)); winform.update(); } } case 0x202/*_WM_LBUTTONUP*/ { //删除功能 if(colorsel){ /* 若鼠标在删除按钮区域内单击了 */ if(this.clickFunc){ this.clickFunc(winform.selIndex); } return ; }; } case 0x20A/*_WM_MOUSEWHEEL*/{ //滚轮消息 var wheelDelta = ..raw.convert({int wParam=wParam },{word vk;word delta}).delta; if( wheelDelta > 0 ){ ::SendMessageInt(winform.hwnd, 0x115/*_WM_VSCROLL*/, 0, 0); }else { ::SendMessageInt(winform.hwnd, 0x115/*_WM_VSCROLL*/, 1, 0); } return 0; }; else { } } } return this; }; }
以上将之前分享的listbox代码精简了很多,更利于观看
好了,废话不多说, 下面是完整的工程下载:
如果有用的上这个界面的人,记得来留言点个赞哦,O(∩_∩)O~
更新:
结合新写的plusExbar.aardio自绘滚动条扩展库, 可以使这个播放器列表更完美
该滚动条自绘扩展库详情:https://www.chengxu.xyz/t/372
使用后效果如下:
8 个回复 | 最后更新于 2022-03-16
登录后方可回帖
不错,一直在进步!赞~