iosswiftuicollectionviewcelluicollectionviewflowlayoutuiedgeinsets

How can I center Buttons within UICollectionViewFlowLayout for two columns? Might there be a more efficient way to solve this?

I am implementing a menu, which holds severals buttons within two columns and I want the button text to be centered in the middle for every cell.

This is what it looks like right now:

enter image description here

This is my code for ViewController:

import SideMenu
import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var collectionView: UICollectionView!
    var button_titles : [String] = ["Action", "KnowHow", "Beginner", "Expert", "Level Up", "What is", "How to use", "Home"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Prana Power"
        collectionView.delegate = self
        collectionView.dataSource = self
        
        self.collectionView.register(UINib(nibName: "ButtonCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "ButtonMainMenu")
    }
      
    override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         //collection.reloadData()
     }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
        let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)
        let size:CGFloat = (collectionView.frame.size.width - space) / 2.0
        return CGSize(width: size, height: size)
    }
    

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return button_titles.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ButtonMainMenu", for: indexPath) as? ButtonCollectionViewCell else { return UICollectionViewCell()}
        cell.btnClick.setTitle(button_titles[indexPath.item], for: .normal)
        cell.btnClick.titleLabel!.font = UIFont(name: "HelveticaNeue-Thin", size: 20)
        cell.backgroundColor = UIColor.lightGray
        return cell
    }
    
    
    }

So the button is centered within in my storyboard for ButtonCollectionViewCell as one can see in the debug view hierarchy, but not within the outer cell:

enter image description here

I have set the insets for collection view like:

enter image description here

I tried to use the second answer from this post as solution:

func centerItemsInCollectionView(cellWidth: Double, numberOfItems: Double, spaceBetweenCell: Double, collectionView: UICollectionView) -> UIEdgeInsets {
    let totalWidth = cellWidth * numberOfItems
    let totalSpacingWidth = spaceBetweenCell * (numberOfItems - 1)
    let leftInset = (collectionView.frame.width - CGFloat(totalWidth + totalSpacingWidth)) / 2
    let rightInset = leftInset
    return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
}

When I run the code afterwards it seems to have no effect on my view. I tried to alter the function to

    func centerItemsInCollectionView(cellWidth: Double, numberOfItems: Double, spaceBetweenCell: Double, collectionView: UICollectionView) -> UIEdgeInsets {
        return UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
    }

to check if it has any effects at all, but after relaunching the app everything is the same.

After reading this post I got the hint, that I might have to set minimumInteritemSpacing. I tried to set flowayout?.minimumInteritemSpacing = 6 within my collectionView function for returning CGSize without any effect.

So my two questions are:

  1. Is there any easier way to achieve my desired layout? Since I am rather knew to iOS and swift I am not that familiar with all the possibilities to create layouts.
  2. How can I fix my Problem within the current code?

Please let me now, if you have any tips, solutions or insights on this issue. Thanks in advance!

Solution

  • Use storyboard Autoloayout. You surely have constraints conflictions.

         |
-  Button -
     |