歌词显示控件的实现下——自定义View
先看下效果
在上篇文章中呢，分享了关于lrc歌词文件的解析方法，根据歌词文件格式，解析出对应实体类。但是，怎样才能让让自己的音乐播放器的歌词像网易云音乐一样，随音乐（歌词时间）滚动、当前歌词高亮、其他歌词渐变等效果呢？
接下来我想和大家分享的就是如何通过自定义View实现炫酷的LyricView歌词显示控件。
分析
我们最重要的目的是将文字绘制在View中，并设置各种效果和动画，而在绘制之前我们需要计算出文字的位置，而歌词又是以 行 为单位来显示，所以，计算行高和行间距，当然，还需要一些文字颜色等属性；
可以想到，歌词会随着音乐或者说时间进行滚动，所以我们需要对纵向偏移量进行计算和处理，并设置滚动动画；
接下来就应该逐行进行绘制了，之后可以给当前播放位置绘制指示器以提高逼格；
用户可以手势滑动歌词进行查看，之后还需要回滚，所以我们需要对手势，也就是onTouchEvent进行处理。
好的，大致思路就是这样，接下来我们一步步地实现：
解析歌词，设置实体类
解析歌词上一篇文章已经介绍很详细，这里不再累赘。
这里讲歌词解析也封装进LyricView中，所以解析与赋值一并进行。
注意赋值实体类时，View其实已经绘制过了，不过界面上什么都没有显示（因为LyricInfo类为null，在绘制时会返回不再继续），赋值实体类后，在刷新一下界面：
/**
* 刷新View
*/
private void invalidateView() {
if (Looper.getMainLooper() == Looper.myLooper()) {
// 当前线程是主UI线程，直接刷新。
invalidate();
} else {
// 当前线程是非UI线程，post刷新。
postInvalidate();
}
}在这里进行线程的判断，主线程中直接调用invalidate，在子线程中调用postInvalidate，原因想必大家都清楚，就不再解释了。
设置大小、颜色等相关属性
/**
* 设置高亮显示文本的字体颜色
*
* @param color 颜色值
*/
public void setHighLightTextColor(int color) {
if (mHighLightColor != color) {
mHighLightColor = color;
invalidateView();
}
}
/**
* 设置歌词内容行间距
*
* @param lineSpace 行间距大小
*/
public void setLineSpace(float lineSpace) {
if (mLineSpace != lineSpace) {
mLineSpace = getRawSize(TypedValue.COMPLEX_UNIT_SP, lineSpace);
measureLineHeight();
mScrollY = measureCurrentScrollY(mCurrentPlayLine);
invalidateView();
}
}
/**
* 设置歌词文本内容字体大小
*
* @param unit
* @param size
*/
public void setTextSize(int unit, float size) {
setRawTextSize(getRawSize(unit, size));
}
/**
* 设置歌词文本内容字体大小
*
* @param size
*/
public void setTextSize(float size) {
setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
}其中getRawSize方法只是根据设备将设置的数据转换单位返回。
/**
* 设置字体大小,并重新计算，刷新
* @param size
*/
private void setRawTextSize(float size) {
if (size != mTextPaint.getTextSize()) {
mTextPaint.setTextSize(size);
measureLineHeight();
mScrollY = measureCurrentScrollY(mCurrentPlayLine);
invalidateView();
}
}
private float getRawSize(int unit, float size) {
Context context = getContext();
Resources resources;
if (context == null) {
resources = Resources.getSystem();
} else {
resources = context.getResources();
}
return TypedValue.applyDimension(unit, size, resources.getDisplayMetrics());
}其中measureLineHeight是在计算行高，measureCurrentScrollY是在计算纵向偏移量，这两个方法稍后就会介绍。
初始化尺寸及画笔
/**
* 初始化需要的尺寸
*/
private void initAllBounds() {
setTextSize(20);
setLineSpace(18);
mBtnWidth = (int) (getRawSize(TypedValue.COMPLEX_UNIT_SP, 20));
mTimerBound = new Rect();
mIndicatorPaint.getTextBounds(mDefaultTime, 0, mDefaultTime.length(), mTimerBound);
measureLineHeight();
}
/**
* 初始化画笔
*/
private void initAllPaints() {
mTextPaint = new Paint();
mTextPaint.setDither(true); // 防抖动
mTextPaint.setAntiAlias(true); // 抗锯齿
mTextPaint.setTextAlign(Paint.Align.CENTER); // 文字对其方式
mIndicatorPaint = new Paint();
mIndicatorPaint.setDither(true);
mIndicatorPaint.setAntiAlias(true);
mIndicatorPaint.setTextSize(getRawSize(TypedValue.COMPLEX_UNIT_SP, 12));
mIndicatorPaint.setTextAlign(Paint.Align.CENTER);
mBtnPaint = new Paint();
mBtnPaint.setDither(true); // 设置防抖动
mBtnPaint.setAntiAlias(true); // 设置抗锯齿
mBtnPaint.setColor(mBtnColor);
mBtnPaint.setStrokeWidth(3.0f); // 设置空心线宽
mBtnPaint.setStyle(Paint.Style.STROKE);
}这些简单的初始化，就不再详细介绍了。
计算行高，行间距
/**
* 计算行高度
*/
private void measureLineHeight() {
Rect lineBound = new Rect();
mTextPaint.getTextBounds(mDefaultHint, 0, mDefaultHint.length(), lineBound);
mLineHeight = lineBound.height() + mLineSpace;
}之前行间距已经设置过了，当然，开发者不设置也是可以的，我已经设了默认值。
我们认为一行，应该包括一行文字和一个行间距，所以 行高=文字高度+行间距。
计算文字高度，应该使用画笔的getTextBounds方法，从文字区域的Rect中获取文字所占的高度。
计算偏移量
/**
* 根据当前给定的时间戳滑动到指定位置
*
* @param time 时间戳
*/
private void scrollToCurrentTimeMillis(long time) {
int position = 0;
if (scrollable()) {
for (int i = 0, size = mLineCount; i < size; i++) {
LineInfo lineInfo = mLyricInfo.getLines().get(i);
if (lineInfo != null && lineInfo.getStartTime() > time) {
position = i;
break;
}
if (i == mLineCount - 1) {
position = mLineCount;
}
}
}
if (mCurrentPlayLine != position && !mUserTouch && !mSliding && !mIndicatorShow) {
mCurrentPlayLine = position;
smoothScrollTo(measureCurrentScrollY(position));
} else {
if (!mSliding && !mIndicatorShow) {
mCurrentPlayLine = mCurrentShowLine = position;
}
}
}既然LyricView能够实现滑动功能，那么引入scrollY值记录滑动偏移量，并控制视图绘制效果也就顺理成章。 需要明确一点，当偏移量scrollY的值为零的时候，歌词的首行将显示在整个LyricView的正中间 。
在上篇中，我们也知道每一句歌词中都包含着开始时间，而我们也就可以通过当前歌曲播放进度匹配当前播放的行数 mCurrentPlayLine，并通过当前播放所在行，计算偏移量scrollY的值，控制歌词播放滚动和当前播放位置的高亮显示。
/**
* 根据行号计算偏移量
* @param line 当前指定行号
*/
private float measureCurrentScrollY(int line) {
return (line - 1) * mLineHeight;
}这里还需注意，第一行的时候偏移量为0，所以计算对应偏移量的时候需要先减一。
开始绘制
@Override
protected void onDraw(Canvas canvas) {
if (mLyricInfo != null && mLyricInfo.getLines() != null && mLyricInfo.getLines().size() > 0) {
for (int i = 0, size = mLineCount; i < size; i++) {
float x = getMeasuredWidth() * 0.5f;
float y = getMeasuredHeight() * 0.5f + (i + 0.5f) * mLineHeight - 6 - mLineSpace * 0.5f - mScrollY;
// 已经绘制的不再绘制
if (y + mLineHeight * 0.5f < 0) {
continue;
}
// 超出屏幕部分不绘制
if (y - mLineHeight * 0.5f > getMeasuredHeight()) {
break;
}
if (i == mCurrentPlayLine - 1) {
mTextPaint.setColor(mHighLightColor);
} else {
if (mIndicatorShow && i == mCurrentShowLine - 1) {
mTextPaint.setColor(mCurrentShowColor);
} else {
mTextPaint.setColor(mDefaultColor);
}
}
// 不在中心区域
if (y > getMeasuredHeight() - mShaderWidth || y < mShaderWidth) {
if (y < mShaderWidth) {
mTextPaint.setAlpha(26 + (int) (23000.0f * y / mShaderWidth * 0.01f));
} else {
mTextPaint.setAlpha(26 + (int) (23000.0f * (getMeasuredHeight() - y) / mShaderWidth * 0.01f));
}
// 在中心区
} else {
mTextPaint.setAlpha(255);
}
canvas.drawText(mLyricInfo.getLines().get(i).getContent(), x, y, mTextPaint);
}
} else {
mTextPaint.setColor(mHintColor);
canvas.drawText(mDefaultHint, getMeasuredWidth() * 0.5f, (getMeasuredHeight() + mLineHeight - 6) * 0.5f, mTextPaint);
}
} 这样文字就可以绘制在屏幕上了，同时大家可能也看出来了，我设置了透明度，也就是淡入淡出效果。
注意：
- 已经绘制过的不再进行绘制
- 超出屏幕的不绘制
- 不在中心区域的其他位置的字体设置透明度
- 在中心区，也就是当前局无透明度
触摸事件，回弹效果
如果单纯实现视图滑动的功能的话，比较简单：只需要记录ACTION_DOWN时的y值，并比较ACTION_MOVE过程中的y值计算两者的差值，生成新的偏移量scrollY，再刷新视图，就可以了 !
但是，这样实现的话，用户一直滑动，整个歌词内容区域就会滑动出我们的可视区域，也就是常说的overScroll，如果不加以限制将会是一种非常差的用户体验。
与正常滑动时有所区别，滑动应该有一种阻尼效果：也就是实际滑动距离和视图的滚动距离并不相等，而且随着overScroll的值越大，阻力越大，滑动越艰难，并在用户手指离开屏幕后回到overScroll的值为零的位置。
/**
* 计算阻尼效果的大小
*/
private final int mMaxDampingDistance = 360;
private float measureDampingDistance(float value02) {
return value02 > mMaxDampingDistance ? (mMaxDampingDistance * 0.6f + (value02 - mMaxDampingDistance) * 0.72f) : value02 * 0.6f;
}/**
* 手势移动执行事件
*
* @param event
*/
private void actionMove(MotionEvent event) {
if (scrollable()) {
final VelocityTracker tracker = mVelocityTracker;
tracker.computeCurrentVelocity(1000, maximumFlingVelocity);
float scrollY = mLastScrollY + mDownY - event.getY(); // 102 -2 58 42
float value01 = scrollY - (mLineCount * mLineHeight * 0.5f); // 52 -52 8 -8
float value02 = ((Math.abs(value01) - (mLineCount * mLineHeight * 0.5f))); // 2 2 -42 -42
mScrollY = value02 > 0 ? scrollY - (measureDampingDistance(value02) * value01 / Math.abs(value01)) : scrollY; // value01 / Math.abs(value01) 控制滑动方向
mVelocity = tracker.getYVelocity();
measureCurrentLine();
}
}其中VelocityTracker主要用跟踪触摸屏事件（flinging事件和其他gestures手势事件）的速率。
通过一次一次对代码的细化，只要这么简单的两个方法，就完成了滑动时偏移量scrollY的计算，包括overScroll和非overScroll。
到了这一步，歌词的显示、滑动查看都已经完成。
绘制指示器
/**
* 绘制指示器
*
* @param canvas
*/
private void drawIndicator(Canvas canvas) {
mIndicatorPaint.setColor(mIndicatorColor);
mIndicatorPaint.setAlpha(128);
mIndicatorPaint.setStyle(Paint.Style.FILL);
canvas.drawText(measureCurrentTime(), getMeasuredWidth() - mTimerBound.width(), (getMeasuredHeight() + mTimerBound.height() - 6) * 0.5f, mIndicatorPaint);
Path path = new Path();
mIndicatorPaint.setStrokeWidth(2.0f);
mIndicatorPaint.setStyle(Paint.Style.STROKE);
mIndicatorPaint.setPathEffect(new DashPathEffect(new float[]{20, 10}, 0));
path.moveTo(mPlayable ? mBtnBound.right + 24 : 24, getMeasuredHeight() * 0.5f);
path.lineTo(getMeasuredWidth() - mTimerBound.width() - mTimerBound.width() - 36, getMeasuredHeight() * 0.5f);
canvas.drawPath(path, mIndicatorPaint);
}到这里，歌词显示器就算完成了，有不对的地方还望大家指出。
获取更多精彩内容，关注我的微信公众号——安卓干货营！
