【问题标题】:Interaction between UIPageViewController and it's Thumbnails CollectionViewUIPageViewController 和它的 Thumbnails CollectionView 之间的交互
【发布时间】:2019-04-07 01:45:36
【问题描述】:

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

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

我的收藏查看文件

protocol ThumbnailViewDelegate: class {

func didSelectThumbnail(at index: 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
}

}

【问题讨论】:

  • 您提出了一个新颖的界面。现在你需要弄清楚如何实现它。我建议为您的页面视图控制器和集合视图设置一个包含子视图控制器的视图控制器,然后创建逻辑以在它们之间同步。
  • 感谢您的建议,将尝试这样做
  • 我创建了 DetailViewController,其中包含 PageViewController 作为子视图,而我的缩略图 Collection View 是 PageViewController 的子视图,但我仍然无法弄清楚如何在它们之间进行同步
  • 所以你需要定义页面视图控制器和集合视图控制器用来相互通信的协议,给它们相互指针,并在用户切换图像时发送消息。
  • 在我的缩略图视图中使用“ func didSelectThumbnail(at index: Int) 创建协议,然后在集合视图中 (didSelectItemAt indexPath: IndexPath) 像这样定义我的委托:delegate?.didSelectThumbnail(at: indexPath.项目)。他们确认了我的 MainPageViewController 到这个协议,目前我的 PageViewController 中有每个缩略图的当前索引。如何将此索引发送到 PageViewController 的每个视图控制器,以便用户可以看到与缩略图相同的主图像?

标签: swift uicollectionview uipageviewcontroller


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-09-06
    • 2016-11-11
    • 2016-05-15
    • 2015-03-31
    • 2014-06-28
    • 2015-07-17
    • 1970-01-01
    相关资源
    最近更新 更多