近期在做個(gè)播放器，期望將播放列表用彈出視圖的形式展現(xiàn)出來奸鬓，達(dá)到以下效果：
1.點(diǎn)擊列表按鈕焙畔，彈出播放列表；
2.點(diǎn)擊播放列表中的歌曲串远，播放這個(gè)歌曲宏多；
3.點(diǎn)擊播放列表以外的區(qū)域，關(guān)閉播放列表澡罚；
效果圖如下：
彈出視圖.gif
分析：
這里的關(guān)鍵是：讓播放列表以外的所有區(qū)域響應(yīng)手勢伸但。
這就需要在播放列表視圖下放一個(gè)空視圖覆蓋住原有的界面，響應(yīng)手勢操作留搔。
實(shí)現(xiàn)：
1.定義空視圖和表視圖
let emptyView = UIView()
let playListTableView = UITableView()
2.彈出播放列表視圖
func showPlayListTableView() {
// 定義播放列表視圖的位置和大小
let originPlayList = CGPoint(x: 0.3 * self.view.frame.width, y: 0.2 * self.view.frame.height)
let sizePlayList = CGSize(width: 0.66 * self.view.frame.width, height: 0.66 * self.view.frame.height)
// 定義手勢動(dòng)作并關(guān)聯(lián)手勢觸發(fā)的行為
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.dismissPlayListTableView(_:)))
// 手勢需要遵循的代理：UIGestureRecognizerDelegate
tapGestureRecognizer.delegate = self
// 設(shè)置空視圖的大小更胖，打開交互，添加手勢
emptyView.frame = self.view.frame
emptyView.userInteractionEnabled = true
emptyView.addGestureRecognizer(tapGestureRecognizer)
// 設(shè)置 播放列表視圖 的背景圖片隔显、大小却妨、透明度
playListTableView.backgroundView = UIImageView(image: UIImage(named: "playListBackground.jpg"))
playListTableView.frame = CGRect(origin: originPlayList, size: sizePlayList)
playListTableView.alpha = 0.8
// 表視圖需要遵循代理：UITableViewDelegate, UITableViewDataSource
playListTableView.delegate = self
playListTableView.dataSource = self
// 設(shè)置正在播放的歌曲顯示為選中狀態(tài)
// 必須寫在 delegate 和 dataSource 之后才有效果
playListTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: getCurrentSongIndex(), inSection: 0), animated: false, scrollPosition: UITableViewScrollPosition.None)
// 加載視圖
emptyView.addSubview(playListTableView)
self.view.addSubview(emptyView)
}
3.showPlayListTableView()中調(diào)用的方法
// 關(guān)閉播放列表
func dismissPlayListTableView(sender: UITapGestureRecognizer) {
playListTableView.removeFromSuperview()
emptyView.removeFromSuperview()
}
// 獲取當(dāng)前播放的歌曲，返回序號
func getCurrentSongIndex() -> Int {
let title = self.titleLabel.text
var index = 0
for tempSong in songList {
if (tempSong.songTitle == title) {
index = songList.indexOf(tempSong)!
}
}
return index
}
4.加載播放列表視圖的資源
// 設(shè)置表視圖的區(qū)域數(shù)量
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
// 設(shè)置表視圖的行數(shù)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return songList.count
}
// 設(shè)置表視圖的單元格
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
// 樣式：Subtitle
let cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "cellId")
// 設(shè)置單元格顯示的文字內(nèi)容荣月、顏色等
cell.textLabel?.text = songList[indexPath.row].songTitle
cell.detailTextLabel?.text = songList[indexPath.row].singer
cell.backgroundColor = UIColor.clearColor()
cell.textLabel?.textColor = UIColor.lightGrayColor()
cell.detailTextLabel?.textColor = UIColor.lightGrayColor()
// 設(shè)置單元格被選擇后的背景視圖范圍和顏色
cell.selectedBackgroundView = UIView(frame: cell.frame)
cell.selectedBackgroundView?.backgroundColor = UIColor.darkGrayColor()
return cell
}
// 設(shè)置選擇單元格后進(jìn)行的操作
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
// 設(shè)置當(dāng)前的歌曲為選擇的歌曲
setCurrentSong(indexPath.row)
// 播放
audioPlayer.play()
// 修改圖標(biāo)狀態(tài)
self.playButton.setImage(UIImage(named: "pause.png"), forState: UIControlState.Normal)
}
5.限制dismissPlayListTableView的響應(yīng)區(qū)域
func gestureRecognizer(gestureRecognizer: UIGestureRecognizer, shouldReceiveTouch touch: UITouch) -> Bool {
let touchPoint = touch.locationInView(emptyView)
// 如果touchPoint在播放列表的視圖范圍內(nèi)管呵，則不響應(yīng)手勢
if CGRectContainsPoint(playListTableView.frame, touchPoint) {
return false
} else {
return true
}
}
到此，就可以實(shí)現(xiàn)效果圖中的彈出效果了哺窄。
