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

   <p><img src="https://simg.open-open.com/show/a6092fe967f76843c7f68746657aa8ec.jpg"></p>    <p>在上篇中，我与大家分享了关于如何进行*.lrc歌词文件的解析，以及将解析完成后的歌词展示在镶嵌在ScrollView中的TextView上，就这样而言，一个简单的歌词显示功能也就实现了。 但是，如何才能够让自己写的音乐播放器在歌词显示模块能够显得高大上，并且能够像很多当前应用市场上流行的音乐播放器那样，实现当前播放高亮显示、歌词回弹效果、歌词淡入淡出效果以及滑动歌词快速播放等功能呢？ 请接着往下读.....</p>    <p>本篇，我想要和大家分享的便是如何通过自定义View实现一款炫酷的LyricView歌词显示控件。看过上篇的朋友想必应该都还记得，我在上篇中有提及到在早些前我有用ScrollView嵌套TextView的方式实现过自定义LyricView，但是，由于体验效果和功能拓展上的不足，我并没有公开分享。既然通过ScrollView嵌套TextView的方式不能满足我们的设计需求，那是不是能够通过自定义View的方式实现LyricView，既有如TextView那样的LineHeigh(行高)、LineCount(总行数)的概念，也有如ScrollView那样的ScrollY(Y方向的偏移量)的概念。那是必须的，说干就干。</p>    <h3><strong>解析*.lrc歌词文件，生成歌词集合列表，获得行总数</strong></h3>    <p>解析歌词在本篇中我就不设篇幅进行描述了，如果还不清楚的可以翻看我的上一篇文章 <a href="http://www.open-open.com/lib/view/open1472796511467.html">《自定义View强势来袭，用自定义View实现歌词显示控件上篇之实现歌词文件解析》</a> 。而在LyricView中，我们需要做的是将逐行解析出来的歌词信息添加到集合 mLyricInfo 中，而总行数 mLineCount 也就等于List集合的大小 mLineCount = mLyricInfo.song_lines.size() 。</p>    <h3><strong>计算歌词单行高度，获得歌词绘制区域总高度</strong></h3>    <p>写过自定义View的朋友应该都会知道，在自定义View中如果涉及文字的绘制，为了能够精准的绘制文字的位置，我们需要获取需要绘制的文字的矩形区域，通过 画笔Paint 的 getTextBounds(String text, int start, int end, Rect bounds) 方法则可以帮助我们轻松获得一个需要绘制文字的一个矩形。当然，绘制文字矩形区域的大小还与文字的大小相关，我们还可以通过 画笔Paint 的 setTextSize(float textSize) 方法设置绘制文字大小，也就是常说的TextSize。 当然，在LyricView中，行高可不仅仅就只是文字矩形区域的高度，行高还包括两行之间的 行间距 ，如下图所示。既然歌词总行数和歌词单行高度我们都已取得，那么获取歌词绘制区域的总高度也就so easy了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/45e0033825d8bd1c8d35fcb26f80f0fa.png"></p>    <p style="text-align:center">计算行高度</p>    <p>定义scrollY，并通过当前歌曲播放进度的时间戳计算scrollY</p>    <p>既然LyricView能够实现滑动功能，那么引入scrollY值记录滑动偏移量，并控制视图绘制效果也就顺理成章。 <em> 需要明确一点，当 偏移量scrollY 的值为零的时候，歌词的首行将显示在整个LyricView的正中间 </em> 。在上篇中，我们也知道每一句歌词中都包含着 开始时间 ，而我们也就可以通过当前歌曲播放进度匹配 当前播放的行数 mCurrentPlayLine ，并通过当前播放所在行，计算 偏移量scrollY 的值，控制歌词播放滚动和当前播放位置的高亮显示。</p>    <p><img src="https://simg.open-open.com/show/129259061710a2dfb038e91df0c69c42.png"></p>    <p style="text-align:center">匹配当前播放行数 mCurrentPlayLine</p>    <p><img src="https://simg.open-open.com/show/1565aeef10e68f1720541365eeebbec0.png"></p>    <p style="text-align:center">计算偏移量scrollY</p>    <p>理论基础已经实现，初步尝试绘图 onDraw</p>    <pre>  <code class="language-java">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);  }</code></pre>    <p>Bingo ! 歌词确实能够在屏幕上绘制出来，细心的朋友也许会发现其中的几个特别的地方，分别是当前播放位置高亮显示和歌词淡入淡出效果实现的代码：</p>    <pre>  <code class="language-java">//    实现当前播放位置高亮显示     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);    }</code></pre>    <p>但是，仅仅只是实现显示功能，并且超出范围的歌词内容还不能通过滑动来查看。哈哈~ 别着急啊，骚年，坐下来和我凉茶，听我细细道来。</p>    <h3><strong>重写onTouchEvent，实现歌词滑动查看，并实现overScroll回弹效果</strong></h3>    <p>仅仅需要实现滑动视图的功能的话，说实话，非常简单，只需要记录 ACTION_DOWN 时的 y值 ，并比较 ACTION_MOVE 过程中的 y值 计算两者的差值，生成新的 偏移量scrollY ，再刷新视图，就可以搞定 ! 要是就这么简简单单了事的话，怎么也不符合我个人对完美设计的要求。要是我们无限滑动的话，整个歌词内容区域就会滑动出我们的可视区域，也就是常说的 overScroll ，如果不加以限制将会是一种非常差的用户体验。当然，不同的开发对解决这个问题有不同的方法，有些播放器的歌词显示控件，当滑动事件出现 overScroll 时，将不再视图继续滑动。当然，也有当滑动事件出现 overScroll 时，视图依旧能够继续滑动，但与正常滑动时有所区别，这个时候的滑动会有一种阻尼效果，也就是实际滑动距离和视图的滚动距离并不相等，而且随着 overScroll 的值越大，阻力越大，滑动越艰难，并在用户手指离开屏幕后回到 overScroll 的值为零的位置。当然，我本人更喜欢后者的用户体验，为了实现这个功能，那么就必须要在重写onTouchEvent的方法中"做点手脚"了。</p>    <p><img src="https://simg.open-open.com/show/23e3053f3b7d2d034c64034408ca4073.png"></p>    <p style="text-align:center">ACTION_MOVE</p>    <p><img src="https://simg.open-open.com/show/6658c3dae6f4258f19fbbb5a140bd831.png"></p>    <p style="text-align:center">阻尼大小计算</p>    <p>通过我一次一次对代码的细化，只要这么简单的两个方法，就完成了滑动时 偏移量scrollY 的计算，包括overScroll和非overScroll，是的，只要这么两个方法。</p>    <p>到了这一步，歌词的显示、滑动查看都已经完成。但这还没完，我是不是还说过我的LyricView能够实现像网易云音乐歌词显示控件那样的指示器效果，哈哈哈 ~ 对于我这个完美主义者而言，这个功能必须实现。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a4df4b957f1f2a5b08675185cda3f284.png"></p>    <p style="text-align:center">歌词指示器效果图</p>    <h3><strong>实现歌词指示器效果，"屌丝"蜕变"高富帅"</strong></h3>    <p>其实，指示器效果实现起来也不是很难，其实指示器左侧的按钮完全可以用绘制Bitmap的方式其实现，但是，考虑到LyricView的灵活性，同时，我们程序猿不都是能够用代码绘制的决不在工程中添加图片的嘛 ！更何况就一个简单的播放按钮，随便画画，哈哈 ~ 至于，右侧的时间指示，则是通过当前 偏移量scrollY 的值计算得来的当前控件正中间位置显示歌词的开始时间。</p>    <p><img src="https://simg.open-open.com/show/2de97cb6413c6f11ff9f4dc1b6b74f05.png"></p>    <p style="text-align:center">绘制指示器左侧播放按钮</p>    <p><img src="https://simg.open-open.com/show/71916fe26d5e78302b4715726da35a6e.png"></p>    <p style="text-align:center">绘制指示器分割线和时间</p>    <p>既然设计播放按钮，当然播放按钮就要实现点击事件啊：</p>    <p><img src="https://simg.open-open.com/show/0722d21611db6112cb1000545a981495.png"></p>    <p style="text-align:center">播放按钮点击位置判断</p>    <p><img src="https://simg.open-open.com/show/bd05d9640faa625616856c48105278f1.png"></p>    <p style="text-align:center">播放按钮点击事件相应</p>    <p>到这一步，我们的自定义LyricView设计介绍也就告一段落咯 ！ 当然，功能远不止这些，还有设置字体大小、设置行间距、以及结合速度追踪器实现滑行效果等等。所谓"授人以鱼不如授人以渔"，我想要和大家分享的是我的一个设计思路，大家可以根据需求设计不通的功能，因此在这里我也不做过多介绍，对小阿飞的LyricView感兴趣的朋友可以去我的 <a href="/misc/goto?guid=4959713747429765716" rel="nofollow,noindex">gitHub</a> 下载研究。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/243a7c307cb8606f028893739349b78f.gif"></p>    <p style="text-align:center">overScroll效果展示</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ce65cd7d53a22da64d7d8f5fb4b018e1.gif"></p>    <p style="text-align:center">字体颜色设置效果展示</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8147d08a74393de7e22e00b04b09ab42.gif"></p>    <p style="text-align:center">字体大小设置效果展示</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c357bbdc9f2cfea8476922cc47345691.gif"></p>    <p style="text-align:center">行间距设置效果展示</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/de35f1c92b2d55f907d16296aa3eb020.gif"></p>    <p style="text-align:center">指示器和播放按钮效果展示</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/576cbf43053e</p>    <p> </p>