Delegate 練習 自定義tableView 使用UITableViewDelegate,UITableViewDataSource 音樂播放器[01]

階段成果展示

最近蠻喜歡聽John Mayer “Where the Light Is ” Live 來做做看音樂播放器

之後想要增加評分機制儲存資料

歌曲資料部分

建立出歌曲的結構 包含

名稱, 歌手 ,專輯名, 圖片,評分

建立歌手 array名為 songs 這邊自訂方法 loadSong去新增

關於使用xib自定義tableviewCell

新增自定義cell newFile-Cocoa Touch Class-TableViewCell -XIB file 打勾

XIB file 打勾方便之後編輯

建立完cell 之後我們可以在MusicTable.xib中編輯所需要的元件 lable,image

cell 放上所需要label , image

連結到 MusicTableViewCell.swift

將id:命名MusicTableViewCell

將tableView 拉入 viewcontroller

將tableView連線到viewcontroller 並遵從UITableViewDelegate,UITableViewDataSource

將delegate設為 self(ViewController)

關於TableView使用xib

在viewDidLoad 註冊cell為自訂xib

self.tableview.register(UINib(nibName: "ChatLeftTableViewCell", bundle: nil), forCellReuseIdentifier: "chatLeftTableCell")

實現tableView 要實作兩個方法

numberOfRowInSection && cellForRowAt

numberOfRowInSection

回傳歌曲的數量

cellForRowAt

cell的部分指派cell為自訂xib

let cell=tableView.dequeueReusableCell(withIdentifier: "MusicTableViewCell", for: indexPath) as! MusicTableViewCell //指定cell 並轉型自訂TableViewCell
cell.songImageView.image=UIImage(named: songs[indexPath.row].imageName) //修改Image
cell.singer.text=songs[indexPath.row].artistName //修改IBOutlet數值
cell.songName.text=songs[indexPath.row].name
cell.musicAlbum.text=songs[indexPath.row].albumName
cell.songRank.text="\(songs[indexPath.row].rating)"

程式碼

g7huway0310/MusicPlayer

參考

利用 AVPlayer 播放音樂音效

如何讓 Static Cells 自動計算高度

模仿 iOS 的 Music App 製作周興哲Eric專屬播放電台(包含進階功能）