DUILIB界面库使用介绍

1、Duilib界面库使用介绍一、Duilib简介Duilib是以DirectUI为技术原理开发的一款轻量级Windows桌面UI库，具有入门简单，使用方便等特点，在国内吸引了不少的开发者。其开发原型为国外大神viksoe的http:/www.viksoe.dk/code/windowless1.htm文章中提供的源码，国内开源前辈以此为基础：修正Bug、优化程序结构、提高稳定性和易用性，是一款功能强大，使用方便的界面库。界面库使用XML来描述界面风格，界面布局，可以很方便的构建高效，绚丽的，非常易于扩展的界面。从而很好的将界面和逻辑分离，同时易于实现各种超炫的界面效果如换色，换肤，透明等。Dui

2、lib界面库的出现解决了使用传统MFC界面库开发软件不美观、界面细节处理不好、使用硬编码、开发效率低下、生成程序体积大等问题。国内的以下客户端都曾经以此为基础拓展并使用了duilib：1.百度杀毒2.微信PC客户端Q摟竅联系人绿毛兔子7_X年会光眾訐+么？»)；绿毛兔子i语音01:26泥汗没扫什缢潑且拦悔对自由的向徨,天马行生瞄生涯擁的心了无牵挂穿过幽睛的岁月也曾咸到彷徨当你低头的鋒间.才发觉虾的路，心中那自山的世真.如此的湛汹高说5n西瓜拔睛a口>8©微信团啟收删怯用探闿片3.爱奇艺客户端4.酷我音乐播放列表首页分组列表主T匚I意见反愦热畝酷我游戏°玄明星

3、更爹专辑推荐好听特色评书内地剧也感日本动漫非主硫中国风铃声网络疣行浪漫搜黍农手、畝名，畝词、寺辑、MV宝贝我们不要-范玮琪搁浅-张杰来者摩毘-萨顶顶更宾-辛晓琪扌立拉甌-徒隹莹珍惜玄相-李宇舂凤凰-阿兰达瓦卓玛国挂失-阿杜桃花屍-汪苏滋欧美日韩欧美专掲日韩专辑月光下想饰-Sara网貉MV瞪我邑舟谓频-r-Ei!律/以同择的登态聆昕找们就能渡吐牖嗾主碧：亘大人&宦邑酷我电台*7酷我°丁回到旧版购酷我音乐討诃当誌认列表周黒他热门标签华语专指男明星0循环II东凤佛周杰伦我的05:15EQ'W词C歌词MVE音乐諾+添加X删I扫E行榜歌手分粪搜索00:02一諾品音质,其他基于D

4、uilib的软件不完全列表：百度：PPS百度卫士91助手腾讯：企业微信阿里：钉钉支付宝安全控件PP助手华为：华为网盘书生云：书生企业云盘微软：微软壁纸网易：易信云音乐荒野行动PC版金山：金山快盘京东：咚咚cctv：cbox蘑菇街：TeamTalk火绒：火绒安全软件盘古：盘古越狱工具顺网：网维大师91y网狐：网狐经典版墨迹风云：墨迹天气zoomcloud：Zoom视频会议搜狗：搜狗手机助手沃通：沃通代码签名工具驱动人生：驱动人生人生日历维棠：维棠深圳市北斗智研科技：智能办公助手ERP管理系统二、Duilib原理DirectUI意为直接在父窗口上绘图(Paintonparentdedirectly

5、)。即子窗口不以窗口句柄的形式创建(windowless)，只是逻辑上的窗口，绘制在父窗口之上。通俗来说就是在窗口上指定一块区域(仅仅是一个区域，不是一个实体控件)通过各种消息模拟一个控件的功能。完全可以在一个对话框类的OnMouseMove、OnLButtonDown等函数中模拟一个按钮出来。但是模拟的控件一多就混乱了，为了统一管理，逻辑上更清晰类似于实体控件。把每种控件封装成类处理各种消息，并通过自定义的消息分发机制把消息分发到各个模拟控件里。DuiLib一部分技术特点界面与业务逻辑分离使用XML配置界面界面布局方式灵活多样强大的事件处理机制基于GDI和脏矩形的高效绘制技术支持多种资源方式

