Zero horizontal space between cells in UICollectionView not working - ios

Question

I am new to iOS development and cannot seem to figure out why my collection view is spacing out. It almost seems as though a "margin-right" as in CSS has been applied to each cell. I have set the "Min Spacing" for cells and for lines to zero but the following is still occurring...
Screen shot of issue that is occurring
I have purposely set the collection view's background color to blue, the cell's background color to red and the label's border color to black to try to see what is what. The objective is to not see any of the 'blue' (collection view background), at all. Upon configuring the collection view, I resize the cell's width to fit the label's intrinsic width but it seems that the other cells' x-axis location stays the same... I need all the cells to come together. Any help would be greatly appreciated!
Current CollectionViewController code...
import Foundation
import UIKit
class HomeViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
var menu = [
("NEWS"),
("NEIGHBORHOODS"),
("CULTURE"),
("DEVELOPMENT"),
("TRANSPORTATION"),
("CITIES")
]
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Testing"
self.navigationController?.navigationBarHidden = true
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return menu.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("UnderMenuCell", forIndexPath: indexPath) as! UnderMenuCollectionViewCell
cell.underMenuLabel.text = menu[indexPath.row]
let label_width = cell.underMenuLabel.intrinsicContentSize().width + 23
cell.underMenuLabel.layer.zPosition = 1000000
cell.underMenuLabel.layer.borderWidth = 2
cell.underMenuLabel.layer.borderColor = UIColor.blackColor().CGColor
cell.frame.size.width = label_width
return cell
}
}

Answer 1

You might need to set up layout attributes for the cells to specify their width:
override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
let attributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
attributes.frame = yourFrameHere
attributes.size = yourSizeHere
return attributes
}
Also have you tried setting a breakpoint at cell.frame.size.width = label_width to see what width is actually being set?

Answer 2

I ended up figuring out a way that worked perfectly:
import Foundation
import UIKit
class HomeViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var underMenuCollection: UICollectionView!
var menu = [
("NEWS"),
("NEIGHBORHOODS"),
("CULTURE"),
("DEVELOPMENT"),
("TRANSPORTATION"),
("CITIES")
]
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Testing"
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(true)
let scrollToIndexPath = NSIndexPath(forItem: 2, inSection: 0)
self.underMenuCollection.scrollToItemAtIndexPath(scrollToIndexPath, atScrollPosition: UICollectionViewScrollPosition.CenteredHorizontally, animated: true)
}
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return menu.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("UnderMenuCell", forIndexPath: indexPath) as! UnderMenuCollectionViewCell
cell.underMenuLabel.text = menu[indexPath.row]
return cell
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let size: CGSize!
let testLabel = UILabel()
let labelText = menu[indexPath.row]
testLabel.text = labelText
testLabel.font = UIFont(name: "Avenir Next Condensed", size: 17)
testLabel.hidden = true
size = CGSize(width: testLabel.intrinsicContentSize().width + 13, height: self.underMenuCollection.frame.height)
return size
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
self.underMenuCollection.scrollToItemAtIndexPath(indexPath, atScrollPosition: UICollectionViewScrollPosition.CenteredHorizontally, animated: true)
}
}
So what happens is I create a hidden label that never evens gets added to the superview, populate it with the text to calculate the intrinsic width and then set the CGSize. It works perfectly...
Picture of collection view to the left
Picture of collection view to the right
The most important part in all this was the have equal spacing between all the cells dynamically based on the width of the string.