iOS開發--QQ音樂練習,歌詞的展示,歌詞的滾動,歌詞的顏色變化

一.歌詞的展示 -- 首先歌詞是在scrollView上,scrollView的大小是兩個屏幕的寬度

• scrollView滾動修改透明度的代碼                                                            
• 自定義展示歌詞的view,繼承自UIScrollView,向外界提供一個歌詞文件名的屬性

  /** 歌詞文件的名字 */

  @property(nonatomic,copy) NSString *lrcFileName;

  重寫setter,解析歌詞,通過歌詞的工具類獲得模型集合

• 歌詞工具類的實現

  #import "ChaosLrcTool.h"
  #import "ChaosLrc.h"
  
  @implementation ChaosLrcTool
  + (NSArray *)lrcToolWithLrcName:(NSString *)lrcname
  {
      // 1.獲取文件路徑
      NSString *lrcPath = [[NSBundle mainBundle] pathForResource:lrcname ofType:nil];
      // 2.加載文件內容
      NSString *lrcString = [NSString stringWithContentsOfFile:lrcPath encoding:NSUTF8StringEncoding error:nil];
      // 3.切割字符串
      NSArray *lrcLines = [lrcString componentsSeparatedByString:@"\n"];
      // 4.遍歷集合,轉換成歌詞模型
      NSMutableArray *arr = [NSMutableArray array];
      for (NSString *lrcLineString in lrcLines) {
          /*
           [ti:簡單愛]
           [ar:周傑倫]
           [al:范特西]
           */
          // 5.跳過指定行
          if ([lrcLineString hasPrefix:@"[ti"] || [lrcLineString hasPrefix:@"[ar"] || [lrcLineString hasPrefix:@"[al"] || ![lrcLineString hasPrefix:@"["]) {
              continue;
          }
          ChaosLrc *lrc = [ChaosLrc lrcWithLrcLine:lrcLineString];
          [arr addObject:lrc];
      }
      return arr;
  }
  @end

   

• 歌詞解析完畢后,根據歌詞模型集合來實現tableView(歌詞用tableView來顯示)的數據源方法

二.歌詞的滾動

• 歌詞的滾動由每一句的時間來決定,自定義的歌詞的view需要外界不停的提供歌曲播放的時間,自己來判斷並滾動顯示對應的歌詞.所以自定義的歌詞View需要向外界提供一個時間屬性,重寫時間屬性來實現歌詞滾動

  #pragma mark - 歌詞滾動
  // 重寫time的setter
  - (void)setCurrentTime:(NSTimeInterval)currentTime
  {
      _currentTime = currentTime;
      // 遍歷歌詞,找到對應時間應該顯示的歌詞模型
      for (int i = 0; i < self.lrcList.count; i++) {
          // 當前的歌詞
          ChaosLrc *lrc = self.lrcList[i];
          NSInteger next = i + 1;
          // 下一句歌詞
          ChaosLrc *nextLrc;
          if (next < self.lrcList.count) {
              nextLrc = self.lrcList[next];
          }
          if (self.currentLrcIndex != i && currentTime >= lrc.time && currentTime < nextLrc.time) {
              
              NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
              NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:self.currentLrcIndex inSection:0];
              // 記錄當前行
              self.currentLrcIndex = i;
              // 滿足條件,tableview滾動
              [self.lrcView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
              // 刷新上一行,字體還原
              [self.lrcView reloadRowsAtIndexPaths:@[previousIndexPath] withRowAnimation:UITableViewRowAnimationNone];
              // 刷新當前行,字體變大
              [self.lrcView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
          }
          // 當前歌詞的label的進度
          if (self.currentLrcIndex == i) {
              
              // 獲取當前的cell
              NSIndexPath *currentIndexPath = [NSIndexPath indexPathForRow:i inSection:0];
              ChaosLrcCell *currentCell = [self.lrcView cellForRowAtIndexPath:currentIndexPath];
              CGFloat totalTime = nextLrc.time - lrc.time; // 當前歌詞總時間
              CGFloat progressTime = currentTime - lrc.time; // 當前歌詞已經走過了多長時間
              currentCell.lrcLabel.progress = progressTime / totalTime;
              
              // 主頁的label
              self.mainLabel.text = lrc.text;
              self.mainLabel.progress = currentCell.lrcLabel.progress;
          }
      }
  }

   

• 外界給歌詞的View提供時間就不是每一秒提供一次那么簡單了,外界需要更牛逼的定時器                                     
  • 播放的時候添加定時器                              
  • 定時器的方法中實現給歌詞的view提供的時間屬性賦值

三.歌詞的顏色變化 -- 畫上去的(自定義cell中的顯示歌詞的label,label需要外界提供一個進度值,自己內部根據進度值來畫)

• 自定義label的實現

  #import "ChaosLabel.h"
  
  @implementation ChaosLabel
  
  - (void)setProgress:(CGFloat)progress
  {
      _progress = progress;
      // 重繪
      [self setNeedsDisplay];
  }
  
  - (void)drawRect:(CGRect)rect {
      
      [super drawRect:rect];
      
      // 1.獲取需要畫的區域
      CGRect fillRect = CGRectMake(0, 0, self.bounds.size.width * self.progress, self.bounds.size.height);
      // 2.選擇顏色
      [[UIColor yellowColor] set];
      // 3.添加區域開始畫圖
  //    UIRectFill(fillRect);
      UIRectFillUsingBlendMode(fillRect, kCGBlendModeSourceIn);
  }
  
  @end

   

• 外部進度值的計算