让Android里的自定义View成为你的忠实“歌手”——仿QQ音乐歌词

2023-10-24 21:44:00

前言

国庆长假，祝大家节日愉快！

这个控件其实是在上周五写的。以前写代码一直都是信马由缰，无拘无束。但是最近开始注重时间和效率，喜欢限时编程。今天这个控件用了4个小时，远超当初预订的2个半小时。主要是中间还参加了一个防火演习，闲话不说，先看效果。

效果图

效果图

核心代码

public class LrcView extends View {
    private List<LrcEntity> mLrcList;  // 歌词列表
    private Paint mPaint;  // 画笔
    private float mX;  // 歌词的x坐标
    private float mY;  // 歌词的y坐标
    private int mCurrentLine = 0;  // 当前歌词行数
    private long mNextTime;  // 下一句歌词的时间戳

    public LrcView(Context context) {
        super(context);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);  // 抗锯齿
        mPaint.setTextSize(30);  // 字体大小
        mPaint.setColor(Color.WHITE);  // 字体颜色
        mX = 0;
        mY = 0;
        mNextTime = 0;
        mLrcList = new ArrayList<>();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mLrcList.isEmpty()) {
            return;
        }
        // 计算歌词的x、y坐标
        mX = (getWidth() - mPaint.measureText(mLrcList.get(mCurrentLine).getContent())) / 2;
        mY = getHeight() / 2 + mPaint.getTextSize() * mCurrentLine;
        // 绘制歌词
        canvas.drawText(mLrcList.get(mCurrentLine).getContent(), mX, mY, mPaint);
    }

    // 设置歌词列表
    public void setLrcList(List<LrcEntity> lrcList) {
        this.mLrcList = lrcList;
        invalidate();  // 重绘
    }

    // 设置当前歌词行数
    public void setCurrentLine(int currentLine) {
        this.mCurrentLine = currentLine;
        invalidate();  // 重绘
    }

    // 设置下一句歌词的时间戳
    public void setNextTime(long nextTime) {
        this.mNextTime = nextTime;
    }

    // 获取下一句歌词的时间戳
    public long getNextTime() {
        return mNextTime;
    }
}