快捷導(dǎo)航

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

更新時(shí)間：2018年01月04日 10:43:10 作者：楠之楓雪

這篇文章主要為大家詳細(xì)介紹了漂亮的Android音樂歌詞控件，仿網(wǎng)易云音樂滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

只要demo可以拉到最底部。

一.歌詞控件效果。

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

主要效果有以下：

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

二.歌詞控件實(shí)現(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) {
          // 解析每一行歌詞 得到每行歌詞的集合，因?yàn)橛行└柙~重復(fù)有多個(gè)時(shí)間，就可以解析出多個(gè)歌詞行來
          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是實(shí)現(xiàn)Comparable的類，保存了沒行歌詞的數(shù)據(jù)，包括歌詞內(nèi)容、時(shí)間，實(shí)現(xiàn)Comparable可以通過時(shí)間來進(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ù)，因?yàn)樽x取的沒行數(shù)據(jù)，如果長度過長就可能要通過多行才能顯示完，這時(shí)需要截取為多行顯示。

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.如果在手勢滑動(dòng)狀態(tài)，繪制時(shí)間線

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

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

三.下載地址，歡迎issue

github下載地址

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

您可能感興趣的文章: