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

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

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

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

　　调整后的项目结构如下：

　　

 

二、新建两个控制器

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

　　

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

　　

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

　　

 

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

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

根据plist文件建立模型：

　　

音乐模型的代码如下：

YYMusicModel.h文件

// 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 : NSObject12 /**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文件

#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文件

#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文件

// 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 @end18 19 @implementation YYMusicsViewController20 #pragma mark-懒加载21 -(NSArray *)musics22 {23     if (_musics==nil) {24         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];25     }26     return _musics;27 }28 29 30 - (void)viewDidLoad31 {32     [super viewDidLoad];33     34 }35 36 #pragma mark - Table view data source37 /**38  *一共多少组39  */40 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView41 {42     return 1;43 }44 /**45  *每组多少行46  */47 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section48 {49     return self.musics.count;50 }51 /**52  *每组每行的cell53  */54 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath55 {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 *)indexPath72 {73     return 70;74 }75 76 /**77  *  cell的点击事件78  */79 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath80 {81     //取消选中被点击的这行82     [tableView deselectRowAtIndexPath:indexPath animated:YES];83     84 }85 @end

 

五、改进

　　对tableViewcell的代码进行封装：

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

封装代码如下：

YYMusicCell.h文件

// 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 : UITableViewCell12 +(instancetype)cellWithTableView:(UITableView *)tableView;13 @property(nonatomic,strong)YYMusicModel *music;14 @end

YYMusicCell.m文件

// 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 YYMusicCell15 //返回一个cell16 +(instancetype)cellWithTableView:(UITableView *)tableView17 {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 *)music27 {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文件

// 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 @end17 18 @implementation YYMusicsViewController19 #pragma mark-懒加载20 -(NSArray *)musics21 {22     if (_musics==nil) {23         _musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];24     }25     return _musics;26 }27 28 - (void)viewDidLoad29 {30     [super viewDidLoad];31 }32 33 #pragma mark - Table view data source34 /**35  *一共多少组36  */37 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView38 {39     return 1;40 }41 /**42  *每组多少行43  */44 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section45 {46     return self.musics.count;47 }48 /**49  *每组每行的cell50  */51 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath52 {    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 *)indexPath61 {62     return 70;63 }64 65 /**66  *  cell的点击事件67  */68 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath69 {70     //取消选中被点击的这行71     [tableView deselectRowAtIndexPath:indexPath animated:YES];72     73 }74 @end

实现效果：

　　

六、补充说明

需要注意的细节处理

（1）UIImageView的分类，方形图片剪为圆形

（2）颜色的处理，文章中推荐的颜色处理框架提供了大量的颜色。

（3）取消选中被点击的这行cell.

　　  [tableView deselectRowAtIndexPath:indexPath animated:YES];

（4）tableViewCell的封装