近期在做个播放器，期望将播放列表用弹出视图的形式展现出来，达到以下效果：
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
}
}
到此，就可以实现效果图中的弹出效果了。
