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 = ; i < self.lrcList.count; i++) {
           // 当前的歌词
           ChaosLrc *lrc = self.lrcList[i];
           NSInteger next = i + ;
           // 下一句歌词
           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:];
               NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:self.currentLrcIndex inSection:];
               // 记录当前行
               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:];
               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(, , self.bounds.size.width * self.progress, self.bounds.size.height);
       // 2.选择颜色
       [[UIColor yellowColor] set];
       // 3.添加区域开始画图
   //    UIRectFill(fillRect);
       UIRectFillUsingBlendMode(fillRect, kCGBlendModeSourceIn);
   }
  
   @end

• 外部进度值的计算