*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
在上篇中,我与大家分享了关于如何进行*.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中如果涉及文字的绘制,为了能够精准的绘制文字的位置,我们需要获取需要绘制的文字的矩形区域,通过画笔Paint
的getTextBounds(String text, int start, int end, Rect bounds)
方法则可以帮助我们轻松获得一个需要绘制文字的一个矩形。当然,绘制文字矩形区域的大小还与文字的大小相关,我们还可以通过画笔Paint
的setTextSize(float textSize)
方法设置绘制文字大小,也就是常说的TextSize。 当然,在LyricView中,行