什麼效果呢? 就是不管你切到什麼畫面, 歌詞永遠顯示,並且可以拖動。 類型QQ音樂,在電腦上播放時顯示的歌詞效果。
下面先來看一下效果。
這個歌詞是在所有界面之上的。
下面我們將這個效果解剖一下, 我認爲主要有三個難點:
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.
Java代碼
-
WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);
-
WindowManager.LayoutParams params = new WindowManager.LayoutParams();
-
params.type = WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;
-
-
params.width = WindowManager.LayoutParams.WRAP_CONTENT;
-
params.height = WindowManager.LayoutParams.WRAP_CONTENT;
-
-
TextView tv = new TextView(this);
- wm.addView(tv, params);
直接WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE); 這樣是無效的 !! 還有一點就是,別忘了在Manifest.xml中添加權限:
Java代碼
爲了解決這個,我們必須加上flags參數,讓當前的View失去焦點,從而讓後面的頁面獲得焦點。代碼如下:
Java代碼
- params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;
好了,下面要處理的,就是讓歌詞可以移動。應該如何做呢? 我們知道,想要讓一個View對象在頁面上可以移動,只要實現其onTouchEvent事件即可。
下面開始實現第二步: 歌詞移動!
首先我們自定義一個TextView類:MyTextView, 該類繼承自TextView, 並實現其中的onTouchEvent方法,來看一下代碼:
Java代碼
-
@Override
-
public boolean onTouchEvent(MotionEvent event) {
-
//觸摸點相對於屏幕左上角座標
-
x = event.getRawX();
-
y = event.getRawY() - TOOL_BAR_HIGH;
-
Log.d(TAG, "------X: "+ x +"------Y:" + y);
-
-
switch(event.getAction()) {
-
case MotionEvent.ACTION_DOWN:
-
startX = event.getX();
-
startY = event.getY();
-
break;
-
case MotionEvent.ACTION_MOVE:
-
updatePosition();
-
break;
-
case MotionEvent.ACTION_UP:
-
updatePosition();
-
startX = startY = 0;
-
break;
-
}
-
-
return true;
-
}
-
//更新浮動窗口位置參數
-
private void updatePosition(){
-
// View的當前位置
-
params.x = (int)( x - startX);
-
params.y = (int) (y - startY);
-
wm.updateViewLayout(this, params);
- }
Java代碼
-
WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);
-
WindowManager.LayoutParams params = MyTextView.params;
-
-
params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT | WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;
-
params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;
-
-
params.width = WindowManager.LayoutParams.FILL_PARENT;
-
params.height = WindowManager.LayoutParams.WRAP_CONTENT;
-
params.alpha = 80;
-
-
params.gravity=Gravity.LEFT|Gravity.TOP;
-
//以屏幕左上角爲原點,設置x、y初始值
-
params.x = 0;
-
params.y = 0;
-
-
tv = new MyTextView(TopFrame.this);
- wm.addView(tv, params);
Java代碼
-
params.gravity=Gravity.LEFT|Gravity.TOP;
-
幕左上角爲原點,設置x、y初始值
-
params.x = 0;
- params.y = 0;
下面實現第三步: 歌詞的播放效果。那麼本例僅僅做一個循環, 實際音樂播放器要複雜些,需要根據歌劇的長度及時間間隔,來計算歌詞的覆蓋速度, 再根據這個速度來覆蓋歌詞,呈現給用戶。要實現歌詞播放的效果,需要用到畫筆Paint, 還要用到Shader, 還有一個就是UI刷新的問題。一起來看下代碼:
Java代碼
-
@Override
-
protected void onDraw(Canvas canvas) {
-
// TODO Auto-generated method stub
-
super.onDraw(canvas);
-
float1 += 0.001f;
-
float2 += 0.001f;
-
-
if(float2 > 1.0){
-
float1 = 0.0f;
-
float2 = 0.01f;
-
}
-
this.setText("");
-
float len = this.getTextSize() * text.length();
-
Shader shader = new LinearGradient(0, 0, len, 0,
-
new int[] { Color.YELLOW, Color.RED }, new float[]{float1, float2},
-
TileMode.CLAMP);
-
Paint p = new Paint();
-
p.setShader(shader);
-
// 下面這句才控制歌詞大小
-
p.setTextSize(20f);
-
p.setTypeface(Typeface.DEFAULT_BOLD);
-
//此處x,y座標也要注意,尤其是y座標,要與字體大小協調
-
canvas.drawText(text, 0, 20, p);
-
- }
Java代碼
-
private Runnable update = new Runnable() {
-
public void run() {
-
MyTextView.this.update();
-
handler.postDelayed(update, 3);
-
}
-
-
-
private void update(){
-
postInvalidate();
- }