引言

在前面的博客中我们已经介绍了使用媒体资源数据的获取，以及自定义的媒体资源选择列表页。在一个功能完整的媒体选择器中，预览自然是必不可少的，本篇博客我们就来实现一个资源的预览功能，并且实现列表和预览的数据联动效果。

预览功能实现

预览功能包括图片预览和视频预览，并且在预览的同时最好的情况就是我们仍然知道当前正在预览的资源是否已经被选中了，或者说在预览的同时我们仍然可以选择和取消选中。这就需要我们在数据上花点心思。

预览UI

预览页面我们需要创建一个新的视图控制器，然后采用一个全屏的UICollectionView来实现，它的每个元素也都是和屏幕相同大小，具体代码如下：

    /// 添加列表func addCollectionView()  {let layout = UICollectionViewFlowLayout()layout.scrollDirection = .horizontallayout.itemSize = CGSize(width: CS_SCREENWIDTH, height: CS_SCREENHIGHT)layout.minimumLineSpacing = 0.0layout.minimumInteritemSpacing = 0.0collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)collectionView.backgroundColor = .whitecollectionView.delegate = selfcollectionView.dataSource = selfcollectionView.isPagingEnabled = trueself.view.addSubview(collectionView)collectionView.snp.makeConstraints { make inmake.top.equalToSuperview()make.leading.trailing.bottom.equalToSuperview()}collectionView.register(PHMediaPreViewCell.self, forCellWithReuseIdentifier: NSStringFromClass(PHMediaPreViewCell.self))}

预览cell的元素内容几乎和列表相同，需要有选中标签，也需要有视频时长等等，具体代码如下：

class PHMediaPreViewCell: UICollectionViewCell {/// 图片private let imageView = UIImageView()/// 选中标签private var selectTag = UIButton()/// 播放按钮private var playButton = UIButton()/// 资源模型private var mediaModel: PHMediaModel?/// 资源管管理类var mediaManager:PHMediaManager?/// 选中或取消回调var selectTagTouchBlock: ((PHMediaModel) -> Void)?....
}

包括它的标签选中逻辑，和画面渲染逻辑也都大同小异，只是布局的样式略有不同，另外它需要加载的图片是原图，而不是缩略图，具体的渲染代码如下：

    /// 渲染数据func renderData(mediaModel: PHMediaModel, mediaManager: PHMediaManager) {self.mediaModel = mediaModelself.mediaManager = mediaManagerplayButton.isHidden = mediaModel.mediaType != .videolet duration = Int(mediaModel.videoDuration)let title = secondsToHourMinuteSecond(seconds: duration)playButton.setTitle(title, for: .normal)self.mediaManager?.fetchThumbnail(asset: mediaModel.asset!, completion: {[weak self] (image) inguard let self = self else { return }self.imageView.image = image})}

预览数据

为了让缩略图列表和预览列表的数据可以联动，在两个页面控制器中我们都是用PHMediaManager来管理显示的媒体数据列表和选中的媒体数据列表。

另外需要定义index来指定当我们从列表页面进入预览页面时的资源索引。

还定义了一个选择的回调，用来给列表页面同步UI。

    /// 资源管理类var mediaManager: PHMediaManager!/// 当前indexvar currentIndex: Int = 0/// 选择回调var selectMediaBlock: (() -> Void)?

当进入预览页面，首先同步索引，将预览的图片定位到我们在列表中点击的媒体资源，代码如下：

    override func viewDidAppear(_ animated: Bool) {super.viewDidAppear(animated)collectionView.scrollToItem(at: IndexPath(row: currentIndex, section: 0), at: .centeredHorizontally, animated: false)}

之后通过mediaManager中的displayMediaModels来渲染列表数据：

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {return mediaManager.displayMediaModels.count}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let cell = collectionView.dequeueReusableCell(withReuseIdentifier: NSStringFromClass(PHMediaPreViewCell.self), for: indexPath) as! PHMediaPreViewCelllet mediaModel = mediaManager.displayMediaModels[indexPath.row]cell.renderData(mediaModel: mediaModel, mediaManager: mediaManager)let index = mediaManager.selectedMediaModels.firstIndex(of: mediaModel) ?? -1cell.index = indexcell.selectTagTouchBlock = { [weak self] mediaModel inself?.touchMediaModel(mediaModel: mediaModel)}return cell}

关于媒体资源选中和取消选中的回调，和列表中的处理完全一致，只是多了一个block调用通知列表刷新UI：

    /// 媒体资源选中和取消的回调private func touchMediaModel(mediaModel:PHMediaModel) {if mediaModel.isSelected {mediaModel.isSelected = falseif let index = mediaManager.selectedMediaModels.firstIndex(of: mediaModel) {mediaManager.selectedMediaModels.remove(at: index)}} else {if mediaManager.selectedMediaModels.count >= mediaManager.maxSelectedCount {print("最多选中\(mediaManager.maxSelectedCount)个")return}mediaModel.isSelected = truemediaManager.selectedMediaModels.append(mediaModel)}collectionView.reloadData()selectMediaBlock?()}

使用预览

这样我们就需要把原来的列表点击事件做一下调整，点击后让它显示预览画面，代码如下：

    /// 媒体点击private func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath,mediaModel:PHMediaModel) {self.showPreView(index: indexPath.row - actionArray.count)}

    // 显示预览private func showPreView(index:Int) {let preVC = PHMediaPreViewController()preVC.mediaManager = mediaManagerpreVC.currentIndex = indexpreVC.modalPresentationStyle = .fullScreenself.present(preVC, animated: false, completion: nil)preVC.selectMediaBlock = { [weak self]  inself?.collectionView.reloadData()}}

结语

有了前面媒体列表功能做基础，预览的功能实现起来显得轻松了许多，只不过是将加载缩略图替换为了加载原图。

需要注意的一点，列表和预览必须公用通一个mediaManager这样才能保证数据的一致。

另外本篇博客我们没有涉及到视频资源的预览，因为它将会设计AVKit或者AV Foundation框架中的内容，在我的其它博客专栏中曾经有过介绍，有兴趣的可以查看一下。