今天第一次接觸IOS開發(fā)的UI部分，之前學(xué)Objective-C的時候一直在模擬的使用Target-Action回調(diào)模式，今天算是真正的用了一次。為了熟悉一下基本控件的使用方法，和UI部分的回調(diào)，下面開發(fā)了一個特別簡易的音頻播放器，來犒勞一下自己這一天的UI學(xué)習(xí)成果。在用到UI的控件時如果很好的理解之前博客在Objective-C中的Target-Action回調(diào)模式，感覺控件的用法會很順手。下面的簡易播放器沒有用到多高深的技術(shù)，只是一些基本控件和View的使用。

話不多說簡單的介紹一下今天的音頻播放器。在播放器中我們用到了UIProgressView(進(jìn)度條)來顯示音頻的播放進(jìn)度，用UILabel顯示播放的當(dāng)前時間和總時間。用UIImageView和UIImagel來加入圖片，用UISegmentedControl來控制播放和暫停，用滑動器UISlider來控制音頻的音量。上面的執(zhí)行組件都是UIKit中的組件，我們要定時的獲取音頻的播放時間，我們還要用到NSTimer來定時獲取CurrentTime。播放器怎么能少的了關(guān)鍵的組件呢，我們還需要引入框架AVFoundation.framework。我們會用到組件AVAudioPlayer來播放我們的音頻。

下面是簡易音頻播放器的截圖：

點擊播放會播放默認(rèn)歌曲，同時顯示播放進(jìn)度和播放當(dāng)前時間，下面的slider可以調(diào)節(jié)音頻的聲音大小。

1.在我們的XCode中新建一個SingleView的iPhone的工程，為了更好的理解和配置控件和view,就不使用storyboard來進(jìn)行控件的拖拽啦。在我們新建工程下面的ViewController.m編寫我們的代碼，為了隱藏我們音頻播放器使用的控件和控件回調(diào)的方法，我們在ViewController.m中用延展來對我們的組件和方法進(jìn)行聲明。代碼如下：

#import 'ViewController.h'@interface ViewController ()//添加背景用的ImageView@property (strong, nonatomic) UIImageView *backView;//播放進(jìn)度條@property (strong, nonatomic) UIProgressView *progress;//選項卡按鈕，賦值播放和暫停@property (strong, nonatomic) UISegmentedControl * segment;//slider，用滑動器來設(shè)置音量的大小@property (strong, nonatomic) UISlider *slider;//timer，來更新歌曲的當(dāng)前時間@property (strong, nonatomic) NSTimer *timer;//顯示時間的lable@property (strong, nonatomic) UILabel *label;//加入圖片，中間的圖片@property (strong, nonatomic) UIImageView *imageView;//聲明播放器，來播放我們的音頻文件@property (strong, nonatomic) AVAudioPlayer *player;//在暫停和播放時回調(diào)此按鈕-(void)tapSegment;//更新歌曲時間-(void)time;//改變聲音大小-(void) changeVo;@end

2.上面是我們的延展部分，來進(jìn)行我們的組件的聲明和方法的聲明，具體的實現(xiàn)就寫在本文件中的@implementation中，我們把組件的實現(xiàn)和配置寫在-(void) viewDidLoad;方法中，該方法會在主視圖加載完畢后執(zhí)行。在編寫實現(xiàn)代碼之前我們要把我們用到的媒體文件拖入到我們的Project中，下面是具體代碼的實現(xiàn)。

1).下面的代碼是為我們的應(yīng)用添加背景圖片，也就是我們上面圖片中的黑色背景圖片，在初始化ImageView的時候我們知道view的位置和大小CGRectMack(x, y, width, height); 用Image來通過圖片文件的名稱來載入我們的圖片，把圖片視圖插入到主視圖的最底層，同時設(shè)置其index來實現(xiàn)，代碼如下。

/*添加背景圖片*///初始化ImageView,并設(shè)置大小self.backView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 20, 320, 480)];//加載圖片，我們的圖片名為backgroundUIImage *backImage = [UIImage imageNamed:@'background'];//添加背景圖片到ImageViewself.backView.image = backImage;//把ImageView添加到view的最底層[self.view insertSubview:self.backView atIndex:0];

2).初始化我們的進(jìn)度條并設(shè)置進(jìn)度條的位置和大小，對進(jìn)度值初始化為零。同時把進(jìn)度條通過addSubView加入到我們的主視圖中

/*實例化進(jìn)度條,并添加到主視圖*/self.progress = [[UIProgressView alloc] initWithFrame:CGRectMake(30, 60, 240, 10)];[self.view addSubview:self.progress];self.progress.progress = 0;

3).添加中間的圖片，和添加背景圖片相似，在這就不贅述了代碼如下：