6、，支持多种图片格式支持alpha混合，支持窗口透明支持动态切换资源位置方式换肤支持unicode内存占用小无第三方库依赖CPaintManagerUI->管理控件的绘制以及消息处理分发等功能其中关联了真正的主窗口HWDN以及HOVER,FOCUS,CLICK等控件指针。CControlUI->大多控件的基类。包含控件各种属性，需要子类控件处理的消息的虚函数等。button响应消息过程1. CPaintManagerUIfindcontrol,根据点找到CControlUI2. 该控件调用虚函数的DoEvet（如按钮具体是改变自身一些flag）3. 调用基类（CControlUI）的

7、Invalidate.（此Invalidate是依次找父UI（layout之类）和当前区域相交结果，只刷新那一部分）.4. m_pRoot调用DoPaint。从最下层依次调用有子关系的CControlUI的DoPaint。（涉及剪切，区域相交等）COptionUI选项控件CS1iderUl滑块控件CListCI列农柜控件CDialogl-ayoutUI对话枢布同CEditUl编岳框校件Cfextll文本控件CButtonll按翎控件CProgresslIl进度条控件CComboUl笈选框控件CVerticalLayoutli垂|!（布局CrabLayoutlll选项页布局控件层核心层CLabe

8、lUI标签控件CScrollBartl滚动条控件OControlUI基础控件介CRichEditUIKichldit控件CHorizontall-ayoutll水平布局CTileLayoutllV铺布局控件UI构建窗体隽理器UIMarkupXML解析UDialogUuilder创建UlCContnincrUl容器容器恪式文字交互二、运彳丁流程Win32消息路由如下：消息产生。系统将消息排列到其应该排放的线程消息队列中。线程中的消息循环调用GetMessage(orPeekMessage)获取消息。传送消息TranslateMessageandDispatchMessageto窗口过程(Wind

9、owsprocedure)在窗口过程里进行消息处理#include"././DuiLib/Ullib.h"usingnamespaceDuiLib;#ifdef_DEBUG# ifdef_UNICODE# pragmacomment(lib,"././Lib/DuiLib_ud.lib")# else# pragmacomment(lib,"././Lib/DuiLib_d.lib")# endif#else# ifdef_UNICODE# pragmacomment(lib,"././Lib/DuiLib_u.lib&qu

10、ot;)# else# pragmacomment(lib,"././Lib/DuiLib.lib")# endif#endifclassCFrameWnd:publicCWindowWndpublic:virtualLPCTSTRGetWindowClassName()constreturn_T("FrameWnd");virtualvoidOnFinalMessage(HWNDhWnd)deletethis;intAPIENTRY_tWinMain(HINSTANCEhInstance,HINSTANCEhPrevInstance,LPTSTRlpC

11、mdLine,intnShowCmd)/new一个窗口对象CFrameWnd*pFrame=newCFrameWnd;/注册窗口类、创建窗口pFrame->Create(NULL,_T("sample01"),UI_WNDSTYLE_FRAME,UI_WNDSTYLE_EX_FRAME,100,100,800,600,NULL);/显示窗口、进入窗口消息循环pFrame->ShowModal();return0;使用CFrameWnd继承自CWindowWnd,CWindowWnd必须实现的一个纯虚接口是GetWindowClassName来表明她的窗口类名。在

