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

 

頻道列表的json數據參考

{
    "channels": [
        {
            "name_en": "Personal Radio",
            "seq_id": 0,
            "abbr_en": "My",
            "name": "私人兆赫",
            "channel_id": 0
        },
        {
            "name": "華語",
            "seq_id": 0,
            "abbr_en": "",
            "channel_id": "1",
            "name_en": ""
        }
    ]
}

 

 

歌曲列表的json數據參考

{
    "r": 0,
    "is_show_quick_start": 0,
    "song": [
        {
            "album": "/subject/7153475/",
            "picture": "http://img3.douban.com/lpic/s7022222.jpg",
            "ssid": "cd19",
            "artist": "Herman's Hermits",
            "url": "http://mr3.douban.com/201406201304/a687b5d793bb3233e243f05a3e502b20/view/song/small/p2087018.mp3",
            "company": "Warner",
            "title": "Smile Please",
            "rating_avg": 0,
            "length": 165,
            "subtype": "",
            "public_time": "2004",
            "songlists_count": 0,
            "sid": "2087018",
            "aid": "7153475",
            "sha256": "5f6ba79e1463c1b54d0be17d090d4ee09d55121a91905ddd2217b0ba458ca7a2",
            "kbps": "64",
            "albumtitle": "The Best of",
            "like": "0"
        },
        {
            "album": "/subject/1947603/",
            "picture": "http://img3.douban.com/lpic/s4458282.jpg",
            "ssid": "b80e",
            "artist": "Pompeii",
            "url": "http://mr3.douban.com/201406201304/f8ea9c7ba0793030c8c486152d51527e/view/song/small/p2087210.mp3",
            "company": "Warner",
            "title": "Ten Hundred Lights",
            "rating_avg": 3.81894,
            "length": 255,
            "subtype": "",
            "public_time": "2006",
            "songlists_count": 0,
            "sid": "2087210",
            "aid": "1947603",
            "sha256": "761fb793fd0571663c469a10bf9fc3bf0e2e3b329ecc5dddad8a2d28fd7ac0c7",
            "kbps": "64",
            "albumtitle": "Assembly",
            "like": "0"
        }
    ]
}

 

 

在下一節，我們將一起分享一下怎么在storyboard中進行布局操作。