最近在以QQ音樂為樣板做一個手機音樂播放器，原始碼下篇博文放出。今天我想聊的是這個QQ音樂播放器中歌詞顯示控制元件的問題，和小夥伴們一起來探討怎麼實現這個歌詞滾動的效果。OK，廢話不多說，先來看看效果圖：

好，接下來我們就來看看怎麼實現這樣一個效果。本文主要包括如下幾方面內容：

1.歌詞檔案格式分析及解析

2.歌詞顯示控制元件繪製

3.關於卡拉OK模式

4.使用方式

好，那就開始吧。

1.歌詞檔案格式分析及解析

首先，小夥伴們需要明白歌詞檔案的格式都是固定的，是什麼樣子的呢，我們來看看下圖：

我們一個歌詞檔案開啟都是這種格式，前面  []  中的是該行歌詞顯示的時間，後面一行是歌詞，只有時間沒有歌詞的行就是伴奏時間。瞭解了這固定的歌詞格式，剩下的就簡單了，解析這段文字就行了。我建立一個LrcBean用來存放每一行的資料，這個LrcBean中包括三個屬性，分別是一句歌詞，該歌詞開始唱的時間，該歌詞唱完的時間，咦，有的小夥伴可能有疑問，唱完是什麼時候呢？就是下一句的開始時間唄。OK，那我們來看看實體類：

public class LrcBean {
    private String lrc;
    private long start;
    private long end;

    public LrcBean() {
    }

    public LrcBean(String text, long start, long end) {
        this.lrc = text;
        this.start = start;
        this.end = end;
    }

    public String getLrc() {
        return lrc;
    }

    public void setLrc(String lrc) {
        this.lrc = lrc;
    }

    public long getStart() {
        return start;
    }

    public void setStart(long start) {
        this.start = start;
    }

    public long getEnd() {
        return end;
    }

    public void setEnd(long end) {
        this.end = end;
    }
}
 

1.考慮到歌詞文字中可能有轉義字元，我們需要先把轉義字元還原

2.然後按照換行符將文字拆分，再通過字串擷取將每一行的資料提取出來。程式碼如下(由於轉義字元顯示不出來，所以我這裡貼一張程式碼圖，原始碼文末可以下載):

OK，通過以上方式我們就把歌詞檔案解析成了一個List集合，該集合中的每一項就是一句歌詞，另外，在伴奏的時間段，我顯示一句music。

2.歌詞顯示控制元件繪製

歌詞解析完了，接下來我們就可以繪製歌詞View了。繪製的整體思路是這樣：

1.首先獲取當前播放的時間

2.根據當前播放時間，遍歷歌詞的List集合，判斷出當前正在播放的是List集合中的哪一句，找到該句的下標

3.遍歷歌詞List集合，繪製所有歌詞，繪製的過程中，如果該句是正在播放的歌詞，則使用高亮的畫筆來繪製，否則使用普通畫筆繪製。

4.判斷當前是否已經換行了，如果是，則呼叫setScrollY方法讓螢幕滾動一行。關於setScrollY方法如果小夥伴們還不太瞭解可以參考這篇文章View繪製詳解(五)，draw方法細節詳解之View的滾動/滑動問題。

5.每隔100毫秒重繪View。

OK，整個流程就是這樣，接下來我們來看看程式碼實現：

    @Override
    protected void onDraw(Canvas canvas) {
        if (width == 0 || height == 0) {
            width = getMeasuredWidth();
            height = getMeasuredHeight();
        }
        if (list == null || list.size() == 0) {
            canvas.drawText("暫無歌詞", width / 2, height / 2, gPaint);
            return;
        }

        getCurrentPosition();

        int currentMillis = player.getCurrentPosition();
        drawLrc2(canvas);
        long start = list.get(currentPosition).getStart();
        float v = (currentMillis - start) > 500 ? currentPosition * 80 : lastPosition * 80 + (currentPosition - lastPosition) * 80 * ((currentMillis - start) / 500f);
        setScrollY((int) v);
        if (getScrollY() == currentPosition * 80) {
            lastPosition = currentPosition;
        }
        postInvalidateDelayed(100);
    }

    private void drawLrc2(Canvas canvas) {
        for (int i = 0; i < list.size(); i++) {
            if (i == currentPosition) {
                canvas.drawText(list.get(i).getText(), width / 2, height / 2 + 80 * i, hPaint);
            } else {
                canvas.drawText(list.get(i).getText(), width / 2, height / 2 + 80 * i, gPaint);
            }
        }
    }

    private void getCurrentPosition() {
        try {
            int currentMillis = player.getCurrentPosition();
            if (currentMillis < list.get(0).getStart()) {
                currentPosition = 0;
                return;
            }
            if (currentMillis > list.get(list.size() - 1).getStart()) {
                currentPosition = list.size() - 1;
                return;
            }
            for (int i = 0; i < list.size(); i++) {
                if (currentMillis >= list.get(i).getStart() && currentMillis < list.get(i).getEnd()) {
                    currentPosition = i;
                    return;
                }
            }
        } catch (Exception e) {
//            e.printStackTrace();
            postInvalidateDelayed(100);
        }
    }

3.關於卡拉OK模式

OK，經過第二個步驟之後，我們這個歌詞控制元件已經可以根據當前播放的時間來顯示高亮的歌詞，同時進行歌詞的滾動。有的小夥伴可能還想實現一種類似於KTV裡邊的那種播放效果，我們也來看一看怎麼實現。還是先來說說思路吧。

1.把所有的歌詞都用普通的畫筆畫出來

2.為當前正在播放的歌詞生成一個Bitmap

3.根據當前播放時間，計算出該句歌詞播放的比例，然後根據這個比例繪製第二步生成的Bitmap。

OK，根據上述的思路，我貼出核心程式碼如下：

for (int i = 0; i < list.size(); i++) {
                canvas.drawText(list.get(i).getLrc(), width / 2, height / 2 + 80 * i, gPaint);
            }
            String highLineLrc = list.get(currentPosition).getLrc();
            int highLineWidth = (int) gPaint.measureText(highLineLrc);
            int leftOffset = (width - highLineWidth) / 2;
            LrcBean lrcBean = list.get(currentPosition);
            long start = lrcBean.getStart();
            long end = lrcBean.getEnd();
            int i = (int) ((currentMillis - start) * 1.0f / (end - start) * highLineWidth);
            if (i > 0) {
                Bitmap textBitmap = Bitmap.createBitmap(i, 80, Bitmap.Config.ARGB_8888);
                Canvas textCanvas = new Canvas(textBitmap);
                textCanvas.drawText(highLineLrc, highLineWidth / 2, 80, hPaint);
                canvas.drawBitmap(textBitmap, leftOffset, height / 2 + 80 * (currentPosition - 1), null);
            }

4.使用方式

OK，控制元件做好了，最後我們再來看看使用方式。很簡單，引入這個View 的類庫（文末會給出下載地址），然後傳入歌詞的文字，開啟繪製即可，如下：

lrcView.setLrc(lrcStr);
        lrcView.setPlayer(PlayUtil.player);
        lrcView.init();