现在注册 登 录 首页 Chat

aardio界面练习-音乐播放器

By admin at 2020-03-29 • 5人收藏 • 4400人看过
admin

第二弹: 现在手机的ui好多, 今天仿一个不错的音乐播放器ui 界面.

下面的程序只用到了aardio中的plus / listbox控件来实现.

  1. 演示了plus贴图/进度条

  2. 演示了listbox自绘界面和无滚动条滚动

  3. 因为播放按钮UI作者未提供其他状态图片,所以未演示此处贴图,其实和1的原理一样

有类似列表需求的可以参考listboxExx自绘扩展库代码, 稍微修修改改即可变为另一个样子了

注: 界面上所用的字体,已打包在工程的lib/font文件夹里, 工程会自动安装该字体

如果列表界面滑动会闪烁, 就去这个mainform.aardio界面里开启双缓冲即可!

GIF.gif

下面专门列出来比较重要的代码

主界面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代码精简了很多,更利于观看


好了,废话不多说, 下面是完整的工程下载:

aardio界面练习-音乐播放器.zip


如果有用的上这个界面的人,记得来留言点个赞哦,O(∩_∩)O~


更新:

结合新写的plusExbar.aardio自绘滚动条扩展库, 可以使这个播放器列表更完美

该滚动条自绘扩展库详情:https://www.chengxu.xyz/t/372

使用后效果如下:

8 个回复 | 最后更新于 2022-03-16
appletwoto
appletwoto
2020-03-29   #1

不错，一直在进步！赞~

ccbwx
ccbwx
2020-03-29   #2

牛！！！

admin
admin
2020-03-30   #3

更新： 有些人不喜欢listbox那个焦点框，那么可以这样

if (drawItem.itemState & 0x10/*_ODS_FOCUS*/) {  
    //去掉烦人的焦点框
    ::DrawFocusRect(hdc,rc);
}


nod32
nod32
2020-04-02   #4

收藏了，厉害

zhlzhang
zhlzhang
2020-04-03   #5

寻-浔-荨＆
寻-浔-荨＆
2020-10-26   #6

必须赞一个

wonghungmou
wonghungmou
2022-03-16   #7

666

the100s
the100s
2022-03-16   #8

登录后方可回帖

登 录

现在注册     忘记密码

话题广场 查看更多
aardio csharp dll UI halcon 波形图 chatGPT 摄像头 工具 web python excel wpf 表格 软件成品 ai ocx 游戏 js 图表
信息栏
本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...

上位机开发笔记 Powered By © 2006-2016 POPDES 论坛统计
Processed in 10.384 ms, 4 SQL Query(s), 706.19 KiB Memory Usage