UIPageViewController和它的缩略图CollectionView之间的交互

时间:2018-11-02 19:42:27

标签: swift uicollectionview uipageviewcontroller

在我的应用程序中,使用UIPageViewController来显示完整尺寸的图像,并且在屏幕底部有缩略图CollectionView,每个缩略图都代表UIPageViewController完整尺寸的图像。我的问题是当用户选择不同的缩略图集合视图单元格时如何实现UIpageViewController的分页? 如果有人知道如何实现此功能,请通过代码或建议或链接帮助我。谢谢

我相信我必须使用UICollectionView的didSelectItemAtIndexPath方法,但不太确定如何最好地做到这一点,请多加帮助。

我的收藏夹查看文件

protocol ThumbnailViewDelegate: class {

func didSelectThumbnail(索引为Int)

}     类ThumbnailView:UIView,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,PhotoCollectionViewModelPresenter {

weak var delegate: ThumbnailViewDelegate?

var assets: [PHAsset] = []

private let viewModel = PhotoCollectionViewModel()
//private var myViewModel: DetailViewModel!

private let imageDownloader = ImageDownloader(targetSize: CGSize(width: 80, height: 80 ))

//var selectedImage: UIImage?

lazy var thumbnailCollectionView: UICollectionView = {

    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal

    let view =  UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
    view.translatesAutoresizingMaskIntoConstraints = false
    view.isPagingEnabled = true
    view.delegate = self
    view.dataSource = self
    view.isPrefetchingEnabled = false
    view.register(ThumbnailCollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    let cellImageView = ThumbnailCollectionViewCell()
    view.addSubview(cellImageView.imageView)
   view.backgroundColor = UIColor.white
    return view
}()


let  imageView: ThumbnailCollectionViewCell = {
    let view = ThumbnailCollectionViewCell()
    view.contentMode = .scaleAspectFit
    view.translatesAutoresizingMaskIntoConstraints = false

    return view

}()




override init(frame: CGRect) {
    super.init(frame: frame)


    self.addSubview(thumbnailCollectionView)


    thumbnailCollectionView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    thumbnailCollectionView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    thumbnailCollectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    thumbnailCollectionView.heightAnchor.constraint(equalToConstant: 100).isActive = true



}



required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}


func propagateReload() {
    thumbnailCollectionView.reloadData()
}


func numberOfSections(in collectionView: UICollectionView) -> Int {

    // #warning Incomplete implementation, return the number of sections
    return 1
}


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return assets.count


}



func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath) as! ThumbnailCollectionViewCell

    cell.layer.masksToBounds = true
    cell.layer.cornerRadius = 8

        let image = assets[indexPath.item]
        imageDownloader.download(asset: image) { [weak self] (image) in
           self?.configureCell(indexPath: indexPath, image: image)



    }



    return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    return CGSize(width: 80.0, height: 80.0)
}






func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    delegate?.didSelectThumbnail(at: indexPath.item)



}


func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {

}

func configureCell(indexPath: IndexPath, image: UIImage) {
    guard let cell = thumbnailCollectionView.cellForItem(at: indexPath) as? ThumbnailCollectionViewCell else {
        return
    }
    cell.configure(image: image)
}

}

PageViewController文件

MainPageViewController类:UIPageViewController {

var mainImageIndex: Int?

var pageViewModels: [DetailPageViewModel]!

var viewModel: DetailViewModel!

var collectionAssets: [PHAsset] = []

var selectedAsset: UIImage?

  private var pendingIndex: Int?


    // Collection View
    lazy var collectionView: ThumbnailView = {
        let view = ThumbnailView()
        view.delegate = self
        view.assets = self.collectionAssets
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()


//MARK: - Create VC

lazy  var pageViewControllersArray: [PageViewController] = {
    return pageViewModels.map {
        return PageViewController(viewModel: $0)
    }



}()


var currentIndex:Int {
    get {
        return pageViewControllersArray.index(of: self.viewControllers!.first! as! PageViewController)!
    }

    set {
        guard newValue >= 0,
            newValue < pageViewControllersArray.count else {
                return
        }

        let vc = pageViewControllersArray[newValue]
        let direction:UIPageViewController.NavigationDirection = newValue > currentIndex ? .forward : .reverse
        self.setViewControllers([vc], direction: direction, animated: true, completion: nil)
    }
}

覆盖func viewDidLoad(){

super.viewDidLoad()


dataSource = self
delegate = self

view.backgroundColor = UIColor.white
setViewControllers([pageViewControllersArray[mainImageIndex ?? 0]], direction: .forward, animated: true, completion: nil)

self.view.addSubview(collectionView)
setupCollectioViewAutoLayout()



}



func setupCollectioViewAutoLayout(){

    collectionView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    collectionView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    collectionView.heightAnchor.constraint(equalToConstant: 100).isActive = true
}

func viewWillAppear(){     super.viewWillAppear(true)

}

}

扩展MainPageViewController:UIPageViewControllerDelegate,UIPageViewControllerDataSource,ThumbnailViewDelegate {

func didSelectThumbnail(at index: Int) {


}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {


    guard let viewController = viewController as? PageViewController else {return nil}



    if let index = pageViewControllersArray.index(of: viewController){


        if index > 0{

            return pageViewControllersArray[index - 1]

        }

    }
    return  nil

}


func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {

    guard let viewController = viewController as? PageViewController else {return nil}


    if let index = pageViewControllersArray.index(of: viewController){

        if index < pageViewControllersArray.count - 1{

            return pageViewControllersArray[index + 1]
        }

    }
    return nil
}

func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
    return pageViewControllersArray.count
}

func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {

    return currentIndex
}

}

1 个答案:

答案 0 :(得分:0)

调用select方法时,在整个屏幕上显示另一个页面视图或页面视图控制器。