實(shí)例解析iOS中音樂播放器應(yīng)用開發(fā)的基本要點(diǎn)
一、調(diào)整項(xiàng)目的結(jié)構(gòu)，導(dǎo)入必要的素材
調(diào)整后的項(xiàng)目結(jié)構(gòu)如下：
二、新建兩個(gè)控制器
（1）新建一個(gè)控制器，用于展示音樂文件列表界面，其繼承自UITableViewController
（2）新建一個(gè)控制器，用于展示播放界面，其繼承自UIViewController
（3）在storyboard中，把之前的控制器刪除，換上一個(gè)導(dǎo)航控制器，設(shè)置tableViewController與之前新建的控制器類進(jìn)行關(guān)聯(lián)
三、音樂文件列表控制器中基本界面的搭建
（1）新建一個(gè)音樂文件的模型
根據(jù)plist文件建立模型：
音樂模型的代碼如下：
YYMusicModel.h文件
//
// YYMusicModel.h
// 20-音頻處理（音樂播放器1）
//
// Created by apple on 14-8-13.
// Copyright (c) 2014年 yangyong. All rights reserved.
//
#import <Foundation/Foundation.h>
@interface YYMusicModel : NSObject
/**
* 歌曲名字
*/
@property (copy, nonatomic) NSString *name;
/**
* 歌曲大圖
*/
@property (copy, nonatomic) NSString *icon;
/**
* 歌曲的文件名
*/
@property (copy, nonatomic) NSString *filename;
/**
* 歌詞的文件名
*/
@property (copy, nonatomic) NSString *lrcname;
/**
* 歌手
*/
@property (copy, nonatomic) NSString *singer;
/**
* 歌手圖標(biāo)
*/
@property (copy, nonatomic) NSString *singerIcon;
@end
（2）使用字典轉(zhuǎn)模型的第三方框架
部分相關(guān)代碼如下：
此時(shí)的界面顯示效果為：
（3）添加一個(gè)UIimageView的分類，調(diào)整歌手的頭像（正方形——>圓形）
分類的實(shí)現(xiàn)代碼如下：
UIImage+YY.h文件
#import <UIKit/UIKit.h>
@interface UIImage (YY)
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;
@end
UIImage+YY.m文件
#import "UIImage+YY.h"
#import <objc/message.h>
@implementation UIImage (YY)
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
{
// 1.加載原圖
UIImage *oldImage = [UIImage imageNamed:name];
// 2.開啟上下文
CGFloat imageW = oldImage.size.width + 2 * borderWidth;
CGFloat imageH = oldImage.size.height + 2 * borderWidth;
CGSize imageSize = CGSizeMake(imageW, imageH);
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
// 3.取得當(dāng)前的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 4.畫邊框(大圓)
[borderColor set];
CGFloat bigRadius = imageW * 0.5; // 大圓半徑
CGFloat centerX = bigRadius; // 圓心
CGFloat centerY = bigRadius;
CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
CGContextFillPath(ctx); // 畫圓
// 5.小圓
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
// 裁剪(后面畫的東西才會受裁剪的影響)
CGContextClip(ctx);
// 6.畫圖
[oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];
// 7.取圖
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
// 8.結(jié)束上下文
UIGraphicsEndImageContext();
return newImage;
}
@end
分類的使用：
實(shí)現(xiàn)的效果：
（4）推薦使用一個(gè)第三方框架，用來處理顏色
涉及的代碼：
四、實(shí)現(xiàn)代碼
YYMusicsViewController.m文件
//
// YYMusicsViewController.m
// 20-音頻處理（音樂播放器1）
//
// Created by apple on 14-8-13.
// Copyright (c) 2014年 yangyong. All rights reserved.
//
#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "UIImage+YY.h"
#import "Colours.h"
@interface YYMusicsViewController ()
@property(nonatomic,strong)NSArray *musics;
@end
@implementation YYMusicsViewController
#pragma mark-懶加載
-(NSArray *)musics
{
if (_musics==nil) {
_musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
}
return _musics;
}
- (void)viewDidLoad
{
[super viewDidLoad];
}
#pragma mark - Table view data source
/**
*一共多少組
*/
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
/**
*每組多少行
*/
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.musics.count;
}
/**
*每組每行的cell
*/
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID=@"ID";
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
if (cell==nil) {
cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
}
//取出數(shù)據(jù)模型
YYMusicModel *model=self.musics[indexPath.row];
cell.textLabel.text=model.name;
cell.detailTextLabel.text=model.singer;
cell.imageView.image=[UIImage circleImageWithName:model.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
return cell;
}
/**
* 設(shè)置每個(gè)cell的高度
*/
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 70;
}
/**
* cell的點(diǎn)擊事件
*/
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//取消選中被點(diǎn)擊的這行
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
@end
五、改進(jìn)
對tableViewcell的代碼進(jìn)行封裝：
實(shí)現(xiàn)：新建一個(gè)YYmusicCell類，繼承自UITableViewCell。
封裝代碼如下：
YYMusicCell.h文件
//
// YYMusicCell.h
// 20-音頻處理（音樂播放器1）
//
// Created by apple on 14-8-13.
// Copyright (c) 2014年 yangyong. All rights reserved.
//
#import <UIKit/UIKit.h>
@class YYMusicModel;
@interface YYMusicCell : UITableViewCell
+(instancetype)cellWithTableView:(UITableView *)tableView;
@property(nonatomic,strong)YYMusicModel *music;
@end
YYMusicCell.m文件
//
// YYMusicCell.m
// 20-音頻處理（音樂播放器1）
//
// Created by apple on 14-8-13.
// Copyright (c) 2014年 yangyong. All rights reserved.
//
#import "YYMusicCell.h"
#import "YYMusicModel.h"
#import "Colours.h"
#import "UIImage+YY.h"
@implementation YYMusicCell
//返回一個(gè)cell
+(instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID=@"ID";
YYMusicCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
if (cell==nil) {
cell=[[YYMusicCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
}
return cell;
}
-(void)setMusic:(YYMusicModel *)music
{
_music=music;
self.textLabel.text=music.name;
self.detailTextLabel.text=music.singer;
self.imageView.image=[UIImage circleImageWithName:music.singerIcon borderWidth:1 borderColor:[UIColor skyBlueColor]];
}
@end
YYMusicsViewController.m文件
//
// YYMusicsViewController.m
// 20-音頻處理（音樂播放器1）
//
// Created by apple on 14-8-13.
// Copyright (c) 2014年 yangyong. All rights reserved.
//
#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "YYMusicCell.h"
@interface YYMusicsViewController ()
@property(nonatomic,strong)NSArray *musics;
@end
@implementation YYMusicsViewController
#pragma mark-懶加載
-(NSArray *)musics
{
if (_musics==nil) {
_musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
}
return _musics;
}
- (void)viewDidLoad
{
[super viewDidLoad];
}
#pragma mark - Table view data source
/**
*一共多少組
*/
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
/**
*每組多少行
*/
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.musics.count;
}
/**
*每組每行的cell
*/
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
YYMusicCell *cell=[YYMusicCell cellWithTableView:tableView];
cell.music=self.musics[indexPath.row];
return cell;
}
/**
* 設(shè)置每個(gè)cell的高度
*/
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 70;
}
/**
* cell的點(diǎn)擊事件
*/
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//取消選中被點(diǎn)擊的這行
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
@end
實(shí)現(xiàn)效果：
六、補(bǔ)充說明
需要注意的細(xì)節(jié)處理
（1）UIImageView的分類，方形圖片剪為圓形
（2）顏色的處理，文章中推薦的顏色處理框架提供了大量的顏色。
（3）取消選中被點(diǎn)擊的這行cell.
[tableView deselectRowAtIndexPath:indexPath animated:YES];
（4）tableViewCell的封裝
七、跳轉(zhuǎn)
1.跳轉(zhuǎn)到音樂播放界面的方法選擇
?。?）使用模態(tài)跳轉(zhuǎn)（又分為手動(dòng)的和自動(dòng)的）
（2）使用xib并設(shè)置跳轉(zhuǎn)
2.兩種方法的分析
可以使用模態(tài)的方法，添加一個(gè)控制器，讓這個(gè)控制器和音樂播放控制器類進(jìn)行關(guān)聯(lián)，脫線，設(shè)置標(biāo)識符且在cell的點(diǎn)擊事件中執(zhí)行segue即可。
步驟說明：
?。?）在storyboard中新拖入一個(gè)控制器，然后設(shè)置和playing控制器類相關(guān)聯(lián)。
（2）設(shè)置手動(dòng)跳轉(zhuǎn)
（3）設(shè)置segue的標(biāo)識符
（3）跳轉(zhuǎn)代碼處理
不推薦使用模態(tài)的原因如下：
當(dāng)選中一首音樂跳轉(zhuǎn)到播放界面進(jìn)行播放后，如果要跳回到音樂列表界面，那么最常見的做法是在音樂播放控制器上添加一個(gè)按鈕。
當(dāng)點(diǎn)擊的時(shí)候，銷毀這個(gè)控制器（dismissed）。但是，控制器銷毀了那么正在播放的音樂也就隨之不在了。
且由于播放界面控制器的布局是固定的，因此這里選擇的方法是使用xib進(jìn)行創(chuàng)建。
3.選擇的方法
新建一個(gè)xib，對應(yīng)于音樂播放控制器。
xib的結(jié)構(gòu)如下圖所示：
細(xì)節(jié)：控制器只需要?jiǎng)?chuàng)建一次，因此建議使用懶加載，當(dāng)然也可是把播放器設(shè)置為單例
//
// YYMusicsViewController.m
//
#import "YYMusicsViewController.h"
#import "YYMusicModel.h"
#import "MJExtension.h"
#import "YYMusicCell.h"
#import "YYPlayingViewController.h"
@interface YYMusicsViewController ()
@property(nonatomic,strong)NSArray *musics;
@property(nonatomic,strong)YYPlayingViewController *playingViewController;
@end
@implementation YYMusicsViewController
#pragma mark-懶加載
-(NSArray *)musics
{
if (_musics==nil) {
_musics=[YYMusicModel objectArrayWithFilename:@"Musics.plist"];
}
return _musics;
}
-(YYPlayingViewController *)playingViewController
{
if (_playingViewController==nil) {
_playingViewController=[[YYPlayingViewController alloc]init];
}
return _playingViewController;
}
4.xib的內(nèi)部細(xì)節(jié)：
（1）已經(jīng)實(shí)現(xiàn)了約束，用于適配ios6和ios7。
（2）設(shè)置音樂名稱和歌手的View設(shè)置為半透明的，設(shè)置方法如下：
設(shè)置為30%
注意：不要再storyboard中控件的屬性面板上設(shè)置透明度（這樣的話，這個(gè)控件中的子控件也是同樣的透明度）。
不推薦的做法：
（3）按鈕點(diǎn)擊發(fā)光
（4）設(shè)置view隱藏能夠節(jié)省一些性能。（參考代碼）
（5）在切換控制器的過程中，設(shè)置窗口不能點(diǎn)擊（這樣做是為了防止用戶多次連續(xù)的點(diǎn)擊歌曲名會出現(xiàn)的問題）。
5.補(bǔ)充：
項(xiàng)目代碼中拖入了UIView的分類，以方便計(jì)算frame
6.涉及到的代碼
在播放控制器的.h文件中提供一個(gè)公共對象方法接口
YYPlayingViewController.h文件
// YYPlayingViewController.h
#import <UIKit/UIKit.h>
@interface YYPlayingViewController : UIViewController
//顯示控制器
-(void)show;
@end
YYPlayingViewController.m文件
//
// YYPlayingViewController.m
//
#import "YYPlayingViewController.h"
@interface YYPlayingViewController ()
- (IBAction)exit;
@end
@implementation YYPlayingViewController
#pragma mark-公共方法
-(void)show
{
//1.禁用整個(gè)app的點(diǎn)擊事件
UIWindow *window=[UIApplication sharedApplication].keyWindow;
window.userInteractionEnabled=NO;
//2.添加播放界面
//設(shè)置View的大小為覆蓋整個(gè)窗口
self.view.frame=window.bounds;
//設(shè)置view顯示
self.view.hidden=NO;
//把View添加到窗口上
[window addSubview:self.view];
//3.使用動(dòng)畫讓View顯示
self.view.y=self.view.height;
[UIView animateWithDuration:0.25 animations:^{
self.view.y=0;
} completion:^(BOOL finished) {
window.userInteractionEnabled=YES;
}];
}
#pragma mark-內(nèi)部的按鈕監(jiān)聽方法
//返回按鈕
- (IBAction)exit {
//1.禁用整個(gè)app的點(diǎn)擊事件
UIWindow *window=[UIApplication sharedApplication].keyWindow;
window.userInteractionEnabled=NO;
//2.動(dòng)畫隱藏View
[UIView animateWithDuration:0.25 animations:^{
self.view.y=window.height;
} completion:^(BOOL finished) {
window.userInteractionEnabled=YES;
//設(shè)置view隱藏能夠節(jié)省一些性能
self.view.hidden=YES;
}];
}
@end
cell的點(diǎn)擊事件中的處理代碼：
/**
* cell的點(diǎn)擊事件
*/
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//取消選中被點(diǎn)擊的這行
[tableView deselectRowAtIndexPath:indexPath animated:YES];
//調(diào)用公共方法
[self.playingViewController show];
// //執(zhí)行segue跳轉(zhuǎn)
// [self performSegueWithIdentifier:@"music2playing" sender:nil];
}
相關(guān)文章
這篇文章主要介紹了怎樣優(yōu)化今日頭條IOS安裝包，對IOS優(yōu)化感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了iOS音樂后臺播放及鎖屏信息顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
iOS 中根據(jù)屏幕寬度自適應(yīng)分布按鈕的實(shí)例代碼
這篇文章主要介紹了iOS 中根據(jù)屏幕寬度自適應(yīng)分布按鈕的實(shí)例代碼,本文給大家分享兩種方式，代碼簡單易懂，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了解決ios audio無法播放問題，并給大家分享了解決方法，需要的朋友參考一下。2017-11-11
UITableView 實(shí)現(xiàn)汽車品牌（demo）
UITableView堪稱UIKit里面最復(fù)雜的一個(gè)控件了，使用起來不算難，但是要用好并不容易，當(dāng)使用的時(shí)候我們必須要考慮到后臺數(shù)據(jù)的設(shè)計(jì)，tableViewCell的設(shè)計(jì)和重用以及tableView的效率等問題，下面小編通過UITableView 實(shí)現(xiàn)汽車品牌，需要的朋友可以參考下2015-08-08
簡介Objective-C解析XML與JSON數(shù)據(jù)格式的方法
這篇文章主要介紹了Objective-C解析XML與JSON數(shù)據(jù)格式的方法,文中解析JSON包括拼接JSON字符串用到了SBJson這個(gè)解析器,需要的朋友可以參考下2016-01-01
IOS 改變導(dǎo)航欄返回按鈕的標(biāo)題實(shí)例詳解
這篇文章主要介紹了IOS 改變導(dǎo)航欄返回按鈕的標(biāo)題實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
iOS利用AVPlayer播放網(wǎng)絡(luò)音樂的方法教程
最近工作中遇到了一個(gè)需求，需要做一個(gè)在線音樂類的APP，通過一段時(shí)間的努力實(shí)現(xiàn)了，所以這篇文章主要給大家介紹了關(guān)于iOS利用AVPlayer播放網(wǎng)絡(luò)音樂的方法教程，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
這篇文章主要介紹了iOS 解決按鈕背景圖片拉伸問題(推薦),需要的朋友可以參考下2017-10-10
最近發(fā)現(xiàn)還是有很多朋友在問類似解析時(shí)容錯(cuò)問題怎么解決，所以下面這篇文章主要給大家介紹了關(guān)于ios開發(fā)中的容錯(cuò)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們一起來看看吧2018-05-05