我们现在看看我们要做一个什么样的东西
布局 通过上面这张图我们可以看出整个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中进行布局操作。