//添加中間的圖片 self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(80, 90, 160, 150)]; UIImage *image = [UIImage imageNamed:@'image.png']; self.imageView.image = image; [self.view addSubview:self.imageView];

4).初始化我們的segment, 在初始化segment的同時，我們通過便利初始化方法來指定有幾個按鍵和每個按鍵中的值。配置的時候我們可以通過tintColor來設(shè)置我們segment的顏色，通過Target-Action來注冊segment要回調(diào)的方法，同時指定回調(diào)的事件，我們設(shè)置的時UIControlEventValueChange,就是當(dāng)segment的selectedSegmentIndex改變時,調(diào)用我們注冊的方法。代碼如下：

//添加segmentControlself.segment = [[UISegmentedControl alloc] initWithItems:@[@'Play', @'Pause']];self.segment.frame = CGRectMake(110, 255, 100, 40);self.segment.tintColor = [UIColor whiteColor];//注冊回調(diào)方法，在segment的值改變的時候回調(diào)注冊的方法[self.segment addTarget:self action:@selector(tapSegment) forControlEvents:UIControlEventValueChanged];[self.view addSubview:self.segment];

5).下面的代碼是要初始化并配置我們的音頻播放器組件，配置的時候指定我們音頻所在路徑的url,并且回寫播放的錯誤代碼如下

//配置播放器NSBundle *bundle = [NSBundle mainBundle];NSString * path = [bundle pathForResource:@'music' ofType:@'mp3'];NSURL *musicURL = [NSURL fileURLWithPath:path];NSError *error;self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:musicURL error:&error];if (self.player == nil) { NSLog(@'error = %@', [error localizedDescription]);}

6).設(shè)置定時器，并注冊我們要間隔調(diào)用的方法。下面的定時器是1秒中重復(fù)調(diào)用我們當(dāng)前view中的time方法，在time方法中我們會獲取當(dāng)前音頻的當(dāng)前播放時間，并在lable中顯示，稍后會提到

//設(shè)置時間，每一秒鐘調(diào)用一次綁定的方法self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(time) userInfo:nil repeats:YES];

7).添加我們的音量控制組件，并綁定當(dāng)slider的值改變是調(diào)用哪一個方法。同時指定slider的最大值和最小值，代碼如下：

//添加sliderself.slider = [[UISlider alloc] initWithFrame:CGRectMake(100,300, 120 , 50)];[self.slider addTarget:self action:@selector(changeVo) forControlEvents:UIControlEventValueChanged];[self.view addSubview:self.slider];//設(shè)置slider最小值和最大值self.slider.minimumValue = 1;self.slider.maximumValue = 10;

3.組件初始化和配置完畢，接下來我們就得實現(xiàn)各控件要回調(diào)的方法。

1).當(dāng)slider的值改變是我們要調(diào)用的方法如下，就是要設(shè)置一下音頻播放器的聲音，代碼如下：

//改變聲音-(void)changeVo{ self.player.volume = self.slider.value;}

2).定時器定時調(diào)用的方法如下，在此方法中我們要獲取音頻的總時間和當(dāng)前播放時間，并把秒轉(zhuǎn)換成分鐘（下面的代碼沒有使用NSDateFormat來轉(zhuǎn)換時間，讀者可以用自己的方法來轉(zhuǎn)換），轉(zhuǎn)換完以后在label中顯示當(dāng)前時間和總時間，代碼如下

//更新時間-(void) time{ //獲取音頻的總時間 NSTimeInterval totalTimer = self.player.duration; //獲取音頻的當(dāng)前時間 NSTimeInterval currentTime = self.player.currentTime; //根據(jù)時間比設(shè)置進(jìn)度條的進(jìn)度 self.progress.progress = (currentTime/totalTimer); //把秒轉(zhuǎn)換成分鐘 NSTimeInterval currentM = currentTime/60; currentTime = (int)currentTime%60; NSTimeInterval totalM = totalTimer/60; totalTimer = (int)totalTimer%60; //把時間顯示在lable上 NSString *timeString = [NSString stringWithFormat:@'%02.0f:%02.0f|%02.0f:%02.0f',currentM, currentTime, totalM,totalTimer]; self.label.text = timeString;}

3).下面是segment要回調(diào)的方法根據(jù)segment的selectedSegmentIndex來設(shè)置播放器的播放還是停止，代碼如下：

//segment所回調(diào)的方法-(void) tapSegment{ int isOn = self.segment.selectedSegmentIndex; if (isOn == 0) {[self.player play]; } else {[self.player pause]; }}

以上是整個簡易播放器的代碼，以為功能特別簡單所以代碼也不多。主要通過上面的簡易播放器來熟悉一下IOS開發(fā)中控件和view的使用流程，筆者也在一直學(xué)習(xí)，水平有限，歡迎批評指正。