iOS开发—01音频处理（音乐播放器1）

iOS开发拓展篇—音频处理（音乐播放器1）

说明：该系列文章通过实现一个简单的音乐播放器来介绍音频处理的相关知识点，需要重点注意很多细节的处理。

一、调整项目的结构，导入必要的素材

　　调整后的项目结构如下：

　　


 

二、新建两个控制器

（1）新建一个控制器，用于展示音乐文件列表界面，其继承自UITableViewController

　　


（2）新建一个控制器，用于展示播放界面，其继承自UIViewController

　　


（3）在storyboard中，把之前的控制器删除，换上一个导航控制器，设置tableViewController与之前新建的控制器类进行关联

　　


 

三、音乐文件列表控制器中基本界面的搭建

（1）新建一个音乐文件的模型

根据plist文件建立模型：

　　


音乐模型的代码如下：

YYMusicModel.h文件

1 //
2 //  YYMusicModel.h
3 //  20-音频处理（音乐播放器1）
4 //
5 //  Created by apple on 14-8-13.
6 //  Copyright (c) 2014年 yangyong. All rights reserved.
7 //
8
9 #import <Foundation/Foundation.h>
10
11 @interface YYMusicModel : NSObject
12 /**
13  *  歌曲名字
14  */
15 @property (copy, nonatomic) NSString *name;
16 /**
17  *  歌曲大图
18  */
19 @property (copy, nonatomic) NSString *icon;
20 /**
21  *  歌曲的文件名
22  */
23 @property (copy, nonatomic) NSString *filename;
24 /**
25  *  歌词的文件名
26  */
27 @property (copy, nonatomic) NSString *lrcname;
28 /**
29  *  歌手
30  */
31 @property (copy, nonatomic) NSString *singer;
32 /**
33  *  歌手图标
34  */
35 @property (copy, nonatomic) NSString *singerIcon;
36 @end

（2）使用字典转模型的第三方框架

　　


部分相关代码如下：



此时的界面显示效果为：

　　


（3）添加一个UIimageView的分类，调整歌手的头像（正方形——>圆形）

　　分类的实现代码如下：

　　UIImage+YY.h文件

1 #import <UIKit/UIKit.h>
2
3 @interface UIImage (YY)
4 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;
5 @end

　　UIImage+YY.m文件

1 #import "UIImage+YY.h"
2 #import <objc/message.h>
3
4 @implementation UIImage (YY)
5 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
6 {
7     // 1.加载原图
8     UIImage *oldImage = [UIImage imageNamed:name];
9
10     // 2.开启上下文
11     CGFloat imageW = oldImage.size.width + 2 * borderWidth;
12     CGFloat imageH = oldImage.size.height + 2 * borderWidth;
13     CGSize imageSize = CGSizeMake(imageW, imageH);
14     UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
15
16     // 3.取得当前的上下文
17     CGContextRef ctx = UIGraphicsGetCurrentContext();
18
19     // 4.画边框(大圆)
20     [borderColor set];
21     CGFloat bigRadius = imageW * 0.5; // 大圆半径
22     CGFloat centerX = bigRadius; // 圆心
23     CGFloat centerY = bigRadius;
24     CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
25     CGContextFillPath(ctx); // 画圆
26
27     // 5.小圆
28     CGFloat smallRadius = bigRadius - borderWidth;
29     CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
30     // 裁剪(后面画的东西才会受裁剪的影响)
31     CGContextClip(ctx);
32
33     // 6.画图
34     [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];
35
36     // 7.取图
37     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
38
39     // 8.结束上下文
40     UIGraphicsEndImageContext();
41
42     return newImage;
43 }
44 @end

　　分类的使用：

　　


　　实现的效果：

　　　　


（4）推荐使用一个第三方框架，用来处理颜色

　　　　


　　涉及的代码：

　　


 

四、实现代码

　　YYMusicsViewController.m文件

