Swift - 弹出视图的简单实现

近期在做个播放器，期望将播放列表用弹出视图的形式展现出来，达到以下效果：

1.点击列表按钮，弹出播放列表；
2.点击播放列表中的歌曲，播放这个歌曲；
3.点击播放列表以外的区域，关闭播放列表；

效果图如下：

弹出视图.gif

分析：

这里的关键是：让播放列表以外的所有区域响应手势。
这就需要在播放列表视图下放一个空视图覆盖住原有的界面，响应手势操作。

实现：

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)
    
    // 定义手势动作并关联手势触发的行为
    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.dismissPlayListTableView(_:)))
    
    // 手势需要遵循的代理：UIGestureRecognizerDelegate
    tapGestureRecognizer.delegate = self

    // 设置空视图的大小，打开交互，添加手势
    emptyView.frame = self.view.frame
    emptyView.userInteractionEnabled = true
    emptyView.addGestureRecognizer(tapGestureRecognizer)
    
    // 设置 播放列表视图 的背景图片、大小、透明度
    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
    
    // 设置正在播放的歌曲显示为选中状态
    // 必须写在 delegate 和 dataSource 之后才有效果
    playListTableView.selectRowAtIndexPath(NSIndexPath.init(forRow: getCurrentSongIndex(), inSection: 0), animated: false, scrollPosition: UITableViewScrollPosition.None)

    // 加载视图
    emptyView.addSubview(playListTableView)
    self.view.addSubview(emptyView)
}

3.showPlayListTableView()中调用的方法

// 关闭播放列表
func dismissPlayListTableView(sender: UITapGestureRecognizer) {
    playListTableView.removeFromSuperview()
    emptyView.removeFromSuperview()
}

// 获取当前播放的歌曲，返回序号
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.加载播放列表视图的资源

// 设置表视图的区域数量
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}

// 设置表视图的行数
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return songList.count
}

// 设置表视图的单元格
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    // 样式：Subtitle
    let cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "cellId")
    
    // 设置单元格显示的文字内容、颜色等
    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()

    // 设置单元格被选择后的背景视图范围和颜色
    cell.selectedBackgroundView = UIView(frame: cell.frame)
    cell.selectedBackgroundView?.backgroundColor = UIColor.darkGrayColor()
    
    return cell
}

// 设置选择单元格后进行的操作
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    // 设置当前的歌曲为选择的歌曲
    setCurrentSong(indexPath.row)
    // 播放
    audioPlayer.play()
    // 修改图标状态
    self.playButton.setImage(UIImage(named: "pause.png"), forState: UIControlState.Normal)
}

5.限制dismissPlayListTableView的响应区域

func gestureRecognizer(gestureRecognizer: UIGestureRecognizer, shouldReceiveTouch touch: UITouch) -> Bool {
    let touchPoint = touch.locationInView(emptyView)
    
    // 如果touchPoint在播放列表的视图范围内，则不响应手势
    if CGRectContainsPoint(playListTableView.frame, touchPoint) {
        return false
    } else {
        return true
    }
}

到此，就可以实现效果图中的弹出效果了。