歌词滚动效果实现详解1. 引入音乐播放器的歌词是怎么滚动的用过音乐播放器的都知道歌词会随着歌曲进度自动滚动当前唱的那一句高亮显示而且始终保持在屏幕中间。┌─────────────────────┐ │ 后来 我总算学会了 │ │ 如何去爱 │ │ ► 可惜你早已远去 ◄ │ ← 当前歌词高亮居中 │ 消失在人海 │ │ 后来 终于在眼泪中 │ └─────────────────────┘这个效果是怎么做的核心用到两个东西技术作用RecyclerView显示歌词列表LinearSmoothScroller让指定歌词平滑滚动到中间2. 整体思路1. 用RecyclerView显示所有歌词 2. 监听歌曲播放进度 3. 根据进度找到当前应该唱的那句歌词 4. 用LinearSmoothScroller把这句歌词滚到屏幕中间 5. 高亮显示当前歌词其他歌词正常显示3. 歌词数据解析3.1 歌词文件格式[00:00.00] 后来 [00:05.32] 我总算学会了 [00:10.15] 如何去爱 [00:15.42] 可惜你早已远去 [00:20.18] 消失在人海3.2 解析歌词publicclassLyric{privatelongtime;// 歌词开始时间毫秒privateStringcontent;// 歌词内容publicLyric(longtime,Stringcontent){this.timetime;this.contentcontent;}publiclonggetTime(){returntime;}publicStringgetContent(){returncontent;}}// 解析歌词publicListLyricparseLyric(StringlyricText){ListLyriclyricsnewArrayList();String[]lineslyricText.split(\n);for(Stringline:lines){// 匹配 [00:05.32]歌词内容PatternpatternPattern.compile(\\[(\\d{2}):(\\d{2})\\.(\\d{2})\\](.*));Matchermatcherpattern.matcher(line);if(matcher.find()){intminuteInteger.parseInt(matcher.group(1));intsecondInteger.parseInt(matcher.group(2));intmillisInteger.parseInt(matcher.group(3));Stringcontentmatcher.group(4).trim();longtimeminute*60*1000second*1000millis*10;lyrics.add(newLyric(time,content));}}returnlyrics;}4. RecyclerView显示歌词4.1 布局文件androidx.recyclerview.widget.RecyclerViewandroid:idid/rv_lyricandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:overScrollModeneverandroid:scrollbarsnone/4.2 歌词Item布局TextViewandroid:idid/tv_lyricandroid:layout_widthmatch_parentandroid:layout_height60dpandroid:gravitycenterandroid:textSize16spandroid:textColor#999999android:maxLines1android:ellipsizeend/4.3 AdapterpublicclassLyricAdapterextendsRecyclerView.AdapterLyricAdapter.LyricHolder{privateListLyriclyricList;privateintcurrentPosition-1;// 当前歌词位置publicLyricAdapter(ListLyriclyricList){this.lyricListlyricList;}// 更新当前歌词位置publicvoidsetCurrentPosition(intposition){intoldPositioncurrentPosition;currentPositionposition;// 刷新旧的和新的只刷新两个Item性能好if(oldPosition0){notifyItemChanged(oldPosition);}if(currentPosition0){notifyItemChanged(currentPosition);}}OverridepublicLyricHolderonCreateViewHolder(ViewGroupparent,intviewType){ViewviewLayoutInflater.from(parent.getContext()).inflate(R.layout.item_lyric,parent,false);returnnewLyricHolder(view);}OverridepublicvoidonBindViewHolder(LyricHolderholder,intposition){LyriclyriclyricList.get(position);holder.tvLyric.setText(lyric.getContent());// 当前歌词高亮if(positioncurrentPosition){holder.tvLyric.setTextColor(Color.WHITE);holder.tvLyric.setTextSize(18);}else{holder.tvLyric.setTextColor(Color.parseColor(#999999));holder.tvLyric.setTextSize(16);}}OverridepublicintgetItemCount(){returnlyricList.size();}staticclassLyricHolderextendsRecyclerView.ViewHolder{TextViewtvLyric;publicLyricHolder(ViewitemView){super(itemView);tvLyricitemView.findViewById(R.id.tv_lyric);}}}5. 核心让歌词滚到中间5.1 问题smoothScrollToPosition的局限// 这样滚动目标Item只会滚到屏幕边缘或可见位置recyclerView.smoothScrollToPosition(position);问题smoothScrollToPosition()只是让目标Item可见不保证在屏幕正中间。5.2 解决方案自定义LinearSmoothScroller重写LinearSmoothScroller让它把目标Item居中显示publicclassCenterSmoothScrollerextendsLinearSmoothScroller{publicCenterSmoothScroller(Contextcontext){super(context);}// 关键计算目标位置偏移量OverridepublicintcalculateDtToFit(intviewStart,intviewEnd,intboxStart,intboxEnd,intsnapPreference){// 返回当前View中心到父容器中心的距离return(boxStartboxEnd)/2-(viewStartviewEnd)/2;}}calculateDtToFit解释参数说明viewStart目标View的起始坐标viewEnd目标View的结束坐标boxStartRecyclerView的起始坐标boxEndRecyclerView的结束坐标snapPreference对齐偏好核心公式偏移量 (RecyclerView中心) - (目标View中心)这样滚动时目标Item就会居中对齐。5.3 使用自定义SmoothScroller// 创建LayoutManagerLinearLayoutManagerlayoutManagernewLinearLayoutManager(this){OverridepublicvoidsmoothScrollToPosition(RecyclerViewrecyclerView,RecyclerView.Statestate,intposition){// 使用自定义的SmoothScrollerCenterSmoothScrollerscrollernewCenterSmoothScroller(recyclerView.getContext());scroller.setTargetPosition(position);startSmoothScroll(scroller);}};recyclerView.setLayoutManager(layoutManager);5.4 滚动到指定位置// 滚动到当前歌词位置会居中显示recyclerView.smoothScrollToPosition(currentPosition);6. 完整实现流程6.1 Activity/Fragment中初始化publicclassLyricActivityextendsAppCompatActivity{privateRecyclerViewrvLyric;privateLyricAdapteradapter;privateListLyriclyricList;privateLinearLayoutManagerlayoutManager;privateintcurrentPosition0;OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_lyric);rvLyricfindViewById(R.id.rv_lyric);// 1. 解析歌词lyricListparseLyric(lyricText);// 2. 设置AdapteradapternewLyricAdapter(lyricList);rvLyric.setAdapter(adapter);// 3. 设置LayoutManager带居中滚动layoutManagernewLinearLayoutManager(this){OverridepublicvoidsmoothScrollToPosition(RecyclerViewrecyclerView,RecyclerView.Statestate,intposition){CenterSmoothScrollerscrollernewCenterSmoothScroller(recyclerView.getContext());scroller.setTargetPosition(position);startSmoothScroll(scroller);}};rvLyric.setLayoutManager(layoutManager);}}6.2 监听歌曲进度// 假设用MediaPlayer播放mediaPlayer.setOnCompletionListener(mp-{// 播放完成});// 用Handler定期检查播放进度privateHandlerhandlernewHandler();privateRunnableupdateLyricRunnablenewRunnable(){Overridepublicvoidrun(){if(mediaPlayer!nullmediaPlayer.isPlaying()){// 获取当前播放位置intcurrentTimemediaPlayer.getCurrentPosition();// 找到当前应该唱的那句歌词intnewPositionfindCurrentLyric(currentTime);if(newPosition!currentPosition){currentPositionnewPosition;// 更新歌词高亮adapter.setCurrentPosition(currentPosition);// 滚动到中间rvLyric.smoothScrollToPosition(currentPosition);}// 每200毫秒更新一次handler.postDelayed(this,200);}}};// 根据时间找到对应的歌词位置privateintfindCurrentLyric(longtime){for(intilyricList.size()-1;i0;i--){if(timelyricList.get(i).getTime()){returni;}}return0;}// 开始更新handler.post(updateLyricRunnable);// 停止更新// handler.removeCallbacks(updateLyricRunnable);7. 优化技巧7.1 避免频繁滚动// 只在歌词变化时才滚动if(newPosition!currentPosition){currentPositionnewPosition;adapter.setCurrentPosition(currentPosition);rvLyric.smoothScrollToPosition(currentPosition);}7.2 用户手动滑动时暂停自动滚动booleanisUserScrollingfalse;rvLyric.addOnScrollListener(newRecyclerView.OnScrollListener(){OverridepublicvoidonScrollStateChanged(RecyclerViewrecyclerView,intnewState){if(newStateRecyclerView.SCROLL_STATE_DRAGGING){// 用户正在拖动isUserScrollingtrue;}elseif(newStateRecyclerView.SCROLL_STATE_IDLE){// 停止拖动延迟几秒后恢复自动滚动newHandler().postDelayed(()-isUserScrollingfalse,3000);}}});// 更新歌词时判断if(!isUserScrollingnewPosition!currentPosition){rvLyric.smoothScrollToPosition(newPosition);}7.3 调整滚动速度publicclassCenterSmoothScrollerextendsLinearSmoothScroller{OverrideprotectedfloatcalculateSpeedPerPixel(DisplayMetricsdisplayMetrics){// 返回值越小滚动越快return50f/displayMetrics.densityDpi;}}展示8. 核心API总结API作用LinearSmoothScroller平滑滚动器calculateDtToFit()计算目标位置偏移量居中关键setTargetPosition()设置目标位置startSmoothScroll()开始平滑滚动calculateSpeedPerPixel()控制滚动速度9. 易错点总结易错点说明直接调用smoothScrollToPosition不会居中只会滚到可见位置忘记重写smoothScrollToPosition自定义Scroller不生效频繁调用smoothScrollToPosition导致卡顿应只在歌词变化时调用用户滑动时仍自动滚动体验差应暂停自动滚动高亮刷新用notifyDataSetChanged性能差应只刷新变化的两个Item10. 一句话总结歌词滚动的核心就是RecyclerView显示歌词 重写LinearSmoothScroller的calculateDtToFit方法让目标歌词居中 监听播放进度定时滚动。其中calculateDtToFit是关键它通过计算目标View中心与RecyclerView中心的偏移量实现居中滚动效果。