Swift实战-豆瓣电台(一)准备

一 准备

我们现在看看我们要做一个什么样的东西

观看地址:http://v.youku.com/v_show/id_XNzI4ODY2Mjky.html

布局

Swift实战-豆瓣电台(一)准备

通过上面这张图我们可以看出整个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": ,
"abbr_en": "My",
"name": "私人兆赫",
"channel_id":
},
{
"name": "华语",
"seq_id": ,
"abbr_en": "",
"channel_id": "",
"name_en": ""
}
]
}

歌曲列表的json数据参考

{
"r": ,
"is_show_quick_start": ,
"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": ,
"length": ,
"subtype": "",
"public_time": "",
"songlists_count": ,
"sid": "",
"aid": "",
"sha256": "5f6ba79e1463c1b54d0be17d090d4ee09d55121a91905ddd2217b0ba458ca7a2",
"kbps": "",
"albumtitle": "The Best of",
"like": ""
},
{
"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": ,
"subtype": "",
"public_time": "",
"songlists_count": ,
"sid": "",
"aid": "",
"sha256": "761fb793fd0571663c469a10bf9fc3bf0e2e3b329ecc5dddad8a2d28fd7ac0c7",
"kbps": "",
"albumtitle": "Assembly",
"like": ""
}
]
}

在下一节,我们将一起分享一下怎么在storyboard中进行布局操作。

上一篇:iOS使用webView加载HTML网页链接简单展示


下一篇:WebView加载HTML图片大小自适应与文章自动换行