天天動聽， 這款Android手機上的音樂播放器，相信不少朋友都曾用過。 不知大家是否注意到，天天動聽有一個迷你歌詞的特效。

　　什么效果呢? 就是不管你切到什么畫面， 歌詞永遠顯示，并且可以拖動。 類型QQ音樂，在電腦上播放時顯示的歌詞效果。

　　下面先來看一下效果。

　　　　

　　這個歌詞是在所有界面之上的。

　　下面我們將這個效果解剖一下， 我認為主要有三個難點：

　　1. 歌詞懸浮在所有頁面之上

　　2. 歌詞可以拖動位置

　　3. 歌詞的播放效果 (顏色覆蓋)

　　對于第一點，首先想到的就是 WindowManager ， 這個類可能不少人都用過， 一般用于獲取屏幕寬度、高度，那么這次就要利用這個類來讓我們的歌詞永遠置頂。

　　通過查看API，我們看到，在WindowManager.LayoutParams類中，有好幾個屬性可以設置View置頂。

　　引用

1 TYPE_SYSTEM_OVERLAYWindow type: system overlay windows, which need to be displayed on top of everything else.
2 TYPE_SYSTEM_ALERTWindow type: system window, such as low power alert.
3 TYPE_PHONEThese windows are normally placed above all applications, but behind the status bar.
下面我們來測試一下, 通過下面幾句代碼，就可以讓一個View凌駕在所有View之上。 　　Java代碼 　　
1 WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);
2 WindowManager.LayoutParams params = new WindowManager.LayoutParams();
3 params.type = WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;
4 params.width = WindowManager.LayoutParams.WRAP_CONTENT;
5 params.height = WindowManager.LayoutParams.WRAP_CONTENT;
6 TextView tv = new TextView(this);
7 wm.addView(tv, params);
這邊需要注意的是， WindowManager也是通過 getSystemService 來獲取，但必須先 getApplicationContext， 否則就無效了。 　　直接WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE); 這樣是無效的 ！！ 還有一點就是，別忘了在Manifest.xml中添加權限： 　　Java代碼 　　
1 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
現在我們這樣做，我們已經可以讓歌詞永遠置頂了。 但是不要得意，現在這樣，結果是我們TextView在最頂層了， 然后你就會發現，頁面上什么操作都不能做了， 在TextView下面的任何東西，你都點不了。 　　為了解決這個，我們必須加上flags參數，讓當前的View失去焦點，從而讓后面的頁面獲得焦點。代碼如下： 　　Java代碼 　　
1 params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;
加上這一句就可以了。 　　好了，下面要處理的，就是讓歌詞可以移動。應該如何做呢？ 我們知道，想要讓一個View對象在頁面上可以移動，只要實現其onTouchEvent事件即可。 　　下面開始實現第二步： 歌詞移動！ 　　首先我們自定義一個TextView類：MyTextView， 該類繼承自TextView， 并實現其中的onTouchEvent方法，來看一下代碼： 　　Java代碼 　　
01 @Override
02 public boolean onTouchEvent(MotionEvent event) {
03 //觸摸點相對于屏幕左上角坐標
04 x = event.getRawX();
05 y = event.getRawY() - TOOL_BAR_HIGH;
06 Log.d(TAG, "------X: "+ x +"------Y:" + y);
07 switch(event.getAction()) {
08 case MotionEvent.ACTION_DOWN:
09 startX = event.getX();
10 startY = event.getY();
11 break;
12 case MotionEvent.ACTION_MOVE:
13 updatePosition();
14 break;
15 case MotionEvent.ACTION_UP:
16 updatePosition();
17 startX = startY = 0;
18 break;
19 }
20 return true;
21 }
22 //更新浮動窗口位置參數
23 private void updatePosition(){
24 // View的當前位置
25 params.x = (int)( x - startX);
26 params.y = (int) (y - startY);
27 wm.updateViewLayout(this, params);
28 }
其中getRawX、getRawY用于獲取觸摸點離屏幕左上角的距離。 而getX、getY用于獲取觸摸點離textView左上角的距離.兩者相減，就是View左上角的坐標了。另外需要注意的是，在顯示View這個View的時候，需要正確指定View的x,y坐標，否則拖動時會錯位。 　　Java代碼 　　
01 WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);
02 WindowManager.LayoutParams params = MyTextView.params;
03 params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT | WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;
04 params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;
05 params.width = WindowManager.LayoutParams.FILL_PARENT;
06 params.height = WindowManager.LayoutParams.WRAP_CONTENT;
07 params.alpha = 80;
08 params.gravity=Gravity.LEFT|Gravity.TOP;
09 //以屏幕左上角為原點，設置x、y初始值
10 params.x = 0;
11 params.y = 0;
12 tv = new MyTextView(TopFrame.this);
13 wm.addView(tv, params);
其中下面三句是關鍵： 　　Java代碼 　　
1 params.gravity=Gravity.LEFT|Gravity.TOP;
幕左上角為原點，設置x、y初始值 　　
1 params.x = 0;
2 params.y = 0;
現在這樣的話，就可以實現View的移動了。 　　下面實現第三步： 歌詞的播放效果。那么本例僅僅做一個循環， 實際音樂播放器要復雜些，需要根據歌劇的長度及時間間隔，來計算歌詞的覆蓋速度， 再根據這個速度來覆蓋歌詞，呈現給用戶。要實現歌詞播放的效果，需要用到畫筆Paint， 還要用到Shader， 還有一個就是UI刷新的問題。一起來看下代碼： 　　Java代碼 　　
01 @Override
02 protected void onDraw(Canvas canvas) {
03 // TODO Auto-generated method stub
04 super.onDraw(canvas);
05 float1 += 0.001f;
06 float2 += 0.001f;
07 if(float2 > 1.0){
08 float1 = 0.0f;
09 float2 = 0.01f;
10 }
11 this.setText("");
12 float len = this.getTextSize() * text.length();
13 Shader shader = new LinearGradient(0, 0, len, 0,
14 new int[] { Color.YELLOW, Color.RED }, new float[]{float1, float2},
15 TileMode.CLAMP);
16 Paint p = new Paint();
17 p.setShader(shader);
18 // 下面這句才控制歌詞大小
19 p.setTextSize(20f);
20 p.setTypeface(Typeface.DEFAULT_BOLD);
21 //此處x,y坐標也要注意，尤其是y坐標，要與字體大小協調
22 canvas.drawText(text, 0, 20, p);
23 }
再加上handler, 讓他每隔3毫秒畫一次， 就有了這個歌詞播放的效果。 　　Java代碼 　　
view source
print?
1 private Runnable update = new Runnable() {
2 public void run() {
3 MyTextView.this.update();
4 handler.postDelayed(update, 3);
5 }
6 private void update(){
7 postInvalidate();
8 }

轉自：http://www.eoeandroid.com/code/2012/0731/1983.html

轉載于:https://blog.51cto.com/5282981/971682

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Android项目之——Activity悬浮并可拖动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。