失眠网 > Android自定义View实战：简约风歌词控件 Android开发者值得深入思考的几个问题

Android自定义View实战：简约风歌词控件 Android开发者值得深入思考的几个问题

时间：2021-03-23 02:18:49

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.歌词实体类LrcBean

==========================================================================

1publicclassLrcBean{

2privateStringlrc;//歌词

3privatelongstart;//开始时间

4privatelongend;//结束时间

6publicStringgetLrc(){

7returnlrc;

10publicvoidsetLrc(Stringlrc){

11this.lrc=lrc;

12}

14publiclonggetStart(){

15returnstart;

16}

18publicvoidsetStart(longstart){

19this.start=start;

20}

22publiclonggetEnd(){

23returnend;

24}

26publicvoidsetEnd(longend){

27this.end=end;

28}

29}

每句歌词，我们需要开始时间，结束时间和歌词这些信息，那么你就会有疑问了？上面提到的歌词格式好像只有歌词开始时间，那我们怎么知道结束时间呢？其实很简单，这一句歌词的开始时间就是上一句歌词的结束时间。有了歌词实体类，我们就得开始对歌词进行解析了！

2. 解析歌词工具类LrcUtil

==============================================================================

1publicclassLrcUtil{

3/**

4*解析歌词，将字符串歌词封装成LrcBean的集合

5*@paramlrcStr字符串的歌词，歌词有固定的格式，一般为

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]编曲：Lupo Groinig

15*@return歌词集合

16*/

17publicstaticListparseStr2List(StringlrcStr){

18Listres=newArrayList<>();

19//根据转行字符对字符串进行分割

20String[]subLrc=lrcStr.split("\n");

21//跳过前四行，从第五行开始，因为前四行的歌词我们并不需要

22for(inti=5;i<subLrc.length;i++){

23StringlineLrc=subLrc[i];

24//[00:00.10]喜欢你-G.E.M.邓紫棋(GemTang)

25Stringmin=lineLrc.substring(lineLrc.indexOf("[")+1,lineLrc.indexOf("[")+3);

26Stringsec=lineLrc.substring(lineLrc.indexOf(":")+1,lineLrc.indexOf(":")+3);

27Stringmills=lineLrc.substring(lineLrc.indexOf(".")+1,lineLrc.indexOf(".")+3);

28//进制转化，转化成毫秒形式的时间

29longstartTime=getTime(min,sec,mills);

30//歌词

31StringlrcText=lineLrc.substring(lineLrc.indexOf("]")+1);

32//有可能是某个时间段是没有歌词，则跳过下面

33if(lrcText.equals(""))continue;

34//在第一句歌词中有可能是很长的，我们只截取一部分，即歌曲加演唱者

35//比如光年之外(《太空旅客（Passengers）》电影中国区主题曲)-G.E.M.邓紫棋(GemTang)

36if(i==5){

37intlineIndex=lrcText.indexOf("-");

38intfirst=lrcText.indexOf("(");

39if(first<lineIndex&&first!=-1){

40lrcText=lrcText.substring(0,first)+lrcText.substring(lineIndex);

41}

42LrcBeanlrcBean=newLrcBean();

43lrcBean.setStart(startTime);

44lrcBean.setLrc(lrcText);

45res.add(lrcBean);

46continue;

47}

48//添加到歌词集合中

49LrcBeanlrcBean=newLrcBean();

50lrcBean.setStart(startTime);

51lrcBean.setLrc(lrcText);

52res.add(lrcBean);

53//如果是最后一句歌词，其结束时间是不知道的，我们将人为的设置为开始时间加上100s

54if(i==subLrc.length-1){

55res.get(res.size()-1).setEnd(startTime+100000);

56}elseif(res.size()>1){

57//当集合数目大于1时，这句的歌词的开始时间就是上一句歌词的结束时间

58res.get(res.size()-2).setEnd(startTime);

59}

61}

62returnres;

63}

65/**

66*根据时分秒获得总时间

67*@parammin分钟

68*@paramsec秒

69*@parammills毫秒

70*@return总时间

71*/

72privatestaticlonggetTime(Stringmin,Stringsec,Stringmills){

73returnLong.valueOf(min)601000+Long.valueOf(sec)*1000+Long.valueOf(mills);

74}

75}

相信上面的代码和注释已经将这个歌词解析解释的挺明白了，需要注意的是上面对i=5,也就是歌词真正开始的第一句做了特殊处理，因为i=5这句有可能是很长的，假设i=5是“光年之外

(《太空旅客（Passengers）》电影中国区主题曲) - G.E.M. 邓紫棋 (Gem

Tang)”这句歌词，如果我们不做特殊处理，在后面绘制的时候，就会发现这句歌词会超过屏幕大小，很影响美观，所以我们只截取歌曲名和演唱者，有些说明直接省略掉了。解析好了歌词，接下来就是重头戏-歌词绘制！

二、歌词绘制

==================================================================

歌词绘制就涉及到了自定义View的知识，所以还未接触自定义View的小伙伴需要先去看看自定View的基础知识。歌词绘制的主要工作主要由下面几部分构成：

为歌词控件设置自定义属性，在构造方法中获取并设置自定义属性的默认值

初始化两支画笔。分别是歌词普通画笔，歌词高亮画笔。

获取当前播放歌词的位置

画歌词，根据当前播放歌词的位置来决定用哪支画笔画

歌词随歌曲播放同步滑动

重新绘制

1.设置自定View属性，在代码中设置默认值

==================================================================================

在res文件中的values中新建一个attrs.xml文件，然后定义歌词的自定义View属性

1<?xmlversion="1.0"encoding="utf-8"?>

这里只自定义了歌词颜色，歌词高亮颜色，歌词大小，歌词行间距的属性，可根据自己需要自行添加。

然后在Java代码中，设置默认值。

1privateintlrcTextColor;//歌词颜色

2privateinthighLineTextColor;//当前歌词颜色

3privateintwidth,height;//屏幕宽高

4privateintlineSpacing;//行间距

5privateinttextSize;//字体大小

7publicLrcView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){

8super(context,attrs,defStyleAttr);

9TypedArrayta=context.obtainStyledAttributes(attrs,R.styleable.LrcView);

10lrcTextColor=ta.getColor(R.styleable.LrcView_lrcTextColor,Color.GRAY);

11highLineTextColor=ta.getColor(R.styleable.LrcView_highLineTextColor,Color.BLUE);

12floatfontScale=context.getResources().getDisplayMetrics().scaledDensity;

13floatscale=context.getResources().getDisplayMetrics().density;

14//默认字体大小为16sp

15textSize=ta.getDimensionPixelSize(R.styleable.LrcView_textSize,(int)(16*fontScale));

16//默认行间距为30dp

17lineSpacing=ta.getDimensionPixelSize(R.styleable.LrcView_lineSpacing,(int)(30*scale));

18//回收

19ta.recycle();

20}

