CODEWITHSUNDEEP
swiftxcodelayoutuicollectionview
Moodz
Moodz

Reputation: 77

How to center the collectionview cells of 1 row in the center, What am i doing worng

What am i doing wrong please helpI have in my StoryBoard a Collection view with leading and trailing to superview 20 from each side.

Inside the collection view i want to show 7 Circular cells ( days of week ) centered in the collection view.

I want the cells to be with Height = 30 and width = 30 ( given in storyBoard )

class DailyTimeLimitVC: BaseViewController {


@IBOutlet weak var collectionView: UICollectionView!    

var identifier = "daysCell"
private var spacing:CGFloat = 20

override func viewDidLoad() {
    super.viewDidLoad()
    self.setupUI()
}
    
private func setupUI(){
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.allowsMultipleSelection = true
} 

extension DailyTimeLimitVC: UICollectionViewDelegate {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
}

extension DailyTimeLimitVC: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath) as! DaysCollectionViewCell

    switch indexPath.row {
    case 0:
        cell.label.text = Week.Monday.rawValue
    case 1:
        cell.label.text = Week.Tuesday.rawValue
    case 2:
        cell.label.text = Week.Wednessday.rawValue
    case 3:
        cell.label.text = Week.Thursday.rawValue
    case 4:
        cell.label.text = Week.Friday.rawValue
    case 5:
        cell.label.text = Week.Saturday.rawValue
    case 6:
        cell.label.text = Week.Sunday.rawValue
    default:
        return cell
    }
    return cell
}

}

extension DailyTimeLimitVC: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let numberOfItemsPerRow:CGFloat = 7
        let spacingBetweenCells:CGFloat = 5

    let totalSpacing = (2 * self.spacing) + ((numberOfItemsPerRow - 1) * spacingBetweenCells) //Amount of total spacing in a row

    if let collection = self.collectionView{
        let width = (collection.bounds.width - totalSpacing)/numberOfItemsPerRow
        return CGSize(width: width, height: width)
    }else{
        return CGSize(width: 0, height: 0)
    }
}

}

And in my collectionViewCell Class

class DaysCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var holderView: UIView!
@IBOutlet weak var label: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    self.holderView.layer.masksToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()

    self.setCircularView()
}

func setCircularView() {
    self.holderView.layer.cornerRadius = CGFloat(roundf(Float(self.holderView.frame.size.width / 2.0)))
}
}

Upvotes: 0

Views: 512

Answers (1)

Frankenstein
Frankenstein

Reputation: 16341

Try setting the minimumInteritemSpacingForSectionAt and minimumLineSpacingForSectionAt to the appropriate spacing to fix your issue.

extension DailyTimeLimitVC: UICollectionViewDelegateFlowLayout {
    //...
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 0 }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { spacing }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: spacing)
    }
}

Since you're calculating the sizeForItemAt by substracting the spacings from all sides this should work. But if you're going for a constant height/width it would be best to calculate the spacing that needs to set instead of setting it as a constant as well.

Upvotes: 1

Related Questions