CODEWITHSUNDEEP
iosswift3uicollectionviewcell
Rohan Vasishth
Rohan Vasishth

Reputation: 417

Collection View Design Layout Ios

So, I am right now making an app with a collection view layout and was wondering how to go about designing it to make it look nice. I found a picture online that I would like it to look like and was wondering how I should go about making it.

Here is the picture:

enter image description here

The collection view I would like to replicate is the one in the middle.

Here is how my current cells look like:

enter image description here

My Cells after the first answer:

enter image description here

This is my current code for configuring the cells:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "channelCell", for: indexPath) as? ChannelCollectionViewCell
    let channel = channels[indexPath.row]
    // Configure the cell
    cell?.configureCell(channel: channel)
    return cell!
}

My guess is there would be 2 main things to making the deisgn I want which brings me to two specific questions.

  1. How do I make a cell have rounded corners?
  2. How do I space a cell from the side of screen and reduce gaps between cells?

Upvotes: 0

Views: 1489

Answers (1)

Samip Shah
Samip Shah

Reputation: 874

ViewController Class

class YourClass: UIViewController {
    //MARK:-Outlets
    @IBOutlet weak var yourCollectionView: UICollectionView!
  
    //Mark:-Variables
    var cellWidth:CGFloat = 0
    var cellHeight:CGFloat = 0
    var spacing:CGFloat = 12
    var numberOfColumn:CGFloat = 2
    

    //MARK:-LifeCycle
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        yourCollectionView.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
        
        if let flowLayout = yourCollectionView.collectionViewLayout as? UICollectionViewFlowLayout{
            
            cellWidth = (yourCollectionView.frame.width  - (numberOfColumn + 1)*spacing)/numberOfColumn
           cellHeight = 100 //yourCellHeight
            flowLayout.minimumLineSpacing = spacing
            flowLayout.minimumInteritemSpacing = spacing
        }
    }
    
extension YourClass:UICollectionViewDataSource{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? YourCollectionViewCell{
            
         //Configure cell

            return cell
        }
        return UICollectionViewCell()
    }  
}


 extension YourClass:UICollectionViewDelegateFlowLayout{
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: cellWidth, height: cellHeight)
        }
}

CollectionViewCell Class

class YourCollectionViewCell:UICollectionViewCell{

    override func awakeFromNib() {
            super.awakeFromNib()
            self.layer.cornerRadius = 10 //customize yourself
            self.layer.masksToBounds = true
        }
    }

Upvotes: 1

Related Questions