2. 初始化两支画笔

=======================================================================

1privatevoidinit(){

2//初始化歌词画笔

3dPaint=newPaint();

4dPaint.setStyle(Paint.Style.FILL);//填满

5dPaint.setAntiAlias(true);//抗锯齿

6dPaint.setColor(lrcTextColor);//画笔颜色

7dPaint.setTextSize(textSize);//歌词大小

8dPaint.setTextAlign(Paint.Align.CENTER);//文字居中

10//初始化当前歌词画笔

11hPaint=newPaint();

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);

5publicLrcView(Contextcontext,@NullableAttributeSetattrs){

6this(context,attrs,0);

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【/doc/DSkNLaERkbnFoS0ZF】完整内容开源分享

}

9publicLrcView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){

10super(context,attrs,defStyleAttr);

11TypedArrayta=context.obtainStyledAttributes(attrs,R.styleable.LrcView);

12…

13//回收

14ta.recycle();

15init();

16}

3. 重复执行onDraw方法

============================================================================

因为后面的步骤都是在onDraw方法中执行的，所以我们先贴出onDraw方法中的代码

1@Override

2protectedvoidonDraw(Canvascanvas){

3super.onDraw(canvas);

5getMeasuredWidthAndHeight();//得到测量后的宽高

6getCurrentPosition();//得到当前歌词的位置

7drawLrc(canvas);//画歌词

8scrollLrc();//歌词滑动

9postInvalidateDelayed(100);//延迟0.1s刷新

10}

1.获得控件的测量后的宽高

1privateintwidth,height;//屏幕宽高

