iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化

一.歌词的展示 -- 首先歌词是在scrollView上,scrollView的大小是两个屏幕的宽度

  • scrollView滚动修改透明度的代码                                                            
  • 自定义展示歌词的view,继承自UIScrollView,向外界提供一个歌词文件名的属性

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

    @property(nonatomic,copy) NSString *lrcFileName;

    重写setter,解析歌词,通过歌词的工具类获得模型集合

  • 歌词工具类的实现

     1 #import "ChaosLrcTool.h"
     2 #import "ChaosLrc.h"
     3
     4 @implementation ChaosLrcTool
     5 + (NSArray *)lrcToolWithLrcName:(NSString *)lrcname
     6 {
     7     // 1.获取文件路径
     8     NSString *lrcPath = [[NSBundle mainBundle] pathForResource:lrcname ofType:nil];
     9     // 2.加载文件内容
    10     NSString *lrcString = [NSString stringWithContentsOfFile:lrcPath encoding:NSUTF8StringEncoding error:nil];
    11     // 3.切割字符串
    12     NSArray *lrcLines = [lrcString componentsSeparatedByString:@"\n"];
    13     // 4.遍历集合,转换成歌词模型
    14     NSMutableArray *arr = [NSMutableArray array];
    15     for (NSString *lrcLineString in lrcLines) {
    16         /*
    17          [ti:简单爱]
    18          [ar:周杰伦]
    19          [al:范特西]
    20          */
    21         // 5.跳过指定行
    22         if ([lrcLineString hasPrefix:@"[ti"] || [lrcLineString hasPrefix:@"[ar"] || [lrcLineString hasPrefix:@"[al"] || ![lrcLineString hasPrefix:@"["]) {
    23             continue;
    24         }
    25         ChaosLrc *lrc = [ChaosLrc lrcWithLrcLine:lrcLineString];
    26         [arr addObject:lrc];
    27     }
    28     return arr;
    29 }
    30 @end
  • 歌词解析完毕后,根据歌词模型集合来实现tableView(歌词用tableView来显示)的数据源方法

二.歌词的滚动

  • 歌词的滚动由每一句的时间来决定,自定义的歌词的view需要外界不停的提供歌曲播放的时间,自己来判断并滚动显示对应的歌词.所以自定义的歌词View需要向外界提供一个时间属性,重写时间属性来实现歌词滚动

     1 #pragma mark - 歌词滚动
     2 // 重写time的setter
     3 - (void)setCurrentTime:(NSTimeInterval)currentTime
     4 {
     5     _currentTime = currentTime;
     6     // 遍历歌词,找到对应时间应该显示的歌词模型
     7     for (int i = 0; i < self.lrcList.count; i++) {
     8         // 当前的歌词
     9         ChaosLrc *lrc = self.lrcList[i];
    10         NSInteger next = i + 1;
    11         // 下一句歌词
    12         ChaosLrc *nextLrc;
    13         if (next < self.lrcList.count) {
    14             nextLrc = self.lrcList[next];
    15         }
    16         if (self.currentLrcIndex != i && currentTime >= lrc.time && currentTime < nextLrc.time) {
    17
    18             NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
    19             NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:self.currentLrcIndex inSection:0];
    20             // 记录当前行
    21             self.currentLrcIndex = i;
    22             // 满足条件,tableview滚动
    23             [self.lrcView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
    24             // 刷新上一行,字体还原
    25             [self.lrcView reloadRowsAtIndexPaths:@[previousIndexPath] withRowAnimation:UITableViewRowAnimationNone];
    26             // 刷新当前行,字体变大
    27             [self.lrcView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
    28         }
    29         // 当前歌词的label的进度
    30         if (self.currentLrcIndex == i) {
    31
    32             // 获取当前的cell
    33             NSIndexPath *currentIndexPath = [NSIndexPath indexPathForRow:i inSection:0];
    34             ChaosLrcCell *currentCell = [self.lrcView cellForRowAtIndexPath:currentIndexPath];
    35             CGFloat totalTime = nextLrc.time - lrc.time; // 当前歌词总时间
    36             CGFloat progressTime = currentTime - lrc.time; // 当前歌词已经走过了多长时间
    37             currentCell.lrcLabel.progress = progressTime / totalTime;
    38
    39             // 主页的label
    40             self.mainLabel.text = lrc.text;
    41             self.mainLabel.progress = currentCell.lrcLabel.progress;
    42         }
    43     }
    44 }
  • 外界给歌词的View提供时间就不是每一秒提供一次那么简单了,外界需要更牛逼的定时器                                     
    • 播放的时候添加定时器                              
    • 定时器的方法中实现给歌词的view提供的时间属性赋值

三.歌词的颜色变化 -- 画上去的(自定义cell中的显示歌词的label,label需要外界提供一个进度值,自己内部根据进度值来画)

  • 自定义label的实现

     1 #import "ChaosLabel.h"
     2
     3 @implementation ChaosLabel
     4
     5 - (void)setProgress:(CGFloat)progress
     6 {
     7     _progress = progress;
     8     // 重绘
     9     [self setNeedsDisplay];
    10 }
    11
    12 - (void)drawRect:(CGRect)rect {
    13
    14     [super drawRect:rect];
    15
    16     // 1.获取需要画的区域
    17     CGRect fillRect = CGRectMake(0, 0, self.bounds.size.width * self.progress, self.bounds.size.height);
    18     // 2.选择颜色
    19     [[UIColor yellowColor] set];
    20     // 3.添加区域开始画图
    21 //    UIRectFill(fillRect);
    22     UIRectFillUsingBlendMode(fillRect, kCGBlendModeSourceIn);
    23 }
    24
    25 @end
  • 外部进度值的计算
时间: 2024-10-13 11:35:33

iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化的相关文章

iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 1 #import "ChaosMusicTool.h" 2 #import "MJExtension.h" 3 #import "ChaosMusic.h" 4 5 static NSArray *_musics; 6 static ChaosMusic *_playingMusic; 7

iOS开发--QQ音乐练习,后台播放和锁屏界面

一.设置后台播放 首先允许程序后台播放 代码实现 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 2 3 // 设置后台播放的代码,步骤 4 // 1.获取音频的会话 5 AVAudioSession *session = [AVAudioSession sharedInstance]; 6 // 2.设置后台播放类型

10、 在QQ音乐中爬取某首歌曲的歌词

需求就是把关卡内的代码稍作修改,将周杰伦前五页歌曲的歌词都爬取下来,结果就是全部展示打印出来. URL  https://y.qq.com/portal/search.html#page=1&searchid=1&remoteplace=txt.yqq.top&t=song&w=%E5%91%A8%E6%9D%B0%E4%BC%A6 1 #10 在QQ音乐中爬取某首歌曲的歌词 2 # 需求就是把关卡内的代码稍作修改,将周杰伦前五页歌曲的歌词都爬取下来,结果就是全部展示打印出

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,

【iOS开发之旅】汽车品牌展示

运行效果如下:    模型: // // CZGroup.h // 05-汽车品牌展示 // // Created by ChenQianPing on 16/1/22. // Copyright © 2016年 chenqp. All rights reserved. // #import <Foundation/Foundation.h> @interface CZGroup : NSObject @property (nonatomic,copy) NSString *title; @p

iOS开发QQ空间半透明效果的实现

//1.首先我们可以确定的是cell的半透明, /* white The grayscale value of the color object, specified as a value from 0.0 to 1.0. alpha The opacity value of the color object, specified as a value from 0.0 to 1.0. */ cell.backgroundColor = [UIColor colorWithWhite:1 alp

iOS开发-- 如何让 UITableView 的 headerView跟随 cell一起滚动

在我们利用 UITableView 展示我们的内容的时候,我需要在顶部放一个不同于一般的cell的 界面,这个界面比较独特. 1. 所以我就把它 作为一个section的 headerView. 也就是在函数: - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 里面返回 这个UIView. 但是,由于这个UIView占的空间很大,基本占用整个屏幕的高度,而滚动table

iOS开发技巧(系列十八:扩展UIColor,支持十六进制颜色设置)

新建一个Category,命名为UIColor+Hex,表示UIColor支持十六进制Hex颜色设置. UIColor+Hex.h文件, #import <UIKit/UIKit.h> #define RGBA_COLOR(R, G, B, A) [UIColor colorWithRed:((R) / 255.0f) green:((G) / 255.0f) blue:((B) / 255.0f) alpha:A] #define RGB_COLOR(R, G, B) [UIColor co

iOS开发--使用NSMutableAttributedString 实现富文本

在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦,而且很多UILabel的属性也不起作用了,效果都不理想.后来了解到NSMuttableAttstring(带属性的字符串),上面的一些需求都可以很简便的实现. 实例化方法和使用方法 实例化方法: 使用字符串初始化 - (id)initWithString:(NSString *)str; 例: N