记一下自己在项目中用到的歌词控件实现思路
控件效果类似于目前网易云播放器的歌词显示，大概是这样：
网易云歌词效果
控件支持：
- 正在播放的歌词高亮显示
- 随进度自动滚动
- 可以手动滑动歌词，显示indicator（该句进度，横线，播放按钮）
- 点击indicator的播放按钮可以跳转至所选中行播放
下面开始
一、 歌词的处理
歌词的处理这里不多介绍，网上有很多分析的文章，感兴趣的朋友可以去看一下。这一步骤主要是将服务器返回给我们的歌词字符串解析为我们可用的List，然后设置给我们的控件：
设置歌词
其中，LrcRow是我们解析好的每一行歌词的实体类，该类包含一句歌词的内容，起始时间，总时长等信息
二、 控件分析
观察上面效果，可以看出，控件主要由以下三部分组成：
- 高亮歌词
- 普通歌词
- indicator
那么我们先不考虑实现滑动效果之类，先考虑如何将这几部分成功画出？
为了画出以上三部分，需要的对象：
初始化过程
代码很简单，就不细说了
下面就是开始在onDraw()中绘制的过程了
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isLoadingLrc) {
drawHintText(canvas, LOADING_LRC_TEXT);
return;
}
if (!hasLrc()) {
drawHintText(canvas, DEFAULT_TEXT);
return;
}
if (needDrawIndicator) {
drawIndicator(canvas);
}
float y = getHeight() / 2;
for (int i = 0; i < lrcRowList.size(); i++) {
String lrc = getLrc(i);
if (i == curLine) {
drawHighlightText(canvas, lrc, y);
} else {
drawNormalText(canvas, i, y);
}
// 计算得到y坐标
y = y + eachLineHeight;
}
}
逻辑很清晰，就是遍历所有歌词，如果该歌词当前正在播放，就调用drawHighlightText()方法绘制高亮歌词，否则，就drawNormalText()绘制一般歌词。
因为上面两个方法逻辑类似，就以其中一个来说明其逻辑。
高亮歌词的绘制
核心就是调用canvas.setText()；代码中设置起始坐标x，是业务需求原因，当歌词长度超出一行时，需要水平滚动展示，这里可以不用关注
绘制indicator
分为三部分：进度，横线和播放按钮，也很简单，到这里，绘制的部分就结束了
三、 设置进度及自动滚动
控件中，使用Scroller+View的computeScroll实现弹性滑动
image.png
image.png
设置进度：
设置进度
设置进度时，首先根据传入的进度，计算得到该进度所对应的行数，然后由行数计算得到在y方向上的offset，最后调用smoothScrollTo()让歌词开始滚动。
这里区分了一下是否是用户拖动进度条而导致的进度变化，逻辑稍微不一样，主要是涉及到indicator的显示控制逻辑，具体见代码
四、 处理滑动及点击事件
-
播放按钮的点击处理
重写onTouchEvent()方法，当down事件时，判断该down事件的坐标是否落在playBtn的区域内（该区域可以从 画该按钮时的坐标得到）
image.png
再在up事件中，再次判断一下该坐标是否满足条件，若满足，则将该句歌词所对应的progress，通过回调的方式回调给外部activity
- 滑动歌词的处理
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
actionDown(event);
break;
case MotionEvent.ACTION_MOVE:
if (!hasLrc()) {
return false;
}
if (!isDragingLrc) {
if (Math.abs(event.getY() - downY) > touchSlop) {
isDragingLrc = true;
stopHorizontalScrollWithTimer();
scroller.forceFinished(true);
lastY = event.getY();
}
}
if (isDragingLrc) {
isClickEvent = false;
float deltaY = event.getY() - lastY;
if ((getScrollY() - deltaY) < -eachLineHeight) {
// 处理上滑边界，如果已经滑动至顶端，则限制其继续上滑
deltaY = deltaY > 0 ? 0 : deltaY;
} else if ((getScrollY() - deltaY) > lrcRowList.size() * eachLineHeight) {
// 处理下滑边界
deltaY = deltaY < 0 ? 0 : deltaY;
}
scrollBy(getScrollX(), -(int)deltaY);
curLine = calculateLineNo();
lastY = event.getY();
return true;
}
lastY = event.getY();
break;
case MotionEvent.ACTION_UP:
actionUp(event);
break;
default:
break;
}
return true;
}
通过计算down事件时的y坐标，和move事件时的y坐标的差值deltaY，调用view的scrollBy()实现歌词的拖动滑动
这里需要注意，当down和move的y坐标值大于touchSlop，即可以认为是一次滑动事件时，需要设置显示indicator。并且，当上滑至最上/下方时，需要限制deltaY的值，否则，会出现可以无限上下滑动的情况
到这里，歌词控件的主要逻辑都已经理了一遍，感觉依然有很多可以改进的地方，后面有时间会再把它优化一下。
网友评论