歌词展示
封装歌词信息
歌词的内容如下,一行歌词由两部分组成,[]里面的是开始时间,后面的是歌词内容
[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,