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的封裝

iOS開發拓展篇—音頻處理（音樂播放器1）

繼續閱讀

iOS中UITableview實作跨區域拖動效果的實作

設計比較好，有助于學習的Github上的iOS App源碼 (中文)

Cocoa的MVC架構分析

iOS上的http請求：get、post以及同步、異步

Swift中去掉字元串格式數字小數點後多餘的0 （自寫）

iOS - Modal後控制器的關系及 modal後不移除後面的控件

iOS 為什麼必須在主線程中操作UI

oc中的copy與mutableCopy

copy與mutableCopy 記住：

[學習筆記—Objective-C]《Objective-C 程式設計第6版》第六章選擇結構課後題6-4&6-6&6-7

AppCode的使用

iOS FDMB添加新字段

iOS開發之送出App前需要準備的材料

iOS APP送出上架最新流程

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

今日頭條iOS用戶端啟動速度優化技術調研實測資料