前段時間用Swift練手寫了這么一個demo，后來有朋友希望能出個教程，于是就搗鼓出這么一個系列教程，內(nèi)容包括準(zhǔn)備、界面布局、獲取網(wǎng)絡(luò)數(shù)據(jù)、歌曲列表的展現(xiàn)、播放音樂、視圖跳轉(zhuǎn)傳參及回跳、顯示動畫、播放進(jìn)度與時間以及簡單手勢控制暫停播放九個部分。

Swift實戰(zhàn)-豆瓣電臺（一）準(zhǔn)備

我們現(xiàn)在看看我們要做一個什么樣的東西，觀看地址：http://v.youku.com/v_show/id_XNzI4ODY2Mjky.html

布局

通過上面這張圖我們可以看出整個 demo 有兩個視圖，視圖一用來播放音樂，視圖二用來選擇頻道。

視圖一

ImageView用來顯示音樂的圖片

TableView用來顯示音樂列表

Progress用來顯示播放進(jìn)度

Label用來顯示播放時間

Button用來切換視圖

視圖二

Lbale顯示“選擇頻道”

Tableview用來顯示頻道列表

知識要點

組件：

ImageView

TableView

TableViewCell

Progress

Label

Button

MediaPlayer

知識點：

視圖之間的跳轉(zhuǎn)，傳參，回跳

協(xié)議

異步獲取數(shù)據(jù)

Json解析

動畫效果

豆瓣API

頻道列表

http://www.douban.com/j/app/radio/channels

歌曲列表

http://douban.fm/j/mine/playlist?channel=0

#p#

Swift實戰(zhàn)-豆瓣電臺（二）界面布局

觀看地址：http://v.youku.com/v_show/id_XNzMwMDg4NzAw.html

這節(jié)的內(nèi)容主要是storyboard的操作。

有以下幾個知識點

1.TableView的DataSource與Delegate的設(shè)定。我們將其綁定在 ViewController 上，使之遵循 UITableViewDataSource,UITableViewDelegate 協(xié)議來實現(xiàn)。然后我們實現(xiàn)了兩個函數(shù)，一個返回了 TableView 中行數(shù)。也就是 TableView 里面有多少條數(shù)據(jù)。

func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int{ 
        return 10 
} 

一個返回了TableView的單元格（cell）實例，也就是單元格長什么樣

func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell!{ 
        let cell=UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "douban") 
        return cell 
} 

2. 單元格的識別。在 storyboard 中選中 cell。然后設(shè)置 ldentifier 的值來實現(xiàn)。ldentifier 的值與下列語句中的 reuseIdentifier 的值（”douban”）對應(yīng)。

let cell=UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "douban") 

3. 從頻道列表中返回主界面如果按照主界面跳轉(zhuǎn)到頻道列表的方式則會不斷地產(chǎn)生新的主界面。所以用 dismissViewControllerAnimated 函數(shù)來回跳

self.dismissViewControllerAnimated(true, completion: nil) 

本節(jié)高清視頻及項目文件下載地址：http://pan.baidu.com/s/1sjHd5qX

#p#

Swift實戰(zhàn)-豆瓣電臺（三）獲取網(wǎng)絡(luò)數(shù)據(jù)

觀看地址：http://v.youku.com/v_show/id_XNzMwMzQxMzky.html

這節(jié)內(nèi)容，我們先說了怎么將storyboard中的組件在類中進(jìn)行綁定。然后寫了一個類用來獲取網(wǎng)絡(luò)數(shù)據(jù)，同時定義了一個協(xié)議，在獲取數(shù)據(jù)后進(jìn)行回調(diào)。之后對json數(shù)據(jù)進(jìn)行解析，轉(zhuǎn)化為一個字典。

知識點

異步獲取數(shù)據(jù)

var nsUrl:NSURL=NSURL(string: url) 
var request:NSURLRequest=NSURLRequest(URL: nsUrl) 
NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue(), completionHandler: {(response: NSURLResponse!,data: NSData!,error: NSError!) -> Void) 

NSURL 和 NSURLRequest 都是使用簡單卻難以簡單說明的東西。意會吧。

NSURLConnection.sendAsynchronousRequest 方法中的 NSOperationQueue.mainQueue() 將獲取數(shù)據(jù)這個任務(wù)放進(jìn)主隊列。

completionHandler：完成任務(wù)后函數(shù)調(diào)用。

Json解析

var jsonResult: NSDictionary = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: nil) as NSDictionary 

NSJSONReadingOptions.MutableContainer：設(shè)置返回的對象是可以隨時添加新值的Mutable 類型的對象

協(xié)議

協(xié)議和其他語言中的接口類似，我們在數(shù)據(jù)獲取類中設(shè)置一個遵循該協(xié)議的成員，當(dāng)數(shù)據(jù)獲取完畢后，該成員執(zhí)行某個方法來使用數(shù)據(jù)。我們?nèi)绻挥脜f(xié)議用具體的某個類也是可以的。但就失去了靈活性。

高清視頻及代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p#

Swift實戰(zhàn)-豆瓣電臺（四）歌曲列表的展現(xiàn)

觀看地址 ： http://v.youku.com/v_show/id_XNzMwNDE0OTA4.html

這節(jié)的主要內(nèi)容是如何利用 cell 展現(xiàn)獲取到的數(shù)據(jù)。

首先申明兩個數(shù)組來儲存我們獲取到的數(shù)據(jù)

var tableData:NSArray=NSArray() 
var channelData:NSArray=NSArray() 

 tableData 是主界面上歌曲列表要用的數(shù)據(jù)。所以在 func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) 這個方法中要返回tableData的數(shù)量

func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int{ 
        return tableData.count 
}  

 然后我們把tableData中的數(shù)據(jù)填充到主界面的TableView中

let cell=UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "douban") 
let rowData:NSDictionary=self.tableData[indexPath.row] as NSDictionary 
cell.text=rowData["title"] as String 
cell.detailTextLabel.text=rowData["artist"] as NSString 

接著我們在顯示縮略圖的時候先給一張默認(rèn)的圖片

cell.image=UIImage(named:"detail.jpg") 

然后我們?nèi)プト【W(wǎng)絡(luò)圖片，同樣，是用異步的方式。為了提高性能，我們對獲取的圖片做了一個緩存

var imageCache = Dictionary<String,UIImage>() 

通過圖片的地址來緩存UIImage

let url=rowData["picture"] as String 
let image=self.imageCache[url] as?UIImage 
if !image?{ 
    let imgURL:NSURL=NSURL(string:url) 
    let request:NSURLRequest=NSURLRequest(URL: imgURL) 
    NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue(), completionHandler: {(response:NSURLResponse!,data:NSData!,error:NSError!)->Void in 
        var img=UIImage(data:data) 
        cell.image=img 
        self.imageCache[url]=img 
    }) 
}else{ 
    cell.image=image 
}   

本節(jié)高清視頻和代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p#

Swift實戰(zhàn)-豆瓣電臺（五）播放音樂

觀看地址：http://v.youku.com/v_show/id_XNzMwODM0MzI0.html

在這節(jié)里面，我們簡單學(xué)習(xí)了一下MediaPlayer的使用

引入媒體框架

import MediaPlayer 

聲明一個媒體播放器

var audioPlayer:MPMoviePlayerController=MPMoviePlayerController(); 

播放暫停操作

self.audioPlayer.stop() 
self.audioPlayer.contentURL=NSURL(string:url) 
self.audioPlayer.play() 

 本節(jié)高清視頻及源碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p# 

Swift實戰(zhàn)-豆瓣電臺（六）視圖跳轉(zhuǎn)，傳參及回跳

youku觀看地址：http://v.youku.com/v_show/id_XNzMxMzQ3MDcy.html

要點

在ChannelController里面聲明一個代理

這個代理遵循我們自定義的協(xié)議ChannlePrococol。

遵循這個協(xié)議的主界面類在注入后有一個回調(diào)方法onChangeChanne將所選擇的頻道返回。

prepareForSegue方法

這個方法是在準(zhǔn)備跳轉(zhuǎn)的時候執(zhí)行的。在這里面我們能拿到將要跳轉(zhuǎn)的視圖類segue.destinationViewController，這時候就能設(shè)置這個類的代理，并將數(shù)據(jù)傳過去了

高清視頻與代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p#

Swift實戰(zhàn)-豆瓣電臺（七）顯示動畫

youku觀看地址：http://v.youku.com/v_show/id_XNzMxODQzNDIw.html

這是一個很酷的動畫效果。特別是數(shù)據(jù)多的時候

知識點

在單元格（Cell）顯示方法中設(shè)置動畫

func tableView(tableView: UITableView!, willDisplayCell cell: UITableViewCell!, forRowAtIndexPath indexPath: NSIndexPath!){ 
        cell.layer.transform = CATransform3DMakeScale(0.1, 0.1, 1) 
        UIView.animateWithDuration(0.25, animations: { 
            cell.layer.transform=CATransform3DMakeScale(1, 1, 1) 
            }) 
} 

willDisplayCell 顧名思義。就是在Cell顯示之前。設(shè)置cell的層（layer）的變換（transform）為CATransform3DMakeScale做一個縮放動畫。X，y方向的縮放從0.1到1

高清視頻與代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p#

Swift實戰(zhàn)-豆瓣電臺（八）播放進(jìn)度與時間

視頻觀看地址：http://www.tudou.com/programs/view/4mEtz8S72k0/?resourceId=399000367_06_02_99

這節(jié)主要內(nèi)容是 NSTimer，UIProgressView，MPMoviePlayerController 類的使用

NSTimer

實例化：

timer=NSTimer.scheduledTimerWithTimeInterval(0.4, target: self, selector: "onUpdate", userInfo: nil, repeats: true)// 實例化后即啟動定時器，0.4秒后開始第一次觸發(fā) 

0.4 是間隔時間；target 是發(fā)送對象；selector 是觸發(fā)的方法；userInfo 此參數(shù)可以為 nil，當(dāng)定時器失效時，由你指定的對象保留和釋放該定時器；repeats 是否重復(fù)。

立即觸發(fā)

fire() 

 停止

invalidate() 

 UIProgressView

設(shè)置進(jìn)度條進(jìn)度

progressView.progress=0.0 

 帶動畫

progressView.setProgress(p, animated: true) 

MPMoviePlayerController

audioPlayer.currentPlaybackTime 已經(jīng)播放的時間（秒）

audioPlayer.duration 總時間（秒）

秒鐘分鐘算法

總時間除以60的余數(shù)就是秒鐘

總時間除以60的商就是分鐘

因為我們的展現(xiàn)形式是00:00

所以當(dāng)數(shù)字小于10的時候進(jìn)行字符串拼接補0例如01，02

本節(jié)高清視頻和代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

#p# 

Swift實戰(zhàn)-豆瓣電臺（九）簡單手勢控制暫停播放

全屏清晰觀看地址：http://www.tudou.com/programs/view/tANnovvxR8U/

這節(jié)我們主要講 UITapGestureRecognizer 和 MPMoviePlayerController

知識點

UITapGestureRecognizer

關(guān)聯(lián)storyboard上的UITapGestureRecognizer

@IBOutlet var tap:UITapGestureRecognizer=nil  //注意要設(shè)置為nil 

增加手勢識別

addGestureRecognizer(tap) 

移除手勢識別

removeGestureRecognizer(tap) 

關(guān)聯(lián)Action

@IBAction func onTap(recognizer: UITapGestureRecognizer) 

通過 recognizer.view 可以判斷點擊了哪個組件

@IBAction func onTap(recognizer: UITapGestureRecognizer){ 
        if recognizer.view==btnPlay { 
            btnPlay.hidden=true 
            audioPlayer.play() 
            btnPlay.removeGestureRecognizer(tap) 
            iv.addGestureRecognizer(tap) 
        }else if recognizer.view==iv { 
            btnPlay.hidden=false 
            audioPlayer.pause() 
            btnPlay.addGestureRecognizer(tap) 
            iv.removeGestureRecognizer(tap) 
        } 
} 

MPMoviePlayerController

播放

play() 

暫停

pause() 

本節(jié)高清視頻和代碼下載地址：http://pan.baidu.com/s/1sjHd5qX

原帖地址：http://www.cnblogs.com/sandal1980/p/3812715.html  作者：sandal1980（博客）