Beautiful Android music lyrics control imitates Netease cloud music sliding effect

The project has a music announcer function to realize music online playback, and needs to have the function of lyrics display at the same time. I've also looked online. I found barely usable controls in GitHub, but the effect is still unsatisfactory, not particularly good. So when I was free, I referred to some online demos and wrote a lyrics control myself.

As long as the demo can be pulled to the bottom.

1、 Lyrics control effect.

The effect of the current lyrics control is as follows:

The main effects are as follows:

1. Realize automatic sliding switch to the next sentence. 2. Switch playing time by sliding lyrics. 3. Simulate Netease cloud music display timeline when dragging lyrics, and change the color of lyrics to be selected. 4. When the music progress jumps, the lyrics jump can be switched by sliding.

2、 Lyrics control implementation logic description

1. Lyrics analysis.

The lyrics file is an LRC file. The content format of lyrics is fixed [01:15.33] or [00:00]. So first read the lyrics line by line, and parse each line.

Lrcrow is a class that implements comparable. It saves the data of lyrics without lines, including lyrics content and time. The implementation of comparable can sort lyrics by time.

Lrcshowrow is the row data drawn and displayed. Because there is no row data read, if the length is too long, it may have to be displayed through multiple rows. At this time, it needs to be intercepted for multi row display.

2. Lyrics drawing

a. If in the gesture sliding state, draw the timeline

b. Start drawing from the first row of data and draw all rows of data from scratch. Note that the first line starts to draw the coordinates. Firstrowposition y is a dynamic control. The purpose is to facilitate gesture sliding or change this coordinate when executing animation to achieve the control sliding effect. During the drawing process, the Y position of each line needs to be recorded. This coordinate is used to calculate the required sliding distance when executing the animation. If the current line is the selected line or if the current line is the line you want to select during gesture sliding, change to the corresponding display color.

c. When the music playback time jumps, find the lyrics that best match the jump time in the lyrics, get the subscript tryselectionposition of the position to be selected, and then execute the animation. When executing the animation, first calculate the total offset, and then change the offset position of firstrowposition y a little to achieve the sliding effect. When the animation is finished, change the selected subscript to tryselectionposition.

3、 Download address, welcome to issue

GitHub download address

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.