James Ikeler James Ikeler - 3 months ago 19
iOS Question

Swift - How could I use uicollectionview to make this?

Hi I wanted to make this using swift
like this.The only way I can think about do it is using a uicollectionview with a scrollbar but the collectionview needed custom spacing padding which made the scrollbar stop in the middle of the object.


Its better to make a UICollectionView view with cell width and height the same as UICollectionView's width and height and take a UIView inside it in order to achieve custom space padding which will contain your label and text.

I just created a Sample for you.

The main idea already suggested to take a view inside the Custom Collection View cell in order to achieve custom space padding.

I have taken two IBOutlets in ViewController, a myCollectionView and a pageControl.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var pageControl: UIPageControl!
    @IBOutlet weak var myCollectionView: UICollectionView!
    override func 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)

scrollViewDidEndDecelerating will decide in which index you are and you can update the above mapView accordingly. A page number 0 indicates its the first cell (indexPath.row = 0). As you slide to second index, it will print 1.0 which means the second index.

This is my Custom Cell class of UICollectionViewCell

import UIKit

class CustomCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var cellView: UIView!

    override func awakeFromNib() {

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

My view heirarchy

enter image description here

And the output

enter image description here

Hope you get some idea.