UICollectionView not displaying correct number of items - ios

Question

I'm making a calendar app and naturally, I want there to be 7 days in a week. This is how it currently displays with 5 days in a week:
Here is my storyboard. I've made sure that there is room for 7 items to fit the way I want them to. One thing that could be related to my problem is when I add more items (cells), they aren't of the same identifier (Calendar) as the first one.
And here is my code for the view controller:
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource{
#IBOutlet weak var Calendar: UICollectionView!
#IBOutlet weak var MonthLabel: UILabel!
let Months = ["January","February","March","April","May","June","July",
"August","September","October","November","December"]
let DaysOfMonth = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"]
let DaysInMonths = [31,28,31,30,31,30,31,31,30,31,30,31]
var currentMonth = String()
override func viewDidLoad() {
super.viewDidLoad()
currentMonth = Months[month]
MonthLabel.text = "\(currentMonth) \(year)"
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return DaysInMonths[month]
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Calendar", for: indexPath) as! DateCollectionViewCell
cell.backgroundColor = UIColor.clear
cell.DateLabel.text = "\(indexPath.row + 1)"
return cell
}
}
So to recap: I want there to be 7 items in a row in my collection view, but there are currently 5. I have tried changing the spacing in the storyboard, as well as the identifier for the Collection View Cell.

Answer 1

Try specifying the size for item at indexPath, to do that make sure you have set self.calendar.delegate = self and then add an extension to your ViewController
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: self.calendar.bounds.size.width / 7, height: your_cell_height)
}
}
This will work assuming you haven't specified any spacing between the cells, if you have specified spacing between the cells make sure you account it as well in your calculation.
For example: if you want spacing between cells (horizontally) be 10 calculation will change to
(self.calendar.bounds.size.width / 7) - 60) why 60? ( 6 spaces between 7 cells each of size 10 so 6 * 10)
Finally, why is it showing 7 cells in XIB and not in real device/ simulator? XIB's screen width might be different from the device screen width, you can drag Xib to required width to accommodate as many cells as you want horizontally, that does not guarantee that when app runs in real device it gets the similar real estate.
Its a flow layout, so content will flow, when it realizes there is no more space to accommodate more cells in a row, content (cell) flows to next row hope that clarifies the issue
P.S: Never name your variables with Pascal casing (first letter being capital) example #IBOutlet weak var Calendar: UICollectionView! always use Camel casing change it to #IBOutlet weak var calendar: UICollectionView!