Android自定义View实战简约风歌词控件

　　作者：jsyjst前言
　　最近重构了之前的音乐播放器，添加了许多功能，比如歌词，下载功能等。这篇文章就让我们聊聊歌词控件的实现，先上效果图，如果感觉海星，就继续瞧下去！
　　看到这里，估计你对这个控件还有点感兴趣的吧，那接下来就让我们来瞧瞧实现这个歌词控件需要做些什么！一、歌词解析
　　首先，我们得知道正常的歌词格式是怎样的，大概是长这个样子：1〔ti：喜欢你〕2〔ar：。〕3〔al：〕4〔by：〕5〔offset：0〕6〔00：00。10〕喜欢你G。E。M。邓紫棋（GemTang）7〔00：00。20〕词：黄家驹8〔00：00。30〕曲：黄家驹9〔00：00。40〕编曲：LupoGroinig10〔00：00。50〕11〔00：12。65〕细雨带风湿透黄昏的街道12〔00：18。61〕抹去雨水双眼无故地仰望13〔00：24。04〕望向孤单的晚灯14〔00：26。91〕15〔00：27。44〕是那伤感的记忆16〔00：30。52〕17〔00：34。12〕再次泛起心里无数的思念18〔00：39。28〕19〔00：40。10〕以往片刻欢笑仍挂在脸上20〔00：45。49〕愿你此刻可会知21〔00：48。23〕22〔00：48。95〕是我衷心的说声23〔00：53。06〕24〔00：54。35〕喜欢你那双眼动人25〔00：59。35〕26〔01：00。10〕笑声更迷人27〔01：02。37〕28〔01：03。15〕愿再可轻抚你29〔01：08。56〕30〔01：09。35〕那可爱面容31〔01：12。40〕挽手说梦话32〔01：14。78〕33〔01：15。48〕像昨天你共我34〔01：20。84〕35〔01：26。32〕满带理想的我曾经多冲动36〔01：32。45〕屡怨与她相爱难有自由37〔01：37。82〕愿你此刻可会知38〔01：40。40〕39〔01：41。25〕是我衷心的说声40〔01：44。81〕41〔01：46。39〕喜欢你那双眼动人42〔01：51。72〕43〔01：52。42〕笑声更迷人44〔01：54。75〕45〔01：55。48〕愿再可轻抚你46〔02：00。93〕47〔02：01。68〕那可爱面容48〔02：03。99〕49〔02：04。73〕挽手说梦话50〔02：07。13〕51〔02：07。82〕像昨天你共我52〔02：14。53〕53〔02：25。54〕每晚夜里自我独行54〔02：29。30〕随处荡多冰冷55〔02：35。40〕56〔02：37。83〕以往为了自我挣扎57〔02：41。62〕从不知她的痛苦58〔02：52。02〕59〔02：54。11〕喜欢你那双眼动人60〔03：00。13〕笑声更迷人61〔03：02。38〕62〔03：03。14〕愿再可轻抚你63〔03：08。77〕64〔03：09。33〕那可爱面容65〔03：11。71〕66〔03：12。41〕挽手说梦话67〔03：14。61〕68〔03：15。45〕像昨天你共我
　　从上面可以看出这种格式前面是开始时间，从左往右一一对应分，秒，毫秒，后面就是歌词。所以我们要创建一个实体类来保存每一句的歌词信息。1。歌词实体类LrcBean1publicclassLrcBean｛2privateStringlrc；歌词3privatelongstart；开始时间4privatelongend；结束时间56publicStringgetLrc（）｛7returnlrc；8｝910publicvoidsetLrc（Stringlrc）｛11this。lrclrc；12｝1314publiclonggetStart（）｛15returnstart；16｝1718publicvoidsetStart（longstart）｛19this。startstart；20｝2122publiclonggetEnd（）｛23returnend；24｝2526publicvoidsetEnd（longend）｛27this。endend；28｝29｝
　　每句歌词，我们需要开始时间，结束时间和歌词这些信息，那么你就会有疑问了？上面提到的歌词格式好像只有歌词开始时间，那我们怎么知道结束时间呢？其实很简单，这一句歌词的开始时间就是上一句歌词的结束时间。有了歌词实体类，我们就得开始对歌词进行解析了！2。解析歌词工具类LrcUtil1publicclassLrcUtil｛234解析歌词，将字符串歌词封装成LrcBean的集合5paramlrcStr字符串的歌词，歌词有固定的格式，一般为6〔ti：喜欢你〕7〔ar：。〕8〔al：〕9〔by：〕10〔offset：0〕11〔00：00。10〕喜欢你G。E。M。邓紫棋（GemTang）12〔00：00。20〕词：黄家驹13〔00：00。30〕曲：黄家驹14〔00：00。40〕编曲：LupoGroinig15return歌词集合1617publicstaticListLrcBeanparseStr2List（StringlrcStr）｛18ListLrcBeanresnewArrayList（）；19根据转行字符对字符串进行分割20String〔〕subLrclrcStr。split（）；21跳过前四行，从第五行开始，因为前四行的歌词我们并不需要22for（inti5；isubLrc。length；i）｛23StringlineLrcsubLrc〔i〕；24〔00：00。10〕喜欢你G。E。M。邓紫棋（GemTang）25StringminlineLrc。substring（lineLrc。indexOf（〔）1，lineLrc。indexOf（〔）3）；26StringseclineLrc。substring（lineLrc。indexOf（：）1，lineLrc。indexOf（：）3）；27StringmillslineLrc。substring（lineLrc。indexOf（。）1，lineLrc。indexOf（。）3）；28进制转化，转化成毫秒形式的时间29longstartTimegetTime（min，sec，mills）；30歌词31StringlrcTextlineLrc。substring（lineLrc。indexOf（〕）1）；32有可能是某个时间段是没有歌词，则跳过下面33if（lrcText。equals（））continue；34在第一句歌词中有可能是很长的，我们只截取一部分，即歌曲加演唱者35比如光年之外（《太空旅客（Passengers）》电影中国区主题曲）G。E。M。邓紫棋（GemTang）36if（i5）｛37intlineIndexlrcText。indexOf（）；38intfirstlrcText。indexOf（（）；39if（firstlineIndexfirst！1）｛40lrcTextlrcText。substring（0，first）lrcText。substring（lineIndex）；41｝42LrcBeanlrcBeannewLrcBean（）；43lrcBean。setStart（startTime）；44lrcBean。setLrc（lrcText）；45res。add（lrcBean）；46continue；47｝48添加到歌词集合中49LrcBeanlrcBeannewLrcBean（）；50lrcBean。setStart（startTime）；51lrcBean。setLrc（lrcText）；52res。add（lrcBean）；53如果是最后一句歌词，其结束时间是不知道的，我们将人为的设置为开始时间加上100s54if（isubLrc。length1）｛55res。get（res。size（）1）。setEnd（startTime100000）；56｝elseif（res。size（）1）｛57当集合数目大于1时，这句的歌词的开始时间就是上一句歌词的结束时间58res。get（res。size（）2）。setEnd（startTime）；59｝6061｝62returnres；63｝646566根据时分秒获得总时间67parammin分钟68paramsec秒69parammills毫秒70return总时间7172privatestaticlonggetTime（Stringmin，Stringsec，Stringmills）｛73returnLong。valueOf（min）601000Long。valueOf（sec）1000Long。valueOf（mills）；74｝75｝
　　相信上面的代码和注释已经将这个歌词解析解释的挺明白了，需要注意的是上面对i5，也就是歌词真正开始的第一句做了特殊处理，因为i5这句有可能是很长的，假设i5是光年之外
　　（《太空旅客（Passengers）》电影中国区主题曲）G。E。M。邓紫棋（Gem
　　Tang）这句歌词，如果我们不做特殊处理，在后面绘制的时候，就会发现这句歌词会超过屏幕大小，很影响美观，所以我们只截取歌曲名和演唱者，有些说明直接省略掉了。解析好了歌词，接下来就是重头戏歌词绘制！二、歌词绘制
　　歌词绘制就涉及到了自定义View的知识，所以还未接触自定义View的小伙伴需要先去看看自定View的基础知识。歌词绘制的主要工作主要由下面几部分构成：为歌词控件设置自定义属性，在构造方法中获取并设置自定义属性的默认值初始化两支画笔。分别是歌词普通画笔，歌词高亮画笔。获取当前播放歌词的位置画歌词，根据当前播放歌词的位置来决定用哪支画笔画歌词随歌曲播放同步滑动重新绘制1。设置自定View属性，在代码中设置默认值
　　在res文件中的values中新建一个attrs。xml文件，然后定义歌词的自定义View属性1lt；？xmlversion1。0encodingutf8？2resources3declarestyleablenameLrcView45678declarestyleable9resources
　　这里只自定义了歌词颜色，歌词高亮颜色，歌词大小，歌词行间距的属性，可根据自己需要自行添加。
　　然后在Java代码中，设置默认值。1privateintlrcTextColor；歌词颜色2privateinthighLineTextColor；当前歌词颜色3privateintwidth，height；屏幕宽高4privateintlineSpacing；行间距5privateinttextSize；字体大小67publicLrcView（Contextcontext，NullableAttributeSetattrs，intdefStyleAttr）｛8super（context，attrs，defStyleAttr）；9TypedArraytacontext。obtainStyledAttributes（attrs，R。styleable。LrcView）；10lrcTextColorta。getColor（R。styleable。LrcViewlrcTextColor，Color。GRAY）；11highLineTextColorta。getColor（R。styleable。LrcViewhighLineTextColor，Color。BLUE）；12floatfontScalecontext。getResources（）。getDisplayMetrics（）。scaledDensity；13floatscalecontext。getResources（）。getDisplayMetrics（）。density；14默认字体大小为16sp15textSizeta。getDimensionPixelSize（R。styleable。LrcViewtextSize，（int）（16fontScale））；16默认行间距为30dp17lineSpacingta。getDimensionPixelSize（R。styleable。LrcViewlineSpacing，（int）（30scale））；18回收19ta。recycle（）；20｝2。初始化两支画笔1privatevoidinit（）｛2初始化歌词画笔3dPaintnewPaint（）；4dPaint。setStyle（Paint。Style。FILL）；填满5dPaint。setAntiAlias（true）；抗锯齿6dPaint。setColor（lrcTextColor）；画笔颜色7dPaint。setTextSize（textSize）；歌词大小8dPaint。setTextAlign（Paint。Align。CENTER）；文字居中910初始化当前歌词画笔11hPaintnewPaint（）；12hPaint。setStyle（Paint。Style。FILL）；13hPaint。setAntiAlias（true）；14hPaint。setColor（highLineTextColor）；15hPaint。setTextSize（textSize）；16hPaint。setTextAlign（Paint。Align。CENTER）；17｝
　　我们把初始化的方法放到了构造方法中，这样就可以避免在重绘时再次初始化。另外由于我们把init方法只放到了第三个构造方法中，所以在上面两个构造方法需要将super改成this，这样就能保证哪个构造方法都能执行init方法1publicLrcView（Contextcontext）｛2this（context，null）；3｝45publicLrcView（Contextcontext，NullableAttributeSetattrs）｛6this（context，attrs，0）；7｝89publicLrcView（Contextcontext，NullableAttributeSetattrs，intdefStyleAttr）｛10super（context，attrs，defStyleAttr）；11TypedArraytacontext。obtainStyledAttributes（attrs，R。styleable。LrcView）；12。。。。。。13回收14ta。recycle（）；15init（）；16｝3。重复执行onDraw方法
　　因为后面的步骤都是在onDraw方法中执行的，所以我们先贴出onDraw方法中的代码1Override2protectedvoidonDraw（Canvascanvas）｛3super。onDraw（canvas）；45getMeasuredWidthAndHeight（）；得到测量后的宽高6getCurrentPosition（）；得到当前歌词的位置7drawLrc（canvas）；画歌词8scrollLrc（）；歌词滑动9postInvalidateDelayed（100）；延迟0。1s刷新10｝
　　1。获得控件的测量后的宽高1privateintwidth，height；屏幕宽高2privatevoidgetMeasuredWidthAndHeight（）｛3if（width0height0）｛4widthgetMeasuredWidth（）；5heightgetMeasuredHeight（）；6｝7｝
　　为什么要获得控件的宽高呢？因为在下面我们需要画歌词，画歌词时需要画的位置，这时候就需要用到控件的宽高了。
　　2。得到当前歌词的位置1privateListLrcBeanlrcBeanList；歌词集合2privateintcurrentPosition；当前歌词的位置3privateMediaPlayerplayer；当前的播放器456privatevoidgetCurrentPosition（）｛7intcurTimeplayer。getCurrentPosition（）；8如果当前的时间大于10分钟，证明歌曲未播放，则当前位置应该为09if（curTimelrcBeanList。get（0）。getStart（）curTime10601000）｛10currentPosition0；11return；12｝elseif（curTimelrcBeanList。get（lrcBeanList。size（）1）。getStart（））｛13currentPositionlrcBeanList。size（）1；14return；15｝16for（inti0；ilrcBeanList。size（）；i）｛17if（curTimelrcBeanList。get（i）。getStart（）curTimelrcBeanList。get（i）。getEnd（））｛18currentPositioni；19｝20｝21｝
　　我们根据当前播放的歌曲时间来遍历歌词集合，从而判断当前播放的歌词的位置。细心的你可能会发现在currentPosition0中有个curTime10601000的判断，这是因为在实际使用中发现当player还未播放时，这时候得到的curTime会很大，所以才有了这个判断（因为正常的歌曲不会超过10分钟）。
　　在这个方法我们会发现出现了歌词集合和播放器，你可能会感到困惑，这些不是还没赋值吗？困惑就对了，所以我们需要提供外部方法来给外部传给歌词控件歌词集合和播放器。1将歌词集合传给到这个自定义View中2publicLrcViewsetLrc（Stringlrc）｛3lrcBeanListLrcUtil。parseStr2List（lrc）；4returnthis；5｝67传递mediaPlayer给自定义View中8publicLrcViewsetPlayer（MediaPlayerplayer）｛9this。playerplayer；10returnthis；11｝
　　外部方法中setLrc的参数必须是前面提到的标准歌词格式的字符串形式，这样我们就能利用上文的解析工具类LrcUtil中的解析方法将字符串解析成歌词集合。
　　3。画歌词1privatevoiddrawLrc（Canvascanvas）｛2for（inti0；ilrcBeanList。size（）；i）｛3if（currentPositioni）｛如果是当前的歌词就用高亮的画笔画4canvas。drawText（lrcBeanList。get（i）。getLrc（），width2，height2ilineSpacing，hPaint）；5｝else｛6canvas。drawText（lrcBeanList。get（i）。getLrc（），width2，height2ilineSpacing，dPaint）；7｝8｝9｝
　　知道了当前歌词的位置就很容易画歌词了。遍历歌词集合，如果是当前歌词，则用高亮的画笔画，其它歌词就用普通画笔画。这里需注意的是两支画笔画的位置公式都是一样的，坐标位置为x宽的一半，y高的一半当前位置行间距。随着当前位置的变化，就能画出上下句歌词来。所以其实绘制出来后你会发现歌词是从控件的正中央开始绘制的，这是为了方便与下面歌词同步滑动功能配合。
　　4。歌词同步滑动1歌词滑动2privatevoidscrollLrc（）｛3下一句歌词的开始时间4longstartTimelrcBeanList。get（currentPosition）。getStart（）；5longcurrentTimeplayer。getCurrentPosition（）；67判断是否换行，在0。5内完成滑动，即实现弹性滑动8floaty（currentTimestartTime）500？currentPositionlineSpacing：lastPositionlineSpacing（currentPositionlastPosition）lineSpacing（（currentTimestartTime）500f）；9scrollTo（0，（int）y）；10if（getScrollY（）currentPositionlineSpacing）｛11lastPositioncurrentPosition；12｝13｝
　　如果不实现弹性滑动的话，只要判断当前播放歌曲的时间是否大于当前位置歌词的结束时间，然后进行scrollTo（0，（int）currentPositionlineSpacing）滑动即可。但是为了实现弹性滑动，我们需要将一次滑动分成若干次小的滑动并在一个时间段内完成，所以我们动态设置y的值，由于不断重绘，就能实现在0。5秒内完成View的滑动，这样就能实现歌词同步弹性滑动。
　　500其实就是0。5s，因为在这里currentTime和startTime的单位都是ms1floaty（currentTimestartTime）500？currentPositionlineSpacing：lastPositionlineSpacing（currentPositionlastPosition）lineSpacing（（currentTimestartTime）500f）；
　　5。不断重绘
　　通过不断重绘才能实现歌词同步滑动，这里每隔0。1s进行重绘1postInvalidateDelayed（100）；延迟0。1s刷新
　　你以为这样就结束了吗？其实还没有，答案下文揭晓！三、使用
　　然后我们兴高采烈的在xml中，引用这个自定义View
　　LrcView前面的名称为你建这个类的完整包名1com。example。library。view。LrcView2android：ididlrcView3android：layoutwidthmatchparent4android：layoutheightmatchparent5app：lineSpacing40dp6app：textSize18sp7app：lrcTextColorcolorcolorPrimary8app：highLineTextColorcolorhighTextColor9
　　在Java代码中给这个自定义View传入标准歌词字符串和播放器。1lrcView。setLrc（lrc）。setPlayer（player）；
　　点击运行，满心期待自己的成果，接着你就会一脸懵逼，what？怎么是一片空白，什么也没有！其实这时候你重新理一下上面歌词绘制的流程，就会发现问题所在。
　　首先我们的自定义View控件引用到布局中时是先执行onDraw方法的，所以当你调用setLrc和setPlayer方法后，是不会再重新调用onDraw方法的，等于你并没有传入歌词字符串和播放器，所以当然会显示一片空白
　　解决方法：我们在刚才自定义View歌词控件中添加一个外部方法来调用onDraw，刚好这个invalidate（）就能够重新调用onDraw方法1publicLrcViewdraw（）｛2currentPosition0；3lastPosition0；4invalidate（）；5returnthis；6｝
　　然后我们在主代码中，在调用setLrc和setPlayer后还得调用draw方法1lrcView。setLrc（lrc）。setPlayer（player）。draw（）；
　　这样我们节约风的歌词控件就大功告成了。最后
　　在这里我分享一份由大佬亲自收录整理的Android学习PDF架构视频面试文档源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料
　　这些都是我现在闲暇时还会反复翻阅的精品资料。里面对近几年的大厂面试高频知识点都有详细的讲解。相信可以有效地帮助大家掌握知识、理解原理，帮助大家在未来取得一份不错的答卷。
　　当然，你也可以拿去查漏补缺，提升自身的竞争力。
　　真心希望可以帮助到大家，Android路漫漫，共勉！
　　如果你有需要的话，只需私信我【进阶】即可获取