duilib 进阶教程.docx
《duilib 进阶教程.docx》由会员分享，可在线阅读，更多相关《duilib 进阶教程.docx（57页珍藏版）》请在冰豆网上搜索。
duilib进阶教程
此教程是从Alberl的博客截取，送给各位没网的情况下也能看。
感谢Alberl的分享。
在MFC中使用duilib
（1）
由于入门教程的反响还不错，因此Alberl就以直播的形式来写《进阶教程》啦，本教程的前提：
1、请先阅读《仿迅雷播放器教程》
2、要有一定的duilib基础，如果还没，请先阅读《2013duilib入门简明教程》。
3、下载基于VLC的MFC播放器（包含VLC等所有文件），csdn不允许上传相似的代码，因此后面的教程将不再上传VLC的dll、头文件等没有改变的文件。
《仿迅雷播放器教程--基于VLC的MFC播放器（6）》中界面是用MFC做的，因此我们要将它换成duilib。
而在《2013duilib入门简明教程--结合win32和MFC（16）》中只讲了怎么在duilib中显示MFC窗口，以及在MFC中显示duilib窗口，但是没有讲消息的响应，因此有些基础薄弱的小伙伴还是不懂，这里借着这个机会讲解一下消息的响应，下面进入正题。
之前的MFC界面如下：
现在我们将左边的三个按钮换成迅雷的，如下：
其中左边那块是纯duilib的界面，右边那块是在duilib的窗口里放了一个win32控件，这六个按钮都是有消息响应的，因此本教程实现了以下功能：
1、在MFC窗口显示了duilib窗口，并响应了duilib的控件。
2、在duilib的窗口显示了win32的控件，并响应了win32的控件。
所以与MFC结合的知识已经全面覆盖了（与win32结合也是类似的），到此，就不用担心老项目使用duilib带来问题了。
界面显示已经在《2013duilib入门简明教程--结合win32和MFC（16）》讲过了，那么这里只讲消息响应。
一、纯duilib控件的响应：
只需在Notify函数做响应就行了，其中m_pDlgMain是MFC主窗口的指针。
voidCDuiFrameWnd:
:
Notify（TNotifyUI&msg）
{
if（m_pDlgMain）
{
if（msg.sType==_T（"click"））
{
if（msg.pSender->GetName（）==_T（"btnPrevious"））
{
m_pDlgMain->OnBnClickedButtonPlayPrevious（）;
}
elseif（msg.pSender->GetName（）==_T（"btnNext"））
{
m_pDlgMain->OnBnClickedButtonPlayNext（）;
}
elseif（msg.pSender->GetName（）==_T（"btnPlay"））
{
m_pDlgMain->OnBnClickedButtonPlay（）;
}
}
}
__super:
:
Notify（msg）;
}
可见原有的MFC代码基本无需改动，是不是很简单呢~O（∩_∩）O~
二、duilib中MFC控件的响应
由于duilib不够成熟，很多东西都要自己去处理，而如果水平不够的话，就很可能做不出来，已经有很多网友因为有些控件很难实现而放弃了。
因此这种情况下，如果某个控件很难实现，我们用MFC的控件代替就是非常适合的，并且很多控件即使duilib能做出来，也还是取代不了MFC控件，比如虚拟表格等等，这些MFC控件已经很成熟了，并且界面也不难看，可自行定制，而如果用duilib去做虚拟表格的话，工作量肯定是很大的，因此这种情况下，也建议用MFC控件。
那么在duilib中显示的MFC控件怎么响应呢？
其实也很简单，回到win32就行了，我们只需截获WM_COMMAND，而duilib的WM_COMMAND等windows消息可以在HandleMessage函数里截获，代码如下：
LRESULTCDuiFrameWnd:
:
HandleMessage（UINTuMsg,WPARAMwParam,LPARAMlParam）
{
switch（uMsg）
{
caseWM_COMMAND:
if（IDC_BUTTON_DUI_NEXT==wParam）
{
if（m_pDlgMain）
{
m_pDlgMain->OnBnClickedButtonPlayNext（）;
}
}
break;
default:
break;
}
return__super:
:
HandleMessage（uMsg,wParam,lParam）;
}
也是非常简单！
现在已经可以去试试效果啦，左边那三个按钮和右边那三个按钮的效果完全一样！
从这个例子可以看出，无论是在duilib里使用MFC，还是在MFC中使用duilib，都不需要改动原有项目，和MFC结合是不是很有用呢~O（∩_∩）O~
代码下载：
在duilib中使用MFC
（2）
好人做到底，送佛送到西。
虽然上一篇教程已经说得很详细了，但Alberl还是再举一个例子。
上一篇教程的主窗口是MFC的，所以这篇教程把主窗口换成duilib的~O（∩_∩）O~
1、我们利用《2013duilib入门简明教程--完整的自绘标题栏（8）》里的XML做为主窗口，并且把客户区的控件都去掉，换成一个自定义控件
2、在CDuiFrameWnd:
:
CreateControl（）函数里，加入自定义控件Dialog的创建：
if（_tcsicmp（pstrClassName,_T（"Dialog"））==0）
{
CWndUI*pUI=newCWndUI;
CXMPDlg*pDlg=newCXMPDlg;//这里只是示例，请自行释放内存~
pDlg->Create（IDD_XMP_DIALOG）;
pUI->Attach（pDlg->GetSafeHwnd（））;
returnpUI;
}
3、在CXMPApp:
:
InitInstance（）函数里，将
CXMPDlgdlg;
m_pMainWnd=&dlg;
INT_PTRnResponse=dlg.DoModal（）;
换成
CDuiFrameWnd*pFrame=newCDuiFrameWnd（_T（"XMP_MAIN.xml"））;
pFrame->Create（NULL,_T（"DUIWnd"）,UI_WNDSTYLE_FRAME,WS_EX_WINDOWEDGE）;
pFrame->CenterWindow（）;
m_pMainWnd=CWnd:
:
FromHandle（*pFrame）;
INT_PTRnResponse=pFrame->ShowModal（）;
4、将MFC对话框的风格改为子窗口模式，如下：
然后运行，即可看到以下效果：
同样，里面的控件都是可以响应的哦，那么到现在为止，MFC和duilib结合的所有方式都讲完了，那些为老项目界面犯愁的小伙伴们，赶紧动手试试吧~O（∩_∩）O~
代码下载：
Container控件（3）
前面两个教程的目的是教大家与MFC结合，那么从这篇起，将不再使用MFC，而使用纯win32项目，本文的所有知识已经在《duilib入门教程》里面讲过了，因此基础知识不再赘述。
代码下载：
效果如下（可拖拽边缘调节窗口大小，图片会自动居中）
此例子唯一需要说明的就是XML，代码如下：
xmlversion="1.0"encoding="utf-8"standalone="yes"?
>
可以看到到处都是HorizontalLayout 、VerticalLayout，然后几个bkimage也很乱，这里有几个原因：
1、由于迅雷的中间那一块是由三个图片组成，所以布局很麻烦，其实用一张图片的话，就简洁很多了，这里估计是为了重用图片。
2、方式不太对。
如果中间只有一个图片的话，按照上面的XML布局就很简洁了，但由于有三个图片，这三个图片都需要自适应窗口大小，所以才造成上面的XML代码那么乱，那么有没有优化的地方呢？
当然有，在《入门教程》里我们还有一个控件没有介绍，那就是Container，顾名思义就是容器控件，容器控件有什么用呢？
它的用处就是可以使子窗口的行为随着Container一致变化。
比如我们的窗口有10个按钮，如果没放在Container里的话，那么想要隐藏所有控件，就必须调用10次隐藏函数，如果想将所有控件往左移的话，也需要操作10次，同样，上面因为有3个图片，所以为了让他们都适应窗口大小，我们做了3次布局。
而如果这些控件都在Container里的话，那就方便多了，就算有100个按钮，如果要隐藏的话，我们只需要调用1次隐藏函数，即隐藏Container控件即可，这样它的子控件都会隐藏。
同样，如果把上面3个图片都放到Container里去，我们的XML代码就简明多啦，优化后的代码如下：
xmlversion="1.0"encoding="utf-8"standalone="yes"?
>
可以看到bkimage都在一起了，HorizontalLayout、VerticalLayout 也不那么乱了，Container控件暂时就讲到这里啦。
XML嵌套及自定义控件（4）
代码下载：
之前入门教程里已经讲过了自定义控件，这里借着迅雷播放器再次举个例子。
1、我们先给迅雷播放器加入下面那一排按钮。
和上个教程一样，我们可以选择直接放在主XML里面，也可以选择放到Container里面，在这里，为了让主XML的代码更简洁一点，我们选择放到单独的XML里面。
而这个单独的XML就相当于一个自定义控件了，将控件名取为WndPlayPanel，XML取名为【WndPlayPanel.xml】，然后在CDuiFrameWnd:
:
CreateControl里加入如下代码：
CControlUI*CDuiFrameWnd:
:
CreateControl（LPCTSTRpstrClassName）
{
if（_tcsicmp（pstrClassName,_T（"WndPlayPanel"））==0）
{
CDialogBuilderbuilder;
CControlUI*pUI=builder.Create（_T（"WndPlayPanel.xml"））;
returnpUI;
}
returnNULL;
}
这样自定义控件就创建出来了，接着把主XML的换成，自定义控件WndPlayPanel就显示到最下方了。
2、同样的道理，我们将标题栏也放到单独的XML里，取名为Caption，XML取名为【Caption.xml】，在CDuiFrameWnd:
:
CreateControl里加入类似代码，即可显示标题栏区域。
XML的嵌套是不是很简单呢，和入门教程里的一样哦，只不过入门教程里的自定义控件是一个win32按钮，而这里是一个XML。
仿迅雷播放器图片
迅雷播放器原图
对比一下正宗的迅雷播放器，可以发现咱们的仿制品还有很多粗糙的地方，比如【打开文件】按钮就完全见不得人啦，还有右上角的那三个按钮，再就是左上方的【播放】按钮、以及中间的那一块蓝色光影，都和正宗的有所差别。
这些将留到后面的教程讲解~O（∩_∩）O~
图片和文字的位置调整（5）
已经有8个晚上没写教程啦，因为之后遇到了一些问题，主要是TreeView控件的问题，这个问题搞了几个晚上，然后还需要调试代码才能知道它的用法，虽然能够调试出来，但毕竟没什么含金量，只是重复劳动而已，相信很多前辈已经做过了。
好吧，天朝的开源状况一向如此，重复造轮子的事情就由Alberl来终结吧，希望能给后面的小伙伴们节省时间，这里向那些提供Demo的大神们致敬，向duilib的作者致敬~O（∩_∩）O~
说说这8个晚上干了啥吧：
1、前两个晚上实现了Treeview的基本界面，因为Demo里只有一个Treeview的例子，但是和迅雷的播放列表相差甚远，【属性列表】里很多属性都是没用的，比如itemfont、itembkcolor等一系列属性，所以文字的大小和居中就没管了。
2、大家可以发现在隐藏播放列表的情况下，和迅雷一个像素都不差，包括在不同分辨率下（800*600到1440*900，再大一点试了1920*1080），嗯，这也花了两个晚上。
于10.26晚上12点多发布了第一个版本~O（∩_∩）O~
3、这样就只剩下播放列表的问题啦，试了那些属性都无效之后，就只能调试了，发现TreeView问题多多，于是改了几处代码，实现了TreeView的文字居中、以及一些Bug，也花了2个晚上。
4、好不容易播放列表的文字大小和居中什么的搞定了，又发现播放列表的滚动条有问题，好吧，解决了水平滚动条的问题，但是又发现垂直滚动条的问题，不过不拖入文件的话，就没有问题，所以就先不管了。
嗯，10.29晚上发布了一个完整版本，和迅雷几乎一模一样，也听了几个晚上的歌，自我感觉良好~O（∩_∩）O~
程序下载（cpp代码将在最后一个教程给出）：
效果：
一晃眼就到月底啦，如果对哪部分效果的实现有疑问，请在评论区留言，Alberl将会挑选一些做详细讲解，嗯，继续写教程~O（∩_∩）O~
上个教程讲到了按钮图片效果不对的问题，如下：
明明是迅雷里面的图片，为啥效果和迅雷不一样呢？
这是因为duilib默认会将图片缩放成和控件一样大小，这个时候我们需要在图片里加上dest属性。
normalimage="file='btn_open.png'source='178,0,266,16'dest='38,13,126,29'"
其中source='178,0,266,16' 代表只显示btn_open.png中（178,0,266,16）区域的图片。
（注：
所有的坐标顺序都是左上右下 ）
dest='38,13,126,29' 代表将source区域的图片显示到按钮的（38,13,126,29）区域。
可以看到dest代表的宽度为98，高度为16，也就是图片的高度和宽度啦，这样duilib就不会拉伸图片拉。
效果如下：
是不是和迅雷的一个像素都不差呢~O（∩_∩）O~
那我们接着加上上方的地址栏，
这个效果和迅雷也差太远了吧~~~不急，下面我们加上更详细的属性，比如背景，字体颜色等等，XML如下：
终于有点像啦，不过貌似文字离编辑框的左边太近了点，这时就要加上 textpadding="10,0,8,0"啦，意思就是文字离左边最少10个像素，离右边最少8个像素，效果如下：
嗯，现在位置也和迅雷一样啦，不过可以发现点击编辑框的时候，又不一样啦
我勒个去，吓（he）老子一跳，又和迅雷差了一大截啊o（╯□╰）o
嘿嘿，加上 nativebkcolor="#FF0E0E0E" 属性就好一点啦，效果如下：
不过编辑框的高度怎么那么挤呢？
这个Alberl没有去研究设置高度的属性，不过改变字体后，高度会跟着变化哟，那我们就加上font="3"属性吧，不过这里的"3"指的是第4个默认的字体，字体XML如下：
哈哈，和迅雷一样了吧~O（∩_∩）O~
不过可以发现迅雷的编辑框有蓝色的边框，这个Alberl设置了好一会儿，发现focusbordercolor并不生效，后来仔细看了Edit的所有属性，发现有个bordersize属性，对头，需要设置bordersize属性，focusbordercolor才能生效，那我们加上如下属性：
bordersize="1"focusbordercolor="#FF154B83"
不过duilib并没有提供hotbordercolor属性，所以当鼠标移上去时，并不显示蓝色边框，但是和迅雷也仅仅是差这一个地方而已，并且我们可以用图片来代替hotbordercolor属性，一个开源软件能做到如此地步，还能苛求什么呢~O（∩_∩）O~ 不过建议大家去实现一下hotbordercolor属性，已经有focusbordercolor了，所以这个很简单的哦，当然啦，分不分享随便你，it'suptoyou！
Edit控件的整个XML代码如下：
【打开文件】按钮的整个XML代码如下：
本文的链接里是最终效果，熟练的小伙伴们可以直接看最终效果~O（∩_∩）O
升级会员 