12、OnFinalMessage中deletethis是因为DuiLib中需要使用new来生成一个窗口，delete可以防止内存泄漏(在后面的DuiLib程序中可以看到都只有new而没有delete，这是因为DuiLib内部在窗口销毁时已经做了delete的操作)。以下是关键的几个方法：1、创建窗口HWNDCWindowWnd:Create(HWNDhwndParent,LPCTSTRpstrName,DWORDdwStyle,DWORDdwExStyle,intx,inty,intcx,intcy,HMENUhMenu)if(GetSuperClassName()!=NULL&&

13、!RegisterSuperclass()returnNULL;if(GetSuperClassName()=NULL&&!RegisterWindowClass()returnNULL;m_hWnd=:CreateWindowEx(dwExStyle,GetWindowClassName(),pstrName,dwStyle,x,y,cx,cy,hwndParent,hMenu,CPaintManagerUI:GetInstance(),this);ASSERT(m_hWnd!=NULL);returnm_hWnd;在调用CreateWindowEx这个windowsAPI前

14、会先调用RegisterWindowClass注册窗口类。2、显示窗口并进入消息循环UINTCWindowWnd:ShowModal()ASSERT(:IsWindow(m_hWnd);UINTnRet=0;HWNDhWndParent=GetWindowOwner(m_hWnd);:ShowWindow(m_hWnd,SW_SHOWNORMAL);:EnableWindow(hWndParent,FALSE);MSGmsg=0;while(:IsWindow(m_hWnd)&&:GetMessage(&msg,NULL,0,0)if(msg.message=WM_CL

15、OSE&&msg.hwnd=m_hWnd)nRet=msg.wParam;:EnableWindow(hWndParent,TRUE);:SetFocus(hWndParent);if(!CPaintManagerUI:TranslateMessage(&msg):TranslateMessage(&msg);:DispatchMessage(&msg);if(msg.message=WM_QUIT)break;:EnableWindow(hWndParent,TRUE);:SetFocus(hWndParent);if(msg.message=WM_Q

16、UIT):PostQuitMessage(msg.wParam);returnnRet;先调用了ShowWindow去显示窗口，然后进入GetMessage消息循环。3、窗口过程LRESULTCALLBACKCWindowWnd:_WndProc(HWNDhWnd,UINTuMsg,WPARAMwParam,LPARAMlParam)CWindowWnd*pThis=NULL;if(uMsg=WM_NCCREATE)LPCREATESTRUCTlpcs=reinterpret_cast<LPCREATESTRUCT>(lParam);pThis=static_cast<CWi

17、ndowWnd*>(lpcs->lpCreateParams);pThis->m_hWnd=hWnd;:SetWindowLongPtr(hWnd,GWLP_USERDATA,reinterpret_cast<LPARAM>(pThis);elsepThis=reinterpret_cast<CWindowWnd*>(:GetWindowLongPtr(hWnd,GWLP_USERDATA);if(uMsg=WM_NCDESTROY&&pThis!=NULL)LRESULTlRes=:CallWindowProc(pThis->m

18、_OldWndProc,hWnd,uMsg,wParam,lParam);:SetWindowLongPtr(pThis->m_hWnd,GWLP_USERDATA,0L);if(pThis->m_bSubclassed)pThis->Unsubclass();pThis->m_hWnd=NULL;pThis->OnFinalMessage(hWnd);returnlRes;if(pThis!=NULL)returnpThis->HandleMessage(uMsg,wParam,lParam);elsereturn:DefWindowProc(hWnd,u

19、Msg,wParam,lParam);4、windows消息处理LRESULTCDialogWnd:HandleMessage(UINTuMsg,WPARAMwParam,LPARAMlParam)LRESULTlRes=0;BOOLbHandled=TRUE;switch(uMsg)caseWM_CREATE:caseWM_CLOSE:caseWM_DESTROY:caseWM_NCACTIVATE:caseWM_NCCALCSIZE:caseWM_NCPAINT:lRes=OnCreate(uMsg,wParam,lParam,bHandled);break;lRes=OnClose(uM

20、sg,wParam,lParam,bHandled);break;lRes=OnDestroy(uMsg,wParam,lParam,bHandled);break;lRes=OnNcActivate(uMsg,wParam,lParam,bHandled);break;lRes=OnNcCalcSize(uMsg,wParam,lParam,bHandled);break;lRes=OnNcPaint(uMsg,wParam,lParam,bHandled);break;caseWM_NCHITTEST:caseWM_SIZE:lRes=OnNcHitTest(uMsg,wParam,lPa

21、ram,bHandled);break;lRes=OnSize(uMsg,wParam,lParam,bHandled);break;caseWM_GETMINMAXINFO:lRes=OnGetMinMaxInfo(uMsg,wParam,lParam,bHandled);break;caseWM_SYSCOMMAND:lRes=OnSysCommand(uMsg,wParam,lParam,bHandled);break;default:bHandled=FALSE;if(bHandled)returnlRes;if(m_pm.MessageHandler(uMsg,wParam,lPar

22、am,lRes)returnlRes;returnCWindowWnd:HandleMessage(uMsg,wParam,lParam);5、CPaintManagerUI消息处理boolCPaintManagerUI:MessageHandlerImpl(UINTuMsg,WPARAMwParam,LPARAMlParam,LRESULT&lRes)/Notreadyyet?if(m_hWndPaint=NULL)returnfalse;SendAsyncNotify();/Cyclethroughlistenersfor(inti=0;i<m_aMessageFilters

23、.GetSize();i+)boolbHandled=false;LRESULTlResult=static_cast<IMessageFilterUI*>(m_aMessageFiltersi)->MessageHandler(uMsg,wParam,lParam,bHandled);if(bHandled)lRes=lResult;returntrue;/Customhandlingofeventsswitch(uMsg)caseWM_LBUTTONDOWN:/editcloseproblemissolvedinitsdoeventPOINTpt=GET_X_LPARAM

24、(lParam),GET_Y_LPARAM(lParam);m_ptLastMousePos=pt;CControlUI*pControl;if(m_pEventRClick!=NULL)pControl=m_pEventRClick;elsepControl=FindControl(pt);if(pControl=NULL)SetFocus(NULL);pControl=FindCaptureControl(pt);if(pControl)PostMessage(m_hWndPaint,WM_NCLBUTTONDOWN,HTCAPTION,MAKELPARAM(pt.x,pt.y);brea

25、k;if(pControl->GetManager()!=this)break;pControl->SetFocus();SetCapture();m_pEventClick=pControl;TEventUIevent=0;event.Type=UIEVENT_BUTTONDOWN;event.pSender=pControl;event.wParam=wParam;event.lParam=lParam;event.ptMouse=pt;event.wKeyState=(WORD)wParam;event.dwTimestamp=:GetTickCount();pControl

26、->Event(event);break;default:break;SendAsyncNotify();returnfalse;6、控件绘制&发送notifyvoidCButtonUI:DoEvent(TEventUI&event)if(!IsMouseEnabled()&&event.Type>UIEVENT_MOUSEBEGIN&&event.Type<UIEVENT_MOUSEEND)if(m_pParent!=NULL)m_pParent->Event(event);elseCLabelUI:DoEvent(ev

27、ent);return;if(event.Type=UIEVENT_BUTTONDOWN|event.Type=UIEVENT_DBLCLICK)if(:PtInRect(&m_rcItem,event.ptMouse)&&IsEnabled()m_uButtonState|=UISTATE_PUSHED|UISTATE_CAPTURED;Invalidate();return;if(event.Type=UIEVENT_MOUSEMOVE)if(m_uButtonState&UISTATE_CAPTURED)!=0)if(:PtInRect(&m_rc

28、Item,event.ptMouse)m_uButtonState|=UISTATE_PUSHED;elsem_uButtonState&=UISTATE_PUSHED;Invalidate();return;if(event.Type=UIEVENT_BUTTONUP)if(m_uButtonState&UISTATE_CAPTURED)!=0)if(:PtInRect(&m_rcItem,event.ptMouse)Activate();m_uButtonState&=(UISTATE_PUSHED|UISTATE_CAPTURED);Invalidate(

29、);return;if(event.Type=UIEVENT_CONTEXTMENU)if(IsContextMenuUsed()m_pManager->SendNotify(this,_T("menu"),event.wParam,event.lParam);return;CLabelUI:DoEvent(event);boolCButtonUI:Activate()if(!CControlUI:Activate()returnfalse;if(m_pManager!=NULL)m_pManager->SendNotify(this,_T("clic

30、k");returntrue;6、CPaintManagerUI执行notify通知voidCPaintManagerUI:SendNotify(CControlUI*pControl,LPCTSTRpstrMessage,WPARAMwParam/*=0*/,LPARAMlParam/*=0*/,boolbAsync/*=false*/)TNotifyUIMsg;Msg.pSender=pControl;Msg.sType=pstrMessage;Msg.wParam=wParam;Msg.lParam=IParam;SendNotify(Msg,bAsync);voidCPain

31、tManagerUI:SendNotify(TNotifylll&Msg,boolbAsync/*=false*/)Msg.ptMouse=m_ptLastMousePos;Msg.dwTimestamp=:GetTickCount();if(m_bUsedVirtualWnd)Msg.sVirtualWnd=Msg.pSender->GetVirtualWnd();if(!bAsync)/Sendtoalllistenersif(Msg.pSender!=NULL)if(Msg.pSender->OnNotify)Msg.pSender->OnNotify(&

32、;Msg);for(inti=0;i<m_aNotifiers.GetSize();i+)static_cast<INotifyUI*>(m_aNotifiersi)->Notify(Msg);elseTNotifylll*pMsg=newTNotifylll;pMsg->pSender=Msg.pSender;pMsg->sType=Msg.sType;pMsg->wParam=Msg.wParam;pMsg->lParam=Msg.lParam;pMsg->ptMouse=Msg.ptMouse;pMsg->dwTimestamp

33、=Msg.dwTimestamp;m_aAsyncNotify.Add(pMsg);7、主界面程序初始化时，添加观察者对象到CPaintManagerUI中。LRESULTCDialogWnd:OnCreate(UINTuMsg,WPARAMwParam,LPARAMlParam,BOOL&bHandled)LONGstyleValue=:GetWindowLong(*this,GWL_STYLE);styleValue&=WS_CAPTION;:SetWindowLong(*this,GWL_STYLE,styleValue|WS_CLIPSIBLINGS|WS_CLIPCH

34、ILDREN);RECTrcClient;:GetClientRect(*this,&rcClient);:SetWindowPos(*this,NULL,rcClient.left,rcClient.top,rcClient.right-rcClient.left,rcClient.bottom-rcClient.top,SWP_FRAMECHANGED);m_pm.Init(m_hWnd);m_preMsgHandler.SetManager(&m_pm);m_pm.AddPreMessageFilter(&m_preMsgHandler);CDialogBuild

35、erbuilder;CControlUI*pRoot=builder.Create(m_strXml.GetData(),(UINT)0,m_DialogBuilderCallback,&m_pm);ASSERT(pRoot&&"FailedtoparseXML");m_pm.AttachDialog(pRoot);m_pm.AddNotifier(this);SIZEszInitWindowSize=m_pm.GetInitSize();if(szInitWindowSize.cx!=0):SetWindowPos(*this,NULL,0,0,s

36、zInitWindowSize.cx,szInitWindowSize.cy,SWP_NOZORDER|SWP_NOMOVE);InitCommonBottons();Init();return0;8.响应观察者notify消息voidCDialogWnd:Notify(TNotifyUI&msg)if(msg.sType=_T("windowinit")elseif(msg.sType=_T("click")事件类型消息说明Senderclick鼠标点击CButtonUIdropdown下拉显示CComboUIheaderclick点击列标题C

37、ListHeaderItemUIitemactivateCListElementUI、CListContainerElementUIitemclick单击选项CListLabelElementUI、CListContainerElementUIitemselect选择选项CComboUI、CListUIkillfocus失去焦点CControlUIlinkCTextUI、CListTextElementUImenuCButtonUI、CControlUIreturn回车CEditWnd、CRichEditUIscroll滚动CScrollBarUIselectchanged变更选项COptio

38、nUIsetfocus获得焦点CControlUIshowactivexCActiveXUItabselect标签页被选中CTabLayoutUItimerCControlUIvaluechanged值发生变化CSliderUIwindowinit窗体初始化四、界面布局布局：名称说明VerticalLayout垂直布局：其内兀素按照竖直方式排列HorizontalLayout水平布局：其内兀素按照水平方式排列TabLayout标签页，配合Option使用功能控件：名称说明Label标签Button按钮Text文本Progress进度条Edit输入框Option标签ScrollBar滚动条Lis

39、t列表TreeView树属性：名称说明name控件名字，同一窗口内必须唯一。bkcolor背景颜色。如：OxFFFFFFFF。一般的颜色RGB表示都是六位，这里的八位中的前两位为FF,后面六位与普通RGB颜色编码相同。bkcolor2背景渐变色2,和bkcolor配合使用bkimage背景图片，如(file二'aaa.png'dest='0,0,0,0'source二'0,0,0,0'corner二'0,0,0,0')width控件预设的宽度height控件预设的高度text显示文本tooltip鼠标悬浮提示enabled是否可以

40、响应用户操作mouse本控件是否可以响应鼠标操作visible是否可见padding外边距，如(2,2,2,2)。边距不属于此控件。inset容器的内边距，如(2,2,2,2)。边距属于此控件。bordercolor边框颜色，如(OxFFOOOOOO)。align文字对齐方式。可以取left、right、center、top、bottom。textpadding文字显示的边距，如(2,2,2,2)showhtml是否使用类html富文本绘制vscrollbar是否使用竖向滚动条，只有内容超出容器后才会显示滚动条。示例:1. 按钮Buttonname="closebtn"te

41、xt="关闭"tooltip="关闭窗口"float="true"pos="44,5,74,24"width="28"normalimage="file='SysBtnCloseNormal.png'hotimage="file='SysBtnCloseFocus.png'"pushedimage="file='SysBtnCloseFocus.png'"/>2. 下拉框Comboname=&

42、quot;ComboDemo1"width="100"height="30"normalimage="file='ComboBox/Combo_nor.png"hotimage="file='ComboBox/Combo_over.png"pushedimage="file='ComboBox/Combo_over.png">ListLabelElementtext="zdy"selected="true"/>

43、ListLabelElementtext="zzz"/>/Combo>3. 编辑框Edittext="hello"font="2"textcolor="#FF00a0e9"bordersize="2"bordercolor="#FF000000"focusbordercolor="#FFFF0000"/>4. 图片<Containerwidth="30"height="30"bkimage=&

44、quot;file='SysBtnsetting_o.png'dest='10,5,30,25'"/>5. 登录界面示例:登录界面的xml布局用户名:ailriin密码:因貫接连接像用中心一服务器取消确走<?xmlversion="1.0"encoding="utf-8"?><Windowsize="440,280"mininfo="440,280"caption="0,0,0,28"roundcorner="9,9&q

45、uot;><Fontname="微软雅黑"size="12"bold="true"/><Defaultname="Label"value="wanttab=&quot;false&quot;textcolor=&quot;lbl_text&quot;"/><Defaultname="Edit"value="bkimage=&quot;file='edit_bk.png'cor

46、ner='2,2,2,2'&quot;nativebkcolor=&quot;edit_native_bk&quot;"/><VerticalLayoutbkcolor="#FF000000"borderround="9,9"bordercolor="#FF000000"bordersize="1"><HorizontalLayoutheight="28"bkimage="file='capture_ba

47、r.png'source='0,0,16,28'hole='false'corner='7,0,7,0'"><HorizontalLayout>Textname="title"text="智能视频监控系统-登录"pos="15,&253,24"float="true"textcolor="#FFd1d2d4"font="0"/></HorizontalLayout>H

48、orizontalLayoutwidth="39"inset="0,0,10,0"><Buttonname="closebtn"maxwidth="29"maxheight="24"normalimage="file='frame_btn_spirit.png'source='130,0,159,24'"hotimage="file='frame_btn_spirit.png'source='130

49、,24,159,48'"pushedimage="file='frame_btn_spirit.png'source='130,48,159,72'"/></HorizontalLayout></HorizontalLayout><VerticalLayoutbkimage="file='login_bk.png'"inset="1,0,1,1"><Controlheight="25"/><

50、HorizontalLayoutinset="30,9,30,9"height="40">Labeltext="用户名："align="right"width="60"/Label<Editname="edit_user_name"width="120"maxchar="31"></Edit>Labeltext="密码："align="right"width=&quo

51、t;60"/LabelEditname="edit_user_pass"password="true"width="120"maxchar="31"/Edit/HorizontalLayoutHorizontalLayoutinset="0,10,30,10"height="40"Controlwidth="110"/Optionwidth="1OO"maxwidth="1OO"group="co

52、nn_group"name="option_1"selected="true"text="直接连接"/>Optionwidth="115"maxwidth="115"group="conn_group"name="option_2"align="right"text="使用中心服务器"/>/HorizontalLayoutHorizontalLayoutname="proxy_layo

53、ut1"visible="false"inset="0,9,30,9"height="40"Controlwidth="25"/Labeltext="中心服务器："align="right"width="90"/LabelEditname="edit_proxy_http_ip"width="100"/EditLabeltext="端口："align="right"w

54、idth="55"/LabelEditname="edit_proxy_http_port"maxchar="6"text="80"width="50"/Edit/HorizontalLayoutControl/HorizontalLayoutheight="57"inset="20,15,20,15"HorizontalLayout/HorizontalLayoutcorner='5,5,5,5'Buttonwidth="83&

55、quot;name="ok"text="确定"textcolor="btn_text"maxwidth="83"maxheight="26"normalimage="file='btn_normal.hotimage="file='btn_hot.png'corner='5,5,5,5'"pushedimage="file='btn_push.png'corner='5,5,5,5'&

56、quot;/<Controlwidth="5"/>Buttonwidth="83"name="cancel"text="取消"textcolor="btn_text"maxwidth="83"maxheight="26"normalimage="file='btn_normal.png'corner='5,5,5,5'hotimage="file='btn_hot.png'co

57、rner='5,5,5,5'"pushedimage="file='btn_push.png'corner='5,5,5,5'"/>/HorizontalLayout>/VerticalLayout>/VerticalLayout>/Window>五、自定义控件示例：人脸图片列表自定义控件需要实现如下的效果，每行可以显示6个人脸图片，最多显示108个图，超过时自动换到下一行，超过三行显示滚动条。1.创建xml文件："face_listitem.xml"?xmlvers

58、ion="1.0"encoding="UTF-8"?>Window>FaceListItemheight="100">HorizontalLayoutwidth="550"height="100"inset="15,5,15,5">ImageViewername="face_view1"width="75"height="90"bkcolor="#FFFFFFFF"bord

59、ercolor="#FF0000FF"borderselectedcolor="#FF0000FF"bordersize="0"/><Controlwidth="12"/><ImageViewername="face_view2"width="75"height="90"bkcolor="#FFFFFFFF"bordercolor="#FF0000FF"borderselectedcolor=

60、"#FF0000FF"bordersize="0"/><Controlwidth="12"/><ImageViewername="face_view3"width="75"height="90"bkcolor="#FFFFFFFF"bordercolor="#FF0000FF"borderselectedcolor="#FF0000FF"bordersize="0"/><Controlwidth="12"/><ImageViewername="face_view4"width="75"height="90"bkcolor="#FFF