天天動聽, 這款Android手機上的音樂播放器,相信不少朋友都曾用過。 不知大家是否注意到,天天動聽有一個迷你歌詞的特效。
下面先來看一下效果。
這個歌詞是在所有界面之上的。
下面我們將這個效果解剖一下, 我認爲主要有三個難點:
1. 歌詞懸浮在所有頁面之上
2. 歌詞可以拖動位置
3. 歌詞的播放效果 (顏色覆蓋)
對於第一點,首先想到的就是 WindowManager , 這個類可能不少人都用過, 一般用於獲取屏幕寬度、高度,那麼這次就要利用這個類來讓我們的歌詞永遠置頂。
通過查看API,我們看到,在WindowManager.LayoutParams類中,有好幾個屬性可以設置View置頂。
TYPE_SYSTEM_OVERLAYWindow type: system overlay windows, which need to be displayed on top of everything else.
TYPE_SYSTEM_ALERTWindow type: system window, such as low power alert.
TYPE_PHONEThese windows are normally placed above all applications, but behind the status bar.
下面我們來測試一下, 通過下面幾句代碼,就可以讓一個View凌駕在所有View之上。
這邊需要注意的是, WindowManager也是通過 getSystemService 來獲取,但必須先 getApplicationContext, 否則就無效了。
直接WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE); 這樣是無效的 !! 還有一點就是,別忘了在Manifest.xml中添加權限:
現在我們這樣做,我們已經可以讓歌詞永遠置頂了。 但是不要得意,現在這樣,結果是我們TextView在最頂層了, 然後你就會發現,頁面上什麼操作都不能做了, 在TextView下面的任何東西,你都點不了。
爲了解決這個,我們必須加上flags參數,讓當前的View失去焦點,從而讓後面的頁面獲得焦點。代碼如下:
加上這一句就可以了。
好了,下面要處理的,就是讓歌詞可以移動。應該如何做呢? 我們知道,想要讓一個View對象在頁面上可以移動,只要實現其onTouchEvent事件即可。
下面開始實現第二步: 歌詞移動!
首先我們自定義一個TextView類:MyTextView, 該類繼承自TextView, 並實現其中的onTouchEvent方法,來看一下代碼:
其中getRawX、getRawY用於獲取觸摸點離屏幕左上角的距離。 而getX、getY用於獲取觸摸點離textView左上角的距離.兩者相減,就是View左上角的座標了。另外需要注意的是,在顯示View這個View的時候,需要正確指定View的x,y座標,否則拖動時會錯位。
其中下面三句是關鍵:
現在這樣的話,就可以實現View的移動了。
下面實現第三步: 歌詞的播放效果。那麼本例僅僅做一個循環, 實際音樂播放器要複雜些,需要根據歌劇的長度及時間間隔,來計算歌詞的覆蓋速度, 再根據這個速度來覆蓋歌詞,呈現給用戶。要實現歌詞播放的效果,需要用到畫筆Paint, 還要用到Shader, 還有一個就是UI刷新的問題。一起來看下代碼:
再加上handler, 讓他每隔3毫秒畫一次, 就有了這個歌詞播放的效果。
android實現桌面歌詞效果的關鍵技術點
什麼效果呢? 就是不管你切到什麼畫面, 歌詞永遠顯示,並且可以拖動。 類型QQ音樂,在電腦上播放時顯示的歌詞效果。
引用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.