漂亮的Android音樂歌詞控件仿網(wǎng)易云音樂滑動效果

發(fā)布時間：2020-10-01 21:11:05 來源：腳本之家閱讀：175 作者：楠之楓雪欄目：移動開發(fā)

前言：項目有個音樂播發(fā)器功能，實現(xiàn)音樂在線播放，同時需要帶有歌詞顯示功能。網(wǎng)上也找過，在github找到勉強(qiáng)能用的控件，只是效果還是差強(qiáng)人意，不是特別好。于是趁有空的時間，參考了網(wǎng)上的部分demo，自己也寫了個歌詞控件。

只要demo可以拉到最底部。

一.歌詞控件效果。

目前的歌詞控件效果如下：

漂亮的Android音樂歌詞控件仿網(wǎng)易云音樂滑動效果

主要效果有以下：

1.實現(xiàn)自動滑動切換到下一句。
2.實現(xiàn)滑動歌詞切換播放時間。
3.實現(xiàn)拖動歌詞時仿網(wǎng)易云音樂顯示時間線，將要選擇的歌詞顏色變化。
4.音樂進(jìn)度跳轉(zhuǎn)時，歌詞跳轉(zhuǎn)可以滑動切換。

二.歌詞控件實現(xiàn)邏輯說明

1.歌詞解析。

歌詞文件問lrc文件，歌詞內(nèi)容格式都是固定的[01:15.33] 或者 [00:00]這種格式。所以先把歌詞內(nèi)容通過一行一行的讀取，每讀取一行就解析。

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

      // 循環(huán)地讀取歌詞的每一行
      do {
        line = br.readLine();

        if (line != null && line.length() > 0) {
          // 解析每一行歌詞 得到每行歌詞的集合，因為有些歌詞重復(fù)有多個時間，就可以解析出多個歌詞行來
          List<LrcRow> lrcRows = createRows(line);//解析行數(shù)據(jù)
          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是實現(xiàn)Comparable的類，保存了沒行歌詞的數(shù)據(jù)，包括歌詞內(nèi)容、時間，實現(xiàn)Comparable可以通過時間來進(jìn)行歌詞排序。

public class LrcRow implements Comparable<LrcRow>{

  private String RowData;//行數(shù)據(jù)
  private List<LrcShowRow> ShowRows = new ArrayList<LrcShowRow>();//顯示的行
  public String TimeText;
  public long CurrentRowTime;

LrcShowRow是繪制顯示的行數(shù)據(jù)，因為讀取的沒行數(shù)據(jù)，如果長度過長就可能要通過多行才能顯示完，這時需要截取為多行顯示。

public class LrcShowRow implements Comparable<LrcShowRow> {

  public String Data;// 行數(shù)據(jù)
  public float RowHeight;// 行高度
  public float RowPadding;// 行間距
  public float YPosition =0;//繪畫y位置
  public int Index;//所在行坐標(biāo)

2.歌詞繪制

a.如果在手勢滑動狀態(tài)，繪制時間線

b.從第一行數(shù)據(jù)開始繪制，從頭到位將所有行數(shù)據(jù)繪制一遍。注意的是，第一行開始繪制坐標(biāo)FirstRowPositionY是動態(tài)控制，目的是方便手勢滑動或者執(zhí)行動畫時改變這個坐標(biāo)就能實現(xiàn)控件滑動效果。繪制過程中需要記錄每一行繪制的Y位置，這個坐標(biāo)的作用是為了執(zhí)行動畫時計算需要的滑動距離。如果當(dāng)前行是選中行或者如果當(dāng)前行是手勢滑動時想要選擇的行，改變?yōu)閷?yīng)的顯示顏色。

c.音樂播放時間跳轉(zhuǎn)時，查找到歌詞中與跳轉(zhuǎn)時間最匹配的歌詞，拿到將要選中位置下標(biāo)TrySelectionPosition，然后執(zhí)行動畫，執(zhí)行動畫時先計算出總共偏移量然后一點點改變FirstRowPositionY偏移位置實現(xiàn)滑動效果。動畫執(zhí)行完成，將選中下標(biāo)更改為TrySelectionPosition。

三.下載地址，歡迎issue

github下載地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

漂亮的Android音樂歌詞控件 仿網(wǎng)易云音樂滑動效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

漂亮的Android音樂歌詞控件仿網(wǎng)易云音樂滑動效果