Swift-如何使用uicollectionview做到这一点？

Question

嗨，我想使用swift实现以下设计。请在下面找到图片以供参考。 。

我能想到的唯一的办法做到这一点是使用UICollectionView有滚动条，但UICollectionView需要自定义的间隔填充这在对象的中间所做的滚动停止。

Answer 1

最好使一个UICollectionView视图的单元格宽度和高度与UICollectionView's宽度和高度相同，并在其中放入一个UIView ，以实现将包含标签和文本的自定义空格填充。

我刚刚为您创建了一个示例 。

已经提出了主要想法，建议在“ Custom Collection View”单元中进行查看，以实现自定义空间填充。

我在ViewController拍摄了两个IBOutlet，一个myCollectionView和一个pageControl 。

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 Custom Cell类

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管理其他内容更改。