自定义歌词展示控件

歌词展示

封装歌词信息

歌词的内容如下，一行歌词由两部分组成，[]里面的是开始时间，后面的是歌词内容

[00:03.25]最炫民族风 - 凤凰传奇       
[00:08.67]献给苦逼的黑马程序员         
[00:22.67]苍茫的天涯是我的爱                             
[00:26.42]绵绵的青山脚下花正开 
[00:30.18]什么样的节奏是最呀最摇摆
[00:33.90]什么样的歌声才是最开怀
[00:37.71]弯弯的河水从天上来
[00:41.51]流向那万紫千红一片海
[00:45.27]火辣辣的歌谣是我们的期待
[00:49.05]一路边走边唱才是最自在
[00:52.86]我们要唱就要唱得最痛快
[00:56.61]你是我天边 最美的云彩
...

对应的实体类为

public class Lyric implements Comparable<Lyric>{
   
    private int startPoint; // 开始时间
    private String content; // 一行歌词的内容

    public Lyric(int startPoint, String content) {
        this.startPoint = startPoint;
        this.content = content;
    }

    public int getStartPoint() {
        return startPoint;
    }

    public void setStartPoint(int startPoint) {
        this.startPoint = startPoint;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    @Override
    public int compareTo(Lyric another) {
        return startPoint-another.getStartPoint();
    }
}

绘制单行居中文本

自定义一个显示歌词的LyricView，歌词本身就是一个文本，所以在这里我们继承TextView。它还有一个好处继承TextView 之后不需要再去重写onMeasure 方法。在onDraw 方法中去绘制一个文本。

public class LyricView extends TextView {
   
    private float hightlightSize; // 高亮歌词字体大小
    private float normalSize;
    private int   hightLightColor; // 高亮歌词字体颜色
    private int   normalColor;
    private Paint paint;

    public LyricView(Context context) {
        super(context);
        initView();
    }

    public LyricView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public LyricView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    // 初始化字体大小和颜色
    private void initView() {
        hightlightSize = getResources().getDimension(R.dimen.lyric_hightlight_size);
        normalSize = getResources().getDimension(R.dimen.lyric_normal_size);
        hightLightColor = Color.GREEN;
        normalColor = Color.WHITE;
        paint = new Paint();
        paint.setAntiAlias(true);//抗锯齿
        paint.setTextSize(hightlightSize);
        paint.setColor(hightLightColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        String text = "正在加载歌词...";
        canvas.drawText(text, 0, 0, paint);
    }
}

在项目中的歌词布局中引用View，重新build 之后的展示效果

从上图中可以看到文本显示的坐标是view 的左上角。那么我们需要将文本显示的位置设置在view 的中间。计算的方法如图

在onSizeChang 中计算出View 宽和高的一半，通过paint.getTextBounds 方法计算出文本的宽高的一半。

@Override
protected void onSizeChanged(int w,