duilib進階教程 -- 圖片和文字的位置調整 (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代碼將在最后一個教程給出）：http://download.csdn.net/detail/qq316293804/6478917

　　效果：

 

　　

　　

 

　　一晃眼就到月底啦，如果對哪部分效果的實現有疑問，請在評論區留言，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~

　　那我們接着加上上方的地址欄，

<Edit  text="請輸入播放地址">

　　這個效果和迅雷也差太遠了吧~~~ 不急，下面我們加上更詳細的屬性，比如背景，字體顏色等等，XML如下：

 <Edit  text="請輸入播放地址" bkcolor="#FF0E0E0E" textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA" />

　　終於有點像啦，不過貌似文字離編輯框的左邊太近了點，這時就要加上 textpadding="10,0,8,0"啦，意思就是文字離左邊最少10個像素，離右邊最少8個像素，效果如下：

　　嗯，現在位置也和迅雷一樣啦，不過可以發現點擊編輯框的時候，又不一樣啦

　　我勒個去，嚇(he)老子一跳，又和迅雷差了一大截啊o(╯□╰)o

　　嘿嘿，加上 nativebkcolor="#FF0E0E0E" 屬性就好一點啦，效果如下：　

　　不過編輯框的高度怎么那么擠呢？ 這個Alberl沒有去研究設置高度的屬性，不過改變字體后，高度會跟着變化喲，那我們就加上font="3" 屬性吧，不過這里的"3"指的是第4個默認的字體，字體XML如下：

<Font name="微軟雅黑" size="12" bold="false" />

　　哈哈，和迅雷一樣了吧~O(∩_∩)O~

　　不過可以發現迅雷的編輯框有藍色的邊框，這個Alberl設置了好一會兒，發現focusbordercolor並不生效，后來仔細看了Edit的所有屬性，發現有個bordersize屬性，對頭，需要設置bordersize屬性，focusbordercolor才能生效，那我們加上如下屬性：

bordersize="1" focusbordercolor="#FF154B83"

　　不過duilib並沒有提供hotbordercolor屬性，所以當鼠標移上去時，並不顯示藍色邊框，但是和迅雷也僅僅是差這一個地方而已，並且我們可以用圖片來代替hotbordercolor屬性，一個開源軟件能做到如此地步，還能苛求什么呢~O(∩_∩)O~  不過建議大家去實現一下hotbordercolor屬性，已經有focusbordercolor了，所以這個很簡單的哦，當然啦，分不分享隨便你，it's up to you！

　　Edit控件的整個XML代碼如下：                

<Edit   name="editURL" text="請輸入播放地址" font="3" textpadding="10,0,8,0" bordersize="1" focusbordercolor="#FF154B83" nativebkcolor="#FF0E0E0E" bkcolor="#FF0E0E0E" textcolor="#FF4B4F51" disabledtextcolor="#FFA7A6AA" />

　　【打開文件】按鈕的整個XML代碼如下：

<Button name="btnOpen" float="true" pos="72,228,0,0" width="158" height="40" bkimage="file=&apos;btn_bk.png&apos;" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" pushedimage="file=&apos;btn_open.png&apos; source=&apos;0,0,88,20&apos; dest=&apos;38,13,126,29&apos; " hotimage="file=&apos;btn_open.png&apos; source=&apos;89,0,177,16&apos; dest=&apos;38,13,126,29&apos; " normalimage="file=&apos;btn_open.png&apos; source=&apos;178,0,266,16&apos; dest=&apos;38,13,126,29&apos; " />

　　本文的鏈接里是最終效果，熟練的小伙伴們可以直接看最終效果~O(∩_∩)O~

　　Alberl已經用這個播放器聽了幾個晚上的歌啦，用的隨機模式，效果還不錯，小伙伴們可以試試喲~O(∩_∩)O

 

 

來自為知筆記(Wiz)