Swift UICollectionViewCells too spread apart - ios

Question

I'm trying to fit 5 UICollectionViewCell's on a single row, and while there seems to be enough horizontal space, there's too much space between each cell. I can't figure out how to reduce it. Here is some pseudo-code along with what it looks like:
class ViewController: UIViewController {
let my_view = MyView()
override func viewDidLoad() {
super.viewDidLoad()
self.my_view.delegate = self
self.my_view.translatesAutoresizingMaskIntoConstraints = false
self.scroll_view.addSubview(self.my_view)
self.my_view.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
self.my_view.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20).isActive = true
self.my_view.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
self.my_view.bottomAnchor.constraint(equalToConstant: 100).isActive = true
}
}
extension ViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCell
return cell
}
}
class MyView: UIView {
var delegate: ViewController! {
didSet {
self.collection_view.delegate = self.delegate
self.collection_view.dataSource = self.delegate
}
}
var collection_view: UICollectionView!
init() {
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
layout.itemSize = CGSize(width: 60, height: 40)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
self.collection_view = UICollectionView(frame: .zero, collectionViewLayout: layout)
self.collection_view.register(AgeCell.self, forCellWithReuseIdentifier: "cell")
self.collection_view.backgroundColor = .clear
self.collection_view.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(self.collection_view)
self.collection_view.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
self.collection_view.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
self.collection_view.topAnchor.constraint(equalTo: self.title_label.bottomAnchor, constant: 15).isActive = true
self.collection_view.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
}
class MyCell: UICollectionViewCell {
let button: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = UIColor(r: 0, g: 0, b: 0, a: 100)
button.setTitle("Test", for: .normal)
button.layer.borderColor = UIColor.EVO_blue.cgColor
button.layer.borderWidth = 1.0
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.button)
self.button.frame = self.frame
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
This is the width of the device, and only 3 show up:
What can I do to get all 5 cells to appear? Thanks.

Answer 1

Use UICollectionViewDelegateFlowLayout, You need to return the correct size in sizeForItemAt method. I'm trying to write the logic to resolve you problem.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (Globals.screenWidth - 60.0) / 5
return CGSize(width: width, height: 80.0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(0, 5, 0, 5)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0.0
}
try this.

Answer 2

The problem was that in my MyCell class, I was writing
self.button.frame = self.frame
Whereas I should have written
self.button.frame = self.bounds

Answer 3

Use the UICollectionViewDelegateFlowLayout method for manage the cell size, LineSpacing and InterItemSpacing :-
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath:
IndexPath) -> CGSize {
return CGSize // return size of cell according to you
}