android自定义listview教程（简约风歌词控件）

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

1<?xmlversion="1.0"encoding="utf-8"?> 2<resources> 3<declare-styleablename="LrcView"> 4<attrname="highLineTextColor"format="color|reference|integer"/> 5<attrname="lrcTextColor"format="color|reference|integer"/> 6<attrname="lineSpacing"format="dimension"/> 7<attrname="textSize"format="dimension"/> 8</declare-styleable> 9</resources>

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

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

1privateintlrcTextColor;//歌词颜色 2privateinthighLineTextColor;//当前歌词颜色 3privateintwidth,height;//屏幕宽高 4privateintlineSpacing;//行间距 5privateinttextSize;//字体大小 6 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}

1privatevoidinit(){ 2//初始化歌词画笔 3dPaint=newPaint(); 4dPaint.setStyle(Paint.Style.FILL);//填满 5dPaint.setAntiAlias(true);//抗锯齿 6dPaint.setColor(lrcTextColor);//画笔颜色 7dPaint.setTextSize(textSize);//歌词大小 8dPaint.setTextAlign(Paint.Align.CENTER);//文字居中 9 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); 3} 4 5publicLrcView(Contextcontext,@NullableAttributeSetattrs){ 6this(context,attrs,0); 7} 8 9publicLrcView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){ 10super(context,attrs,defStyleAttr); 11TypedArrayta=context.obtainStyledAttributes(attrs,R.styleable.LrcView); 12...... 13//回收 14ta.recycle(); 15init(); 16}

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

1@Override 2protectedvoidonDraw(Canvascanvas){ 3super.onDraw(canvas); 4 5getMeasuredWidthAndHeight();//得到测量后的宽高 6getCurrentPosition();//得到当前歌词的位置 7drawLrc(canvas);//画歌词 8scrollLrc();//歌词滑动 9postInvalidateDelayed(100);//延迟0.1s刷新 10}

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

1privateintwidth,height;//屏幕宽高 2privatevoidgetMeasuredWidthAndHeight(){ 3if(width==0||height==0){ 4width=getMeasuredWidth(); 5height=getMeasuredHeight(); 6} 7}

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

2. 得到当前歌词的位置

1privateList<LrcBean>lrcBeanList;//歌词集合 2privateintcurrentPosition;//当前歌词的位置 3privateMediaPlayerplayer;//当前的播放器 4 5 6privatevoidgetCurrentPosition(){ 7intcurTime=player.getCurrentPosition(); 8//如果当前的时间大于10分钟，证明歌曲未播放，则当前位置应该为0 9if(curTime<lrcBeanList.get(0).getStart()||curTime>10*60*1000){ 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; 5} 6 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); 7} 8} 9}

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

4. 歌词同步滑动

1//歌词滑动 2privatevoidscrollLrc(){ 3//下一句歌词的开始时间 4longstartTime=lrcBeanList.get(currentPosition).getStart(); 5longcurrentTime=player.getCurrentPosition(); 6 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的滑动，这样就能实现歌词同步弹性滑动。

500其实就是0.5s,因为在这里currentTime和startTime的单位都是ms

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

5.不断重绘

通过不断重绘才能实现歌词同步滑动，这里每隔0.1s进行重绘

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

你以为这样就结束了吗？其实还没有，答案下文揭晓！

然后我们兴高采烈的在xml中，引用这个自定义View

LrcView前面的名称为你建这个类的完整包名

1<com.examplebrary.view.LrcView 2android:id="@ id/lrcView" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5app:lineSpacing="40dp" 6app:textSize="18sp" 7app:lrcTextColor="@color/colorPrimary" 8app:highLineTextColor="@color/highTextColor" 9/>

在Java代码中给这个自定义View传入标准歌词字符串和播放器。

1lrcView.setLrc(lrc).setPlayer(player);

点击运行，满心期待自己的成果，接着你就会一脸懵逼，what?怎么是一片空白，什么也没有！其实这时候你重新理一下上面歌词绘制的流程，就会发现问题所在。首先我们的自定义View控件引用到布局中时是先执行onDraw方法的，所以当你调用setLrc和setPlayer方法后，是不会再重新调用onDraw方法的，等于你并没有传入歌词字符串和播放器，所以当然会显示一片空白

解决方法 :我们在刚才自定义View歌词控件中添加一个外部方法来调用onDraw,刚好这个invalidate()就能够重新调用onDraw方法

1publicLrcViewdraw(){ 2currentPosition=0; 3lastPosition=0; 4invalidate(); 5returnthis; 6}

然后我们在主代码中，在调用setLrc和setPlayer后还得调用draw方法

1lrcView.setLrc(lrc).setPlayer(player).draw();

这样我们节约风的歌词控件就大功告成了。

在这里我分享一份由大佬亲自收录整理的Android学习PDF 架构视频 面试文档 源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料

这些都是我现在闲暇时还会反复翻阅的精品资料。里面对近几年的大厂面试高频知识点都有详细的讲解。相信可以有效地帮助大家掌握知识、理解原理，帮助大家在未来取得一份不错的答卷。

当然，你也可以拿去查漏补缺，提升自身的竞争力。

真心希望可以帮助到大家，Android路漫漫，共勉！

如果你有需要的话，只需私信我【进阶】即可获取