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，这意味着第二个索引。

这是我的自定义单元格类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
    }
}

我的观点heirarchy

输出

希望你有所了解。

Answer 2

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

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