CODEWITHSUNDEEP
iosswiftuicollectionview
James Ikeler
James Ikeler

Reputation: 121

Swift - How could I use uicollectionview to make this?

Hi I wanted to achieve the below design using swift .Please find image below for reference. like this.

The only way I can think about do it is using a UICollectionView with a scrollbar but the UICollectionView needed custom spacing padding which made the scrollbar stop in the middle of the object.

Upvotes: 0

Views: 214

Answers (2)

Rajan Maheshwari
Rajan Maheshwari

Reputation: 14571

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() {
        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 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() {
        super.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.

Upvotes: 1

Frankie
Frankie

Reputation: 11928

That bottom part looks like a UIScrollView with isPagingEnabled set to true. The 3 dots at the bottom is a UIPageControl.

Use UIScrollViewDelegate and scrollViewDidEndDecelerating to manage your other content changes.

Upvotes: 0

Related Questions