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:
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:
I have set the insets for collection view like:
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:
- 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.
- 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!
Use storyboard Autoloayout. You surely have constraints conflictions.