1. 程式人生 > >酷狗音樂展示滾動歌詞效果的控制元件實現

酷狗音樂展示滾動歌詞效果的控制元件實現

在音樂播放器專案中使用到酷狗音樂展示歌詞的效果,需要支援修改字型、顏色、漸變色等功能

截圖如下(效果不是很好,請下載Demo檢視)

截圖

歌詞繪製流程核心程式碼如下(具體實現過程請看Github原始碼)

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 中心Y座標
    float centerY = getHeight() / 2 + mTextSize / 2 + mAnimOffset;
    // 無歌詞檔案
    if (!hasLrc()) {
        float centerX = (getWidth() - mCurrentPaint.measureText(label)) / 2;
        canvas.drawText(label, centerX, centerY, mCurrentPaint);
        return;
    }
    // 畫當前行
    String currStr = mLrcTexts.get(mCurrentLine);
    float currX = (getWidth() - mCurrentPaint.measureText(currStr)) / 2;
    canvas.drawText(currStr, currX, centerY, mCurrentPaint);
    // 畫當前行上面的
    for (int i = mCurrentLine - 1; i >= 0; i--) {
        String upStr = mLrcTexts.get(i);
        float upX = (getWidth() - mNormalPaint.measureText(upStr)) / 2;
        float upY = centerY - (mTextSize + mDividerHeight) * (mCurrentLine - i);
        // 超出螢幕停止繪製
        if (upY - mTextSize < 0) {
            break;
        }
        canvas.drawText(upStr, upX, upY, mNormalPaint);
    }
    // 畫當前行下面的
    for (int i = mCurrentLine + 1; i < mLrcTimes.size(); i++) {
        String downStr = mLrcTexts.get(i);
        float downX = (getWidth() - mNormalPaint.measureText(downStr)) / 2;
        float downY = centerY + (mTextSize + mDividerHeight) * (i - mCurrentLine);
        // 超出螢幕停止繪製
        if (downY > getHeight()) {
            break;
        }
        canvas.drawText(downStr, downX, downY, mNormalPaint);
    }
}