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