仿酷狗音乐播放器开发日志十八——换肤功能的实现二:改变控件和窗体透明度(附挂件类源码)...
轉(zhuǎn)載請說明原出處,謝謝~~
? ? ? ? ?昨天把大致布局分析了一下,昨天晚上把布局寫好實現(xiàn)了,今天把大致的功能完成了一下,現(xiàn)在的外觀已經(jīng)和原酷狗的換膚界面完全一樣,其中的調(diào)整播放列表透明度和設(shè)置整個軟件透明度的代碼已經(jīng)完成了,先把效果圖貼一下,然后開發(fā)說開發(fā)過程。
??
開發(fā)步驟一:
? ? ? ?布局的部分我就不說了,昨天已經(jīng)分析了,只要用好素材,花點時間就能把界面效果做出來,其中“官方皮膚”和
“我的皮膚”調(diào)用CTabLayout可以實現(xiàn)兩個界面的切換,如圖:
??
? ? ? 原酷狗在切換這兩個界面時是有動畫效果的,所以在這個地方我是用來 擴展后的CTabLayout控件
CUIAnimationTabLayout,實現(xiàn)了切換時的動畫效果。
開發(fā)步驟二:
? ? ?接下來我先把設(shè)置播放列表透明度和設(shè)置皮膚透明度的功能完成。
? ? ? ?在點擊了列表透明的組合框后會彈出個含有滑動條控件的界面來設(shè)置透明度,當鼠標移出它的范圍時會自動銷毀
? ? ??
? ? ? 從功能外觀上這是屬于組合框的范疇,但是在和duilib的組合框的功能對比后發(fā)現(xiàn),duilib無法實現(xiàn)這樣的效果,實際上duilib的組合框CComboUI的彈出界面是出現(xiàn)在下方而不是上方,第二CComboUI的內(nèi)容一般是多個文字選項,第
三CComboUI的文字需要通過點擊它下拉菜單的選項來改變而無法單獨設(shè)置。綜上三點不適合用CComboUI來做這部
分。
? ? ? 那應(yīng)該怎么做?我首先想到的是使用已經(jīng)寫好的菜單控件來做這個功能,的確,菜單從功能上還是外觀都可以勝
任,不過有一點就是菜單不會在鼠標移除范圍時自動銷毀。反過來一想我又覺得用菜單不合適,一來菜單的功能比這
個復(fù)雜得多,編寫菜單用了1000多行代碼,用在這里感覺降低程序性能,二來不至于為了自動銷毀功能再去修改菜單
的代碼。所以干脆我又寫了一個名叫CPopupWidget的專門用于彈出小掛件的類,這個類就是個簡單的彈出窗體類,
繼承了CWindowWnd和INotifyUI。整個類代碼只用了大概250行,和其他窗體類沒什么太大區(qū)別。
? ? ? 自動銷毀這個功能很容易實現(xiàn),只要在HandleMessage函數(shù)中處理WM_MOUSERLEAVE消息,調(diào)用close()函數(shù)
就可以了。使用這個CPopupWidget類的時候傳入xml布局文件進去來決定他的外觀。
? ? ? 在這個窗體中有一個CSliderUI控件,這個控件在滑動時會去改變主窗體的播放列表的透明度,為此我需要把
CSliderUI控件的滑動事件通知到主窗體,這部分的實現(xiàn)代碼已經(jīng)在《為duilib的MenuDemo增加消息響應(yīng),優(yōu)化代
碼和顯示效果》點擊打開鏈接,這里講過了,使用的是第一種消息通知方法。
? ? ? ?主窗體接收到了_T("valuechanged") 或者 _T("movevaluechanged")消息后,先判斷是否是要改變播放列表透明
度的事件,確認后去改變透明度。有些朋友不知道怎么去改變duilib的一個控件的透明度,其實很簡單:為對應(yīng)的控件
設(shè)置一個背景圖并且設(shè)置fade屬性,比如bkimage="file='UI\LeftTab\List_bk.png' fade='122'",背景圖是任意的,關(guān)鍵
在于fade屬性,他是改變圖片透明度的屬性,所以只要動態(tài)修改這個屬性的值就可以改變?nèi)我饪丶谋尘暗耐该鞫?/span>
了。
? ? ? ? 最終的設(shè)置列表透明度的效果如下:
? ? ?
開發(fā)步驟三:
? ? ? ?接下來完成設(shè)置窗體透明度的部分,在原酷狗里面,這個窗體透明度的的彈出窗體的外觀和設(shè)置播放列表的透明
度的外觀是一樣的,這就大大減少了我的工作量,如圖
? ? ? ?
? ? ? ? ?同樣的原理,在主窗體接收到滑動消息后,先確認是改變窗體透明度的消息,然后開始設(shè)置,在duilib的
CPaintManager類中已經(jīng)有現(xiàn)成的函數(shù)SetTransparent,直接拿來用就可以改變整個窗體的透明度,不用想也知道其
實就是調(diào)用了 系統(tǒng)的SetLayeredWindowAttributes函數(shù)實現(xiàn)的。我就不贅述了。
? ? ? ? ?比較麻煩的一點就是,在主窗體、皮膚設(shè)置窗體和小掛件窗體之間有許多共享的信息,這些信息的溝通就只能
靠傳遞相應(yīng)的參數(shù)來實現(xiàn)了,主窗體的指針要傳到皮膚設(shè)置窗體,好讓皮膚設(shè)置窗體得知一些主窗體的透明度信息來
初始化自己的控件,小掛件窗體需要獲取主窗體的CPaintManager實例的指針來發(fā)送消息,同時也需要皮膚設(shè)置窗體
的指針來改變這兩個組合框內(nèi)的值,。小掛件的參數(shù)的傳遞主要都在他
的Init函數(shù)中,Init函數(shù)的參數(shù)我已經(jīng)做了注釋,大家可以自己看源碼。
? ? ? ?實際上,那個看似組合框的控件并不是組合框,而是一個按鈕,只不過背景圖片中添加了個小箭頭來達到視覺上
的效果。^_^~~
開發(fā)步驟四:
? ? ?做完了兩個功能,接下來把自定義皮膚按鈕的功能做一下,在單擊自定義皮膚按鈕時會彈出系統(tǒng)的打開對話框去選
擇一個圖片來做皮膚,這個功能實現(xiàn)起來最簡單,只需要用GetOpenFileName函數(shù)來封裝一個打開對話框的函數(shù)去調(diào)
用就可以了,最后把返回的路徑的值處理一下就可以用了。
結(jié)束:
? ? ?今天就寫這么多代碼吧,另外還有幾個沒實現(xiàn)的功能等明天再做。第一個沒實現(xiàn)的功能是調(diào)色板功能,原酷狗的調(diào)
色板如下:
? ??
? ? ? 在這里任意選擇顏色后可以應(yīng)用到整個窗體。
? ? ? ?第二個沒做其實就是換膚,實際上我還沒有寫換膚的代碼,就是點擊一個圖片就讓整個軟件的所有窗口的背景圖
統(tǒng)一變換。但是實際這個最簡單的功能,無非就是通知所有窗口換個背景圖,所以不著急做這個功能。
? ? ? 第三個沒有做的是每個顯示的背景圖的小圖的動態(tài)外觀,原酷狗的背景圖的小圖標,有normal、hover、down等
多種狀態(tài),如圖
? ? ? 當鼠標經(jīng)過時會有個黑色圖片覆蓋,并且在他上面顯示出作者的一些信息。要實現(xiàn)這個效果應(yīng)該另外開發(fā)一個控
件來支持動態(tài)的信息展示效果,不過這個控件的開發(fā)難度比起播放列表控件要簡單得多,應(yīng)該很容易做出來。
? ? ? CWidgetPopup類的下載地址:點擊打開鏈接
? ? ?Redrain ?2014.8.7 ?18:15
? ?
轉(zhuǎn)載于:https://www.cnblogs.com/redrainblog/p/4275833.html
總結(jié)
以上是生活随笔為你收集整理的仿酷狗音乐播放器开发日志十八——换肤功能的实现二:改变控件和窗体透明度(附挂件类源码)...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 10家不错的iphone编程资源站
- 下一篇: 22 个出口节点对 Tor 网络发动中间