漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

作者:楠之枫雪 时间:2022-01-26 14:16:25 

前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能。网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好。于是趁有空的时间,参考了网上的部分demo,自己也写了个歌词控件。

只要demo可以拉到最底部。

一.歌词控件效果。

目前的歌词控件效果如下:

漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

主要效果有以下:

1.实现自动滑动切换到下一句。
2.实现滑动歌词切换播放时间。
3.实现拖动歌词时仿网易云音乐显示时间线,将要选择的歌词颜色变化。
4.音乐进度跳转时,歌词跳转可以滑动切换。

二.歌词控件实现逻辑说明

1.歌词解析。

歌词文件问lrc文件,歌词内容格式都是固定的[01:15.33] 或者 [00:00]这种格式。所以先把歌词内容通过一行一行的读取,每读取一行就解析。


List<LrcRow> rows = new ArrayList<LrcRow>();

// 循环地读取歌词的每一行
     do {
       line = br.readLine();

if (line != null && line.length() > 0) {
         // 解析每一行歌词 得到每行歌词的集合,因为有些歌词重复有多个时间,就可以解析出多个歌词行来
         List<LrcRow> lrcRows = createRows(line);//解析行数据
         if (lrcRows != null && lrcRows.size() > 0) {
           for (LrcRow row : lrcRows) {
             rows.add(row);
           }
         }
       }
     } while (line != null);


private List<LrcRow> createRows(String standardLrcLine) {

try {
     // [01:15.33] 或者 [00:00]这种格式
     Boolean Form1 = standardLrcLine.indexOf("[") == 0 && standardLrcLine.indexOf("]") == 9;
     Boolean Form2 = standardLrcLine.indexOf("[") == 0 && standardLrcLine.indexOf("]") == 6;

if (!Form1 && !Form2) {
       return null;
     }

int lastIndexOfRightBracket = standardLrcLine.lastIndexOf("]");

String content = standardLrcLine.substring(lastIndexOfRightBracket + 1, standardLrcLine.length());  

String times = standardLrcLine.substring(0, lastIndexOfRightBracket + 1).replace("[", "-").replace("]",
         "-");

String arrTimes[] = times.split("-");
     List<LrcRow> listTimes = new ArrayList<LrcRow>();
     for (String temp : arrTimes) {
       if (temp.trim().length() == 0) {
         continue;
       }

LrcRow lrcRow = new LrcRow(content, temp, timeConvert(temp));
       listTimes.add(lrcRow);
     }
     return listTimes;
   } catch (Exception e) {    
     return null;
   }
 }

LrcRow是实现Comparable的类,保存了没行歌词的数据,包括歌词内容、时间,实现Comparable可以通过时间来进行歌词排序。


public class LrcRow implements Comparable<LrcRow>{

private String RowData;//行数据
 private List<LrcShowRow> ShowRows = new ArrayList<LrcShowRow>();//显示的行
 public String TimeText;
 public long CurrentRowTime;

LrcShowRow是绘制显示的行数据,因为读取的没行数据,如果长度过长就可能要通过多行才能显示完,这时需要截取为多行显示。


public class LrcShowRow implements Comparable<LrcShowRow> {

public String Data;// 行数据
 public float RowHeight;// 行高度
 public float RowPadding;// 行间距
 public float YPosition =0;//绘画y位置
 public int Index;//所在行坐标

2.歌词绘制

a.如果在手势滑动状态,绘制时间线

b.从第一行数据开始绘制,从头到位将所有行数据绘制一遍。注意的是,第一行开始绘制坐标FirstRowPositionY是动态控制,目的是方便手势滑动或者执行动画时改变这个坐标就能实现控件滑动效果。绘制过程中需要记录每一行绘制的Y位置,这个坐标的作用是为了执行动画时计算需要的滑动距离。如果当前行是选中行或者如果当前行是手势滑动时想要选择的行,改变为对应的显示颜色。

c.音乐播放时间跳转时,查找到歌词中与跳转时间最匹配的歌词,拿到将要选中位置下标TrySelectionPosition,然后执行动画,执行动画时先计算出总共偏移量然后一点点改变FirstRowPositionY偏移位置实现滑动效果。动画执行完成,将选中下标更改为TrySelectionPosition。

三.下载地址,欢迎issue

github下载地址

来源:http://blog.csdn.net/u014614038/article/details/72303128

标签:Android,歌词控件,滑动
0
投稿

猜你喜欢

  • Spring Boot Logback配置日志过程解析

    2022-12-09 18:08:06
  • java 注解默认值操作

    2023-08-25 20:31:38
  • C#使用文件流读取文件的方法

    2022-06-27 20:17:12
  • java连接zookeeper实现zookeeper教程

    2022-09-19 03:04:35
  • Java并发的CAS原理与ABA问题的讲解

    2023-11-25 12:17:21
  • android实现蓝牙app代码

    2021-07-08 07:52:15
  • Android仿Keep运动休息倒计时圆形控件

    2022-08-02 07:54:36
  • IDEA解决springboot热部署失效问题(推荐)

    2023-08-12 10:40:49
  • C# 进行图片压缩的示例代码(对jpg压缩效果最好)

    2023-05-11 16:34:19
  • Java中的关键字_动力节点Java学院整理

    2022-07-28 06:38:29
  • Mybatis-Plus 条件构造器 QueryWrapper 的基本用法

    2022-07-07 13:28:18
  • C#关于Func和Action委托的介绍详解

    2022-10-13 04:43:14
  • C# 中用 Sqlparameter 的两种用法

    2022-11-19 03:52:52
  • 深入浅出讲解Java集合之Map接口

    2023-10-14 20:52:46
  • 谈谈对Java中的volatile的理解

    2022-06-28 06:31:26
  • Android优化提升应用启动速度及Splash页面的设计

    2022-02-18 06:02:27
  • Spring Bean后处理器详细介绍

    2021-06-27 07:29:06
  • 妙解Java中的回调机制(CallBack)

    2022-07-15 15:25:31
  • C#中Linq查询基本操作使用实例

    2023-11-25 00:25:37
  • 详解spring boot实现多数据源代码实战

    2022-05-01 20:18:36
  • asp之家 软件编程 m.aspxhome.com