1 //
2 //  YYMusicsViewController.m
3 //  20-音频处理（音乐播放器1）
4 //
5 //  Created by apple on 14-8-13.
6 //  Copyright (c) 2014年 yangyong. All rights reserved.
7 //
8
9 #import "YYMusicsViewController.h"
10 #import "YYMusicModel.h"
11 #import "MJExtension.h"
12 #import "UIImage+YY.h"
13 #import "Colours.h"
14
15 @interface YYMusicsViewController ()
16 @property(nonatomic,strong)NSArray *musics;
17 @end
18
19 @implementation YYMusicsViewController
20 #pragma mark-懒加载
21 -(NSArray *)musics
22 {
23     if (_musics==nil) {
24         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
25     }
26     return _musics;
27 }
28
29
30 - (void)viewDidLoad
31 {
32     [super viewDidLoad];
33
34 }
35
36 #pragma mark - Table view data source
37 /**
38  *一共多少组
39  */
40 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
41 {
42     return 1;
43 }
44 /**
45  *每组多少行
46  */
47 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
48 {
49     return self.musics.count;
50 }
51 /**
52  *每组每行的cell
53  */
54 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
55 {
56     static NSString *ID=@"ID";
57     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
58     if (cell==nil) {
59         cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
60     }
61     //取出数据模型
62     YYMusicModel *model=self.musics[indexPath.row];
63     cell.textLabel.text=model.name;
64     cell.detailTextLabel.text=model.singer;
65     cell.imageView.image=[UIImage circleImageWithName:model.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
66     return cell;
67 }
68 /**
69  *  设置每个cell的高度
70  */
71 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
72 {
73     return 70;
74 }
75
76 /**
77  *  cell的点击事件
78  */
79 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
80 {
81     //取消选中被点击的这行
82     [tableView deselectRowAtIndexPath:indexPath animated:YES];
83
84 }
85 @end

 

五、改进

　　对tableViewcell的代码进行封装：

实现：新建一个YYmusicCell类，继承自UITableViewCell。

封装代码如下：

YYMusicCell.h文件

1 //
2 //  YYMusicCell.h
3 //  20-音频处理（音乐播放器1）
4 //
5 //  Created by apple on 14-8-13.
6 //  Copyright (c) 2014年 yangyong. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10 @class YYMusicModel;
11 @interface YYMusicCell : UITableViewCell
12 +(instancetype)cellWithTableView:(UITableView *)tableView;
13 @property(nonatomic,strong)YYMusicModel *music;
14 @end

YYMusicCell.m文件

1 //
2 //  YYMusicCell.m
3 //  20-音频处理（音乐播放器1）
4 //
5 //  Created by apple on 14-8-13.
6 //  Copyright (c) 2014年 yangyong. All rights reserved.
7 //
8
9 #import "YYMusicCell.h"
10 #import "YYMusicModel.h"
11 #import "Colours.h"
12 #import "UIImage+YY.h"
13
14 @implementation YYMusicCell
15 //返回一个cell
16 +(instancetype)cellWithTableView:(UITableView *)tableView
17 {
18     static NSString *ID=@"ID";
19     YYMusicCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
20     if (cell==nil) {
21         cell=[[YYMusicCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
22     }
23     return cell;
24 }
25
26 -(void)setMusic:(YYMusicModel *)music
27 {
28     _music=music;
29     self.textLabel.text=music.name;
30     self.detailTextLabel.text=music.singer;
31     self.imageView.image=[UIImage circleImageWithName:music.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
32 }
33 @end

YYMusicsViewController.m文件

1 //
2 //  YYMusicsViewController.m
3 //  20-音频处理（音乐播放器1）
4 //
5 //  Created by apple on 14-8-13.
6 //  Copyright (c) 2014年 yangyong. All rights reserved.
7 //
8
9 #import "YYMusicsViewController.h"
10 #import "YYMusicModel.h"
11 #import "MJExtension.h"
12 #import "YYMusicCell.h"
13
14 @interface YYMusicsViewController ()
15 @property(nonatomic,strong)NSArray *musics;
16 @end
17
18 @implementation YYMusicsViewController
19 #pragma mark-懒加载
20 -(NSArray *)musics
21 {
22     if (_musics==nil) {
23         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
24     }
25     return _musics;
26 }
27
28 - (void)viewDidLoad
29 {
30     [super viewDidLoad];
31 }
32
33 #pragma mark - Table view data source
34 /**
35  *一共多少组
36  */
37 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
38 {
39     return 1;
40 }
41 /**
42  *每组多少行
43  */
44 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
45 {
46     return self.musics.count;
47 }
48 /**
49  *每组每行的cell
50  */
51 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
52 {
53     YYMusicCell *cell=[YYMusicCell cellWithTableView:tableView];
54     cell.music=self.musics[indexPath.row];
55     return cell;
56 }
57 /**
58  *  设置每个cell的高度
59  */
60 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
61 {
62     return 70;
63 }
64
65 /**
66  *  cell的点击事件
67  */
68 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
69 {
70     //取消选中被点击的这行
71     [tableView deselectRowAtIndexPath:indexPath animated:YES];
72
73 }
74 @end

实现效果：
　　


六、补充说明
需要注意的细节处理
（1）UIImageView的分类，方形图片剪为圆形
（2）颜色的处理，文章中推荐的颜色处理框架提供了大量的颜色。
（3）取消选中被点击的这行cell.
　　  [tableView deselectRowAtIndexPath:indexPath animated:YES];
（4）tableViewCell的封装