自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现

2017-01-14 10:45:18来源:http://www.jianshu.com/p/576cbf43053e作者:码农小阿飞人点击




在上篇中,我与大家分享了关于如何进行*.lrc歌词文件的解析,以及将解析完成后的歌词展示在镶嵌在ScrollView中的TextView上,就这样而言,一个简单的歌词显示功能也就实现了。 但是,如何才能够让自己写的音乐播放器在歌词显示模块能够显得高大上,并且能够像很多当前应用市场上流行的音乐播放器那样,实现当前播放高亮显示、歌词回弹效果、歌词淡入淡出效果以及滑动歌词快速播放等功能呢? 请接着往下读.....


本篇,我想要和大家分享的便是如何通过自定义View实现一款炫酷的LyricView歌词显示控件。看过上篇的朋友想必应该都还记得,我在上篇中有提及到在早些前我有用ScrollView嵌套TextView的方式实现过自定义LyricView,但是,由于体验效果和功能拓展上的不足,我并没有公开分享。既然通过ScrollView嵌套TextView的方式不能满足我们的设计需求,那是不是能够通过自定义View的方式实现LyricView,既有如TextView那样的LineHeigh(行高)、LineCount(总行数)的概念,也有如ScrollView那样的ScrollY(Y方向的偏移量)的概念。那是必须的,说干就干。


解析*.lrc歌词文件,生成歌词集合列表,获得行总数

解析歌词在本篇中我就不设篇幅进行描述了,如果还不清楚的可以翻看我的上一篇文章《自定义View强势来袭,用自定义View实现歌词显示控件上篇之实现歌词文件解析》。而在LyricView中,我们需要做的是将逐行解析出来的歌词信息添加到集合mLyricInfo中,而总行数mLineCount也就等于List集合的大小mLineCount = mLyricInfo.song_lines.size()


计算歌词单行高度,获得歌词绘制区域总高度

写过自定义View的朋友应该都会知道,在自定义View中如果涉及文字的绘制,为了能够精准的绘制文字的位置,我们需要获取需要绘制的文字的矩形区域,通过画笔PaintgetTextBounds(String text, int start, int end, Rect bounds)方法则可以帮助我们轻松获得一个需要绘制文字的一个矩形。当然,绘制文字矩形区域的大小还与文字的大小相关,我们还可以通过画笔PaintsetTextSize(float textSize)方法设置绘制文字大小,也就是常说的TextSize。 当然,在LyricView中,行高可不仅仅就只是文字矩形区域的高度,行高还包括两行之间的行间距,如下图所示。既然歌词总行数和歌词单行高度我们都已取得,那么获取歌词绘制区域的总高度也就so easy了。



源码截图 - 计算行高度
定义scrollY,并通过当前歌曲播放进度的时间戳计算scrollY

既然LyricView能够实现滑动功能,那么引入scrollY值记录滑动偏移量,并控制视图绘制效果也就顺理成章。 需要明确一点,当偏移量scrollY的值为零的时候,歌词的首行将显示在整个LyricView的正中间 。在上篇中,我们也知道每一句歌词中都包含着开始时间,而我们也就可以通过当前歌曲播放进度匹配当前播放的行数 mCurrentPlayLine,并通过当前播放所在行,计算偏移量scrollY的值,控制歌词播放滚动和当前播放位置的高亮显示。



源码截图 - 匹配当前播放行数 mCurrentPlayLine


源码截图 - 计算偏移量scrollY
理论基础已经实现,初步尝试绘图 onDraw
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.song_lines.get(i).content, x, y, mTextPaint);
}

Bingo ! 歌词确实能够在屏幕上绘制出来,细心的朋友也许会发现其中的几个特别的地方,分别是当前播放位置高亮显示和歌词淡入淡出效果实现的代码:


 //    实现当前播放位置高亮显示  
if (i == mCurrentPlayLine - 1) {
mTextPaint.setColor(mHighLightColor);
}
// 歌词淡入淡出效果实现
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);
}

但是,仅仅只是实现显示功能,并且超出范围的歌词内容还不能通过滑动来查看。哈哈~ 别着急啊,骚年,坐下来和我凉茶,听我细细道来。


重写onTouchEvent,实现歌词滑动查看,并实现overScroll回弹效果

仅仅需要实现滑动视图的功能的话,说实话,非常简单,只需要记录ACTION_DOWN时的y值,并比较ACTION_MOVE过程中的y值计算两者的差值,生成新的偏移量scrollY,再刷新视图,就可以搞定 ! 要是就这么简简单单了事的话,怎么也不符合我个人对完美设计的要求。要是我们无限滑动的话,整个歌词内容区域就会滑动出我们的可视区域,也就是常说的overScroll,如果不加以限制将会是一种非常差的用户体验。当然,不同的开发对解决这个问题有不同的方法,有些播放器的歌词显示控件,当滑动事件出现overScroll时,将不再视图继续滑动。当然,也有当滑动事件出现overScroll时,视图依旧能够继续滑动,但与正常滑动时有所区别,这个时候的滑动会有一种阻尼效果,也就是实际滑动距离和视图的滚动距离并不相等,而且随着overScroll的值越大,阻力越大,滑动越艰难,并在用户手指离开屏幕后回到overScroll的值为零的位置。当然,我本人更喜欢后者的用户体验,为了实现这个功能,那么就必须要在重写onTouchEvent的方法中"做点手脚"了。



源码截图 - ACTION_MOVE


源码截图 - 阻尼大小计算

通过我一次一次对代码的细化,只要这么简单的两个方法,就完成了滑动时偏移量scrollY的计算,包括overScroll和非overScroll,是的,只要这么两个方法。
到了这一步,歌词的显示、滑动查看都已经完成。但这还没完,我是不是还说过我的LyricView能够实现像网易云音乐歌词显示控件那样的指示器效果,哈哈哈 ~ 对于我这个完美主义者而言,这个功能必须实现。



歌词指示器效果图
实现歌词指示器效果,"屌丝"蜕变"高富帅"

其实,指示器效果实现起来也不是很难,其实指示器左侧的按钮完全可以用绘制Bitmap的方式其实现,但是,考虑到LyricView的灵活性,同时,我们程序猿不都是能够用代码绘制的决不在工程中添加图片的嘛 !更何况就一个简单的播放按钮,随便画画,哈哈 ~ 至于,右侧的时间指示,则是通过当前偏移量scrollY的值计算得来的当前控件正中间位置显示歌词的开始时间。



源码截图 - 绘制指示器左侧播放按钮


源码截图 - 绘制指示器分割线和时间

既然设计播放按钮,当然播放按钮就要实现点击事件啊:



源码截图 - 播放按钮点击位置判断


源码截图 - 播放按钮点击事件相应

到这一步,我们的自定义LyricView设计介绍也就告一段落咯 ! 当然,功能远不止这些,还有设置字体大小、设置行间距、以及结合速度追踪器实现滑行效果等等。所谓"授人以鱼不如授人以渔",我想要和大家分享的是我的一个设计思路,大家可以根据需求设计不通的功能,因此在这里我也不做过多介绍,对小阿飞的LyricView感兴趣的朋友可以去我的gitHub下载研究。



overScroll效果展示


字体颜色设置效果展示


字体大小设置效果展示


行间距设置效果展示


指示器和播放按钮效果展示

作者申明:如果文中有表述不当或阐述错误的地方,还望正在看文章的您可以帮忙指出,有疑惑也可以在评论区提问或者私信,期待您的意见和建议,欢迎关注交流。




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台