2privatevoidgetMeasuredWidthAndHeight(){

3if(width==0||height==0){

4width=getMeasuredWidth();

5height=getMeasuredHeight();

为什么要获得控件的宽高呢？因为在下面我们需要画歌词，画歌词时需要画的位置，这时候就需要用到控件的宽高了。

2. 得到当前歌词的位置

1privateListlrcBeanList;//歌词集合

2privateintcurrentPosition;//当前歌词的位置

3privateMediaPlayerplayer;//当前的播放器

6privatevoidgetCurrentPosition(){

7intcurTime=player.getCurrentPosition();

8//如果当前的时间大于10分钟，证明歌曲未播放，则当前位置应该为0

9if(curTime<lrcBeanList.get(0).getStart()||curTime>10601000){

10currentPosition=0;

11return;

12}elseif(curTime>lrcBeanList.get(lrcBeanList.size()-1).getStart()){

13currentPosition=lrcBeanList.size()-1;

14return;

15}

16for(inti=0;i<lrcBeanList.size();i++){

17if(curTime>=lrcBeanList.get(i).getStart()&&curTime<=lrcBeanList.get(i).getEnd()){

18currentPosition=i;

19}

20}

21}

我们根据当前播放的歌曲时间来遍历歌词集合，从而判断当前播放的歌词的位置。细心的你可能会发现在currentPosition = 0中有个curTime>10_60_1000的判断，这是因为在实际使用中发现当player还未播放时，这时候得到的curTime会很大，所以才有了这个判断（因为正常的歌曲不会超过10分钟）。

在这个方法我们会发现出现了歌词集合和播放器，你可能会感到困惑，这些不是还没赋值吗？困惑就对了，所以我们需要提供外部方法来给外部传给歌词控件歌词集合和播放器。

1//将歌词集合传给到这个自定义View中

2publicLrcViewsetLrc(Stringlrc){

3lrcBeanList=LrcUtil.parseStr2List(lrc);

4returnthis;

7//传递mediaPlayer给自定义View中

8publicLrcViewsetPlayer(MediaPlayerplayer){

9this.player=player;

10returnthis;

11}

外部方法中setLrc的参数必须是前面提到的标准歌词格式的字符串形式，这样我们就能利用上文的解析工具类LrcUtil中的解析方法将字符串解析成歌词集合。

3. 画歌词

1privatevoiddrawLrc(Canvascanvas){

2for(inti=0;i<lrcBeanList.size();i++){

3if(currentPosition==i){//如果是当前的歌词就用高亮的画笔画

4canvas.drawText(lrcBeanList.get(i).getLrc(),width/2,height/2+i*lineSpacing,hPaint);

5}else{

6canvas.drawText(lrcBeanList.get(i).getLrc(),width/2,height/2+i*lineSpacing,dPaint);

知道了当前歌词的位置就很容易画歌词了。遍历歌词集合，如果是当前歌词，则用高亮的画笔画，其它歌词就用普通画笔画。这里需注意的是两支画笔画的位置公式都是一样的，坐标位置为x=宽的一半,y=高的一半+当前位置*行间距。随着当前位置的变化，就能画出上下句歌词来。所以其实绘制出来后你会发现歌词是从控件的正中央开始绘制的，这是为了方便与下面歌词同步滑动功能配合。

4. 歌词同步滑动

1//歌词滑动

2privatevoidscrollLrc(){

3//下一句歌词的开始时间

4longstartTime=lrcBeanList.get(currentPosition).getStart();

5longcurrentTime=player.getCurrentPosition();

7//判断是否换行,在0.5内完成滑动，即实现弹性滑动

8floaty=(currentTime-startTime)>500?currentPosition*lineSpacing:lastPosition*lineSpacing+(currentPosition-lastPosition)*lineSpacing*((currentTime-startTime)/500f);

9scrollTo(0,(int)y);

10if(getScrollY()==currentPosition*lineSpacing){

11lastPosition=currentPosition;

12}

13}

如果不实现弹性滑动的话，只要判断当前播放歌曲的时间是否大于当前位置歌词的结束时间，然后进行scrollTo(0,(int)currentPosition * lineSpacing)滑动即可。但是为了实现弹性滑动，我们需要将一次滑动分成若干次小的滑动并在一个时间段内完成，所以我们动态设置y的值，由于不断重绘，就能实现在0.5秒内完成View的滑动，这样就能实现歌词同步弹性滑动。

如果觉得《Android自定义View实战：简约风歌词控件 Android开发者值得深入思考的几个问题》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。