近期在做個(gè)播放器，期望將播放列表用彈出視圖的形式展現(xiàn)出來(lái)，達(dá)到以下效果：

1.點(diǎn)擊列表按鈕，彈出播放列表；
2.點(diǎn)擊播放列表中的歌曲，播放這個(gè)歌曲；
3.點(diǎn)擊播放列表以外的區(qū)域，關(guān)閉播放列表；

效果圖如下：

彈出視圖.gif

分析：

這里的關(guān)鍵是：讓播放列表以外的所有區(qū)域響應(yīng)手勢(shì)。
這就需要在播放列表視圖下放一個(gè)空視圖覆蓋住原有的界面，響應(yīng)手勢(shì)操作。

實(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)
    
    // 定義手勢(shì)動(dòng)作并關(guān)聯(lián)手勢(shì)觸發(fā)的行為
    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.dismissPlayListTableView(_:)))
    
    // 手勢(shì)需要遵循的代理：UIGestureRecognizerDelegate
    tapGestureRecognizer.delegate = self

    // 設(shè)置空視圖的大小，打開(kāi)交互，添加手勢(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)
    // 必須寫(xiě)在 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)前播放的歌曲，返回序號(hào)
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)手勢(shì)
    if CGRectContainsPoint(playListTableView.frame, touchPoint) {
        return false
    } else {
        return true
    }
}

到此，就可以實(shí)現(xiàn)效果圖中的彈出效果了。