Swift - 我怎样才能使用uicollectionview来做到这一点？

Question

嗨，我想实现使用swift下面的设计。请查找下面的图像以供参考。 。

我可以考虑的唯一方法是使用带滚动条的UICollectionView，但UICollectionView需要自定义间距填充，这使得滚动条停在对象中间。

Answer 1

其更好地做一个UICollectionView观点与细胞的宽度和高度一样UICollectionView's的宽度和高度，并采取UIView里面，以实现自定义的空间填充其中将包含您的标签和文字。

我刚刚为你创建了一个Sample。

主要想法已经建议采取自定义集合视图单元格内的视图，以实现自定义空间填充。

我在ViewController，myCollectionView和pageControl中拍摄了两个IBOutlets。

import UIKit 

class ViewController: UIViewController { 

    @IBOutlet weak var pageControl: UIPageControl! 
    @IBOutlet weak var myCollectionView: UICollectionView! 
    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 
    } 
} 

extension ViewController:UICollectionViewDataSource,UICollectionViewDelegateFlowLayout { 

    //MARK:- CollectionView Datasource 
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return 3 
    } 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell 
     return cell 
    } 

    //MARK:- CollectionView Delegate 
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
     return CGSize(width: collectionView.frame.size.width, height: collectionView.frame.size.height) 
    } 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 
     return 0 
    } 

    //MARK:- ScrollView Delegates 
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { 
     let pageWidth = myCollectionView.frame.size.width; 
     let page = floor((myCollectionView.contentOffset.x - pageWidth/2)/pageWidth) + 1 
     pageControl.currentPage = Int(page) 
     print(page) 
    } 
} 

scrollViewDidEndDecelerating将决定你在哪个索引并可以相应地更新上述mapView。页号0表示它的第一个单元格（indexPath.row = 0）。当你滑动到第二个索引时，它将打印1.0，这意味着第二个索引。

这是我的自定义Cell类的UICollectionViewCell

import UIKit 

class CustomCollectionViewCell: UICollectionViewCell { 

    @IBOutlet weak var cellView: UIView! 

    override func awakeFromNib() { 
     super.awakeFromNib() 

     //To make corners round 
     cellView.layer.cornerRadius = 10.0 
    } 
} 

我的看法层次结构

和输出

希望你得到一些我数据包络分析。

Answer 2

该底部部分看起来像UIScrollView与isPagingEnabled设置为true。底部的3个点是UIPageControl。

使用UIScrollViewDelegate和scrollViewDidEndDecelerating来管理您的其他内容更改。