Interpretation of the effects of the beautiful and floating lyrics of Android every day (mini lyrics)

I believe many of my friends have used this music player on Android phones. I wonder if you have noticed that every day there is a special effect on Mini lyrics. What is the effect? The lyrics are always displayed and can be dragged. Type QQ music, the lyrics displayed on the computer.

 

Next we will dissect this effect. I think there are three main difficulties:

 

1. The lyrics are suspended on all pages.

 

2. You can drag the lyrics.

 

3. playback effect of the lyrics (color coverage)

 

For the first point, the first thought of is WindowManager, which may be used by many people. It is generally used to obtain the screen width and height, so this time we will use this class to bring our lyrics to the top forever.

 

 

 

Java code

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 );

 

The second step is to move the lyrics!

 

First, we define a TextView class: MyTextView, which inherits from TextView and implements the onTouchEvent method. Let's take a look at the Code:

 

The following is the third step: Play the lyrics.

 

 

Java code

@ Override

Public boolean onTouchEvent (MotionEvent event ){

// Coordinates of the touch point relative to the upper left corner of the screen

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;

}

// Update the floating window position Parameter

Private void updatePosition (){

// Current position of the View

Params. x = (int) (x-startX );

Params. y = (int) (y-startY );

Wm. updateViewLayout (this, params );

}

 

 

In this example, there is only one loop, and the actual music player needs to be more complex. We need to calculate the coverage speed of the lyrics based on the length and interval of the opera, and then overwrite the lyrics based on the speed, present to the user. To achieve the effect of playing the lyrics, you need to use the Paint brush and Shader. Another problem is the UI refresh. Let's take a look at the Code:

 

 

 

Java code

@ 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 );

// The following statement controls the lyrics.

P. setTextSize (20f );

P. setTypeface (Typeface. DEFAULT_BOLD );

// Pay attention to the x and y coordinates, especially the y coordinates, which must be consistent with the font size.

Canvas. drawText (text, 0, 20, p );

}

Let him draw the lyrics once every three milliseconds.

Java code

Private Runnable update = new Runnable (){

Public void run (){

MyTextView. this. update ();

Handler. postDelayed (update, 3 );

}

};

Private void update (){

PostInvalidate ();

}