酷狗音樂展示滾動歌詞效果的控制元件實現
阿新 • • 發佈:2019-02-20
在音樂播放器專案中使用到酷狗音樂展示歌詞的效果,需要支援修改字型、顏色、漸變色等功能
截圖如下(效果不是很好,請下載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); } }