Swift編程實戰指南--豆瓣電臺

作者：sandal1980 2014-07-29 11:20:28

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

Swift實戰-豆瓣電臺（一）準備

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

布局

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

視圖一

ImageView用來顯示音樂的圖片

TableView用來顯示音樂列表

Progress用來顯示播放進度

Label用來顯示播放時間

Button用來切換視圖

視圖二

Lbale顯示“選擇頻道”

Tableview用來顯示頻道列表

知識要點

組件：

ImageView

TableView

TableViewCell

Progress

Label

Button

MediaPlayer

知識點：

視圖之間的跳轉，傳參，回跳

協議

異步獲取數據

Json解析

動畫效果

豆瓣API

頻道列表

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

歌曲列表

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

#p#

Swift實戰-豆瓣電臺（二）界面布局

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

這節的內容主要是storyboard的操作。

有以下幾個知識點

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

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。然后設置 ldentifier 的值來實現。ldentifier 的值與下列語句中的 reuseIdentifier 的值（”douban”）對應。

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

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

self.dismissViewControllerAnimated(true, completion: nil)

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

#p#

Swift實戰-豆瓣電臺（三）獲取網絡數據

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

這節內容，我們先說了怎么將storyboard中的組件在類中進行綁定。然后寫了一個類用來獲取網絡數據，同時定義了一個協議，在獲取數據后進行回調。之后對json數據進行解析，轉化為一個字典。

知識點

異步獲取數據

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() 將獲取數據這個任務放進主隊列。

completionHandler：完成任務后函數調用。

Json解析

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

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

協議

協議和其他語言中的接口類似，我們在數據獲取類中設置一個遵循該協議的成員，當數據獲取完畢后，該成員執行某個方法來使用數據。我們如果不用協議用具體的某個類也是可以的。但就失去了靈活性。

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

#p#

Swift實戰-豆瓣電臺（四）歌曲列表的展現

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

這節的主要內容是如何利用 cell 展現獲取到的數據。

首先申明兩個數組來儲存我們獲取到的數據

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

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

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

然后我們把tableData中的數據填充到主界面的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

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

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

然后我們去抓取網絡圖片，同樣，是用異步的方式。為了提高性能，我們對獲取的圖片做了一個緩存

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 
}

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

#p#

Swift實戰-豆瓣電臺（五）播放音樂

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

在這節里面，我們簡單學習了一下MediaPlayer的使用

引入媒體框架

import MediaPlayer

聲明一個媒體播放器

var audioPlayer:MPMoviePlayerController=MPMoviePlayerController();

播放暫停操作

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

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

#p#

Swift實戰-豆瓣電臺（六）視圖跳轉，傳參及回跳

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

要點

在ChannelController里面聲明一個代理

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

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

prepareForSegue方法

這個方法是在準備跳轉的時候執行的。在這里面我們能拿到將要跳轉的視圖類segue.destinationViewController，這時候就能設置這個類的代理，并將數據傳過去了

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

#p#

Swift實戰-豆瓣電臺（七）顯示動畫

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

這是一個很酷的動畫效果。特別是數據多的時候

知識點

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

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顯示之前。設置cell的層（layer）的變換（transform）為CATransform3DMakeScale做一個縮放動畫。X，y方向的縮放從0.1到1

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

#p#

Swift實戰-豆瓣電臺（八）播放進度與時間

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

這節主要內容是 NSTimer，UIProgressView，MPMoviePlayerController 類的使用

NSTimer

實例化：

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

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

立即觸發

fire()

停止

invalidate()

UIProgressView

設置進度條進度

progressView.progress=0.0

帶動畫

progressView.setProgress(p, animated: true)

MPMoviePlayerController

audioPlayer.currentPlaybackTime 已經播放的時間（秒）

audioPlayer.duration 總時間（秒）

秒鐘分鐘算法

總時間除以60的余數就是秒鐘

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

因為我們的展現形式是00:00

所以當數字小于10的時候進行字符串拼接補0例如01，02

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

#p#

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

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

這節我們主要講 UITapGestureRecognizer 和 MPMoviePlayerController

知識點

UITapGestureRecognizer

關聯storyboard上的UITapGestureRecognizer

@IBOutlet var tap:UITapGestureRecognizer=nil  //注意要設置為nil

增加手勢識別

addGestureRecognizer(tap)

移除手勢識別

removeGestureRecognizer(tap)

關聯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()

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

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

責任編輯：black.dot 來源： cnblogs

Swift 豆瓣電臺編程實戰