系列教程：使用 plus 控件制作精美界面

常年最低调 · 发表于 2014-7-21 09:56:50

赞，强大的aardio

at86 · 发表于 2014-8-7 13:18:32

很棒。

PowerfulTan · 发表于 2014-8-12 10:53:03

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

sdfs · 发表于 2014-9-4 10:22:07

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

94237 · 发表于 2014-9-4 17:52:33

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

nanyi0509 · 发表于 2014-9-28 12:23:03

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

sdaau · 发表于 2014-10-3 14:50:24

真的不错，愿aardio遍地开花！

雪枯灵 · 发表于 2014-10-15 17:08:01

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

这样就不用分太多小图了

神码 · 发表于 2014-10-15 17:26:29

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

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

erdeni · 发表于 2015-2-3 16:29:53

很漂亮用学习了

土冒 · 发表于 2015-2-6 20:33:56

很好很强大，学习了！
觉得listview放在一个漂亮的界面里太不协调了，自绘咱又没那个水平，于是突发奇想用控件套嵌简单模拟了一个listview样式。变通一下，其实也可以设计出自己想要的效果来...

class ctrlLv{
ctor(frmbk /*输入构造函数所需要的参数*/ ){
wfx,wfy,wfcx,wfcy = frmbk.getPos()
ctab = {} //控件name表
selidx = 0 //记录选中项的索引值
lastcy = 0 //记录尾项的cy坐标
//mouseidx = 0
frmbk.add(
bf={cls="custom";left=0;top=0;right=wfcx;bottom=wfcy;bgcolor=16777215;z=2};
scroll={cls="custom";left=wfcx-13;top=0;right=wfcx;bottom=wfcy;hide=1;z=1};
)
frmbk.scroll.add(
bf={cls="static";left=1;top=1;right=12;bottom=wfcy-1;bgcolor=8421504;notify=1;z=7}
)
frmbf = frmbk.bf
frmbf.wndproc = function(hwnd,message,wParam,lParam){
if(!#ctab) return;
if(message=0x200/*_WM_MOUSEMOVE鼠标移动指向*/){
for(i=1;#ctab;1){
if(frmbf[ctab[i]].bgcolor = 16777215 || frmbf[ctab[i]].bgcolor=15780518) continue;
frmbf[ctab[i]].bgcolor = 16777215
frmbf[ctab[i]].redraw()
//mouseidx = 0
}
frmbf.notify=0
}
elseif(message=0x201/*_WM_LBUTTONDOWN鼠标左键单击*/){
for(i=1;#ctab;1){
if(frmbf[ctab[i]].bgcolor=16777215) continue;
frmbf[ctab[i]].bgcolor = 16777215
frmbf[ctab[i]].redraw()
selidx = 0
::PostMessage(frmbk.hwnd,0x201,1,1)
frmbf.notify=0
break;
}
}
}
import mouse
var scroll = frmbk.scroll.bf
var mx,my,srlrc
scroll.wndproc = function(hwnd,message,wParam,lParam){
if(message=0x201/*_WM_LBUTTONDOWN鼠标左键点击*/){
mx,my = mouse.getPos()
srlrc = scroll.getRect()
}
if(message=0x202/*_WM_LBUTTONUP鼠标左键弹起*/) srlrc = false;
if(message=0x200/*_WM_MOUSEMOVE鼠标移动*/){
if(!srlrc) return;
var dx,dy = mouse.getPos()
var frc = frmbf.getRect()
var sdy = dy-my
//var fdy = 0-sdy*lastcy/(wfcy-2)
var fdy=0
if(sdy<0){
if(sdy<=1-scroll.top){
sdy = 1-scroll.top
fdy = 0-frc.top
}
else fdy = frc.top*sdy/(srlrc.top-1);
}
elseif(sdy>0){
if(sdy>=wfcy-scroll.bottom-1){
sdy = wfcy-scroll.bottom-1
fdy = wfcy-frc.bottom
}
else fdy = (wfcy-frc.bottom)*sdy/(wfcy-1-srlrc.bottom);
}
if(sdy=0) return;
::OffsetRect(frc,0,fdy)
frmbf.setRect(frc)
::OffsetRect(srlrc,0,sdy)
scroll.setRect(srlrc)
my = dy
//mx,my = dx,dy
}
}
}
//获取项索引文本
getItem = function(){
if(selidx) return { idx=selidx;tt1=frmbf[ctab[selidx]].tt1.text;tt2=frmbf[ctab[selidx]].tt2.text };
else return {idx="";tt1="";tt2=""};
}
setItemRect = function(idx){
var m = ..math.floor(wfcx/84)
idx = idx-1
var x = (idx%m)*84+1
var y = ..math.floor(idx/m)*84+1
var cx = x+83
var cy = y+83
return x,y,cx,cy
}
setScrollRect = function(){
if(lastcy<=wfcy){
frmbk.scroll.hide = 1
return
}
var srl = frmbk.scroll.bf
var rc = frmbf.getRect()
var y = (0-rc.top)/lastcy*(wfcy-2)
var cy = (wfcy-2)*(wfcy-rc.top)/lastcy
if(y<1) y = 1;
if(cy>wfcy-1) cy = wfcy-1;
srl.top = y
srl.bottom = cy
frmbk.scroll.hide = 0
}
//添加一个项目
add = function(ttab,img){
..table.push( ctab,"ctrl"+..time.tick() )
var n = #ctab
var ctrl = ctab[n]
var x,y,cx,cy = this.setItemRect(n)
frmbf.add( [ctrl] = {cls="custom";idx=n;left=x;top=y;right=cx;bottom=cy;bgcolor=16777215;dl=1;dt=1;z=1} )
//frmbf[ctrl].setRect( ::RECT(x,y,cx,cy) )
frmbf[ctrl].add(
img = {cls="plus";bottom=38;right=60;left=24;top=2;dl=1;dt=1;z=5};
tt1 = {cls="static";left=1;top=39;right=83;bottom=60;align="center";center=1;transparent=1;dl=1;dt=1;z=4};
tt2 = {cls="static";left=1;top=61;right=83;bottom=78;align="center";center=1;transparent=1;dl=1;dt=1;z=4};
st = {cls="static";left=0;top=0;right=83;bottom=83;transparent=1;notify=1;dl=1;dt=1;z=8}
)
frmbf[ctrl].img.background = img
frmbf[ctrl].tt1.text = ttab[2]
frmbf[ctrl].tt2.text = ttab[1]
//滚动条设置
if(cy>lastcy){
lastcy = cy
if(cy>wfcy){
frmbf.bottom = frmbf.top+cy
this.setScrollRect()
}
}
frmbf[ctrl].st.wndproc = function(hwnd,message,wParam,lParam){
select(message) {
case 0x203/*_WM_LBUTTONDBLCLK鼠标左键双击*/ {
//frmbf.msgbox(frmbf[ctrl].tt1.text++'\r\n'++frmbf[ctrl].tt2.text)
::PostMessage(frmbk.hwnd,0x203,1,1)
}
case 0x201/*_WM_LBUTTONDOWN鼠标左键单击*/ {
for(i=1;#ctab;1){
if(frmbf[ctab[i]].bgcolor = 16777215) continue;
if(ctab[i]!=ctrl){
frmbf[ctab[i]].bgcolor = 16777215
frmbf[ctab[i]].redraw()
}
}
if(frmbf[ctrl].bgcolor=15780518) return;
frmbf[ctrl].bgcolor=15780518
selidx = frmbf[ctrl].idx
frmbf.notify=1
frmbf[ctrl].redraw()
//frmbf.redraw()
::PostMessage(frmbk.hwnd,0x201,1,1)
}
case 0x200/*_WM_MOUSEMOVE鼠标移动指向*/ {
for(i=1;#ctab;1){
if(frmbf[ctab[i]].bgcolor = 16777215) continue;
if(ctab[i]!=ctrl && frmbf[ctab[i]].bgcolor!=15780518){
frmbf[ctab[i]].bgcolor = 16777215
frmbf[ctab[i]].redraw()
}
}
if(frmbf[ctrl].bgcolor=12639424 || frmbf[ctrl].bgcolor=15780518) return;
frmbf[ctrl].bgcolor=12639424
//mouseidx = frmbf[ctrl].idx
frmbf.notify=1
frmbf[ctrl].redraw()
//frmbf.redraw()
}
}
}
}
//删除选中项目
del = function(){
if(!selidx) return;
frmbf.remove(ctab[selidx])
..table.remove(ctab,selidx)
var n = #ctab
//if(!n) return;
for(i=selidx;n;1){
var ctrl = frmbf[ctab[i]]
var x,y,cx,cy = this.setItemRect(i)
ctrl.setRect( ::RECT(x,y,cx,cy) )
ctrl.idx = i
}
selidx = 0
::PostMessage(frmbf.hwnd,0x201,1,1)
if(!n) return;
var x,y,cx,cy = this.setItemRect(n)
if(cy<lastcy ){
var rc = frmbf.getRect()
var dy=0
if(cy>wfcy) rc.bottom=rc.top+cy;
if(rc.bottom<wfcy) dy=wfcy-rc.bottom;
if(cy<wfcy || rc.top+dy>0) dy=0-rc.top;
lastcy = cy
::OffsetRect(rc,0,dy)
frmbf.setRect( rc )
this.setScrollRect()
}
}
}
import win.ui;
import inet.http
var http = inet.http()
/*DSG{{*/
var winform = ..win.form(text="aardio Form";right=432;bottom=399;bgcolor=15780518)
winform.add(
adduser={cls="button";text="添加";left=6;top=259;right=99;bottom=289;z=2};
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};
itemidx={cls="static";text="项目索引:";left=210;top=248;right=272;bottom=264;transparent=1;z=5};
itemidxv={cls="static";left=276;top=248;right=399;bottom=264;bgcolor=16777215;z=4};
itemtt1={cls="static";text="项目文本1:";left=210;top=267;right=272;bottom=283;transparent=1;z=6};
itemtt1v={cls="static";left=276;top=267;right=399;bottom=283;bgcolor=16777215;z=8};
itemtt2={cls="static";text="项目文本2:";left=210;top=286;right=272;bottom=302;transparent=1;z=7};
itemtt2v={cls="static";left=276;top=286;right=399;bottom=302;bgcolor=16777215;z=9};
rmuser={cls="button";text="移除";left=107;top=259;right=200;bottom=289;z=3}
)
/*}}*/
math.randomize()
var uimg = http.get("http://qlogo3.store.qq.com/qzone/12345/12345/50")
var cl = ctrlLv(winform.custom)
winform.custom.wndproc = function(hwnd,message,wParam,lParam){
select(message) {
case 0x201/*_WM_LBUTTONDOWN鼠标左键单击*/ {
var item = cl.getItem()
winform.itemidxv.text = item.idx
winform.itemtt1v.text = item.tt1
winform.itemtt2v.text = item.tt2
}
case 0x203/*_WM_LBUTTONDBLCLK鼠标左键双击*/ {
var item = cl.getItem()
win.msgbox( item.tt1+'\r\n'+item.tt2,"项目文本")
}
}
}
winform.adduser.oncommand = function(id,event){
var tab = {math.random(22222222, 999999999);"昵称:"+string.random(5)}
cl.add(tab,uimg)
}
winform.rmuser.oncommand = function(id,event){
cl.del()
}
winform.show();
win.loopMessage();

复制代码

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

erdeni · 发表于 2015-2-12 17:28:48

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

a31072456 · 发表于 2015-4-17 11:33:10

很给力老大加油

ZakaryTime · 发表于 2015-4-21 15:52:01

谢谢，谢得真的很好，学习了！学好了再来做贡献了！！！！

longyujz · 发表于 2015-5-8 17:48:51

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

zlyl3520 · 发表于 2015-10-21 07:35:40

太谢谢了。正需要。

langzi110 · 发表于 2016-3-31 16:56:42

不错，值得学习下

qq317813922 · 发表于 2016-4-28 09:19:15

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

lovellshn · 发表于 2016-4-29 22:19:35

支持一下

		自动登录	找回密码
密码			注册会员