swiftuicollectionviewuikit
Undefined behaviour of UICollectionView cells
I'm making a calendar in which you can select a time range. The design of the calendar is made in such a way that at the start and end date of the selected period a circle appears around the number, and the intermediate dates of the range are painted in the same color with an opacity of 0.5.
I created a data structure consisting of CelendarMonth (for the header with the name of the month) which contains a CalendarDate array.
I populate the data structure for a collection in generateDates() and update the collection after clicking on one of the cells in the updateSelection() method
This code has several problems (all of which can be seen in the attached screenshot):
- When you click on the cells of the collection, the numbers randomly disappear from the calendar
- Sometimes when you select a range, a circle may appear in an intermediate cell (which should only be for the start and end date of the range)
- Although in
UICollectionViewFlowLayoutthe space between cells is set to0, after every two cells we can notice a minimum space
You can run this code by pasting the listing I provided into the ViewController file of a new Xcode project
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
private var months = [CalendarMonth]()
private var selectedRange: (start: Date?, end: Date?) = (nil, nil)
private let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 2
let size = floor(UIScreen.main.bounds.width / 7)
layout.itemSize = CGSize(width: size, height: size)
layout.headerReferenceSize = CGSize(width: UIScreen.main.bounds.width, height: 40)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(CalendarDateCell.self, forCellWithReuseIdentifier: CalendarDateCell.identifier)
collectionView.register(CalendarHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: CalendarHeaderView.identifier)
return collectionView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(collectionView)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.frame = view.bounds
generateDates()
}
private func generateDates() {
let calendar = Calendar.current
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "MMMM yyyy"
let currentDate = Date()
guard let startDate = calendar.date(byAdding: .month, value: 0, to: currentDate),
let endDate = calendar.date(byAdding: .month, value: 12, to: currentDate) else {
return
}
var date = startDate
var currentMonth: CalendarMonth?
while date <= endDate {
let components = calendar.dateComponents([.year, .month, .day], from: date)
if let firstOfMonth = calendar.date(from: DateComponents(year: components.year, month: components.month, day: 1)) {
let monthTitle = dateFormatter.string(from: firstOfMonth)
if currentMonth == nil || currentMonth!.title != monthTitle {
if var existingMonth = currentMonth {
months.append(existingMonth)
}
currentMonth = CalendarMonth(title: monthTitle, dates: [])
}
}
currentMonth?.dates.append(CalendarDate(date: date, isSelected: false))
date = calendar.date(byAdding: .day, value: 1, to: date)!
}
if var existingMonth = currentMonth {
months.append(existingMonth)
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return months.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return months[section].dates.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarDateCell.identifier, for: indexPath) as! CalendarDateCell
let date = months[indexPath.section].dates[indexPath.item]
cell.configure(with: date)
return cell
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: CalendarHeaderView.identifier, for: indexPath) as! CalendarHeaderView
header.configure(with: months[indexPath.section].title)
return header
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let selectedDate = months[indexPath.section].dates[indexPath.item].date
if selectedRange.start == nil || selectedRange.end != nil {
selectedRange = (start: selectedDate, end: nil)
} else if let start = selectedRange.start, selectedDate >= start {
selectedRange.end = selectedDate
}
updateSelection()
}
private func updateSelection() {
guard let start = selectedRange.start else { return }
for monthIndex in 0..<months.count {
for dateIndex in 0..<months[monthIndex].dates.count {
if let end = selectedRange.end {
months[monthIndex].dates[dateIndex].isSelected = months[monthIndex].dates[dateIndex].date >= start && months[monthIndex].dates[dateIndex].date <= end
months[monthIndex].dates[dateIndex].isStartRange = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isEndRange = months[monthIndex].dates[dateIndex].date == end
} else {
months[monthIndex].dates[dateIndex].isSelected = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isStartRange = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isEndRange = false
}
}
}
collectionView.reloadData()
}
}
struct CalendarMonth {
let title: String
var dates: [CalendarDate]
}
class CalendarHeaderView: UICollectionReusableView {
static let identifier = "CalendarHeaderView"
private let titleLabel: UILabel = {
let label = UILabel()
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 16)
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(titleLabel)
titleLabel.frame = bounds
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configure(with title: String) {
titleLabel.text = title
}
}
struct CalendarDate {
let date: Date
var isSelected: Bool
var isStartRange: Bool = false
var isEndRange: Bool = false
}
class CalendarDateCell: UICollectionViewCell {
static let identifier = "CalendarDateCell"
private let dateLabel: UILabel = {
let label = UILabel()
label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(dateLabel)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
dateLabel.frame = contentView.bounds
}
func configure(with date: CalendarDate) {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "d"
dateLabel.text = dateFormatter.string(from: date.date)
contentView.backgroundColor = .clear
if date.isSelected {
if date.isStartRange || date.isEndRange {
dateLabel.textColor = .white
dateLabel.backgroundColor = .blue
dateLabel.layer.cornerRadius = dateLabel.bounds.width / 2
dateLabel.layer.masksToBounds = true
} else {
dateLabel.textColor = .black
contentView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
}
} else {
dateLabel.backgroundColor = .clear
dateLabel.layer.cornerRadius = 0
dateLabel.layer.masksToBounds = false
}
}
}
This is how the bugs look like:
Solution
As Larme pointed out, you need to account for cell reuse when setting its appearance.
So, instead of:
if date.isSelected {
// set selected colors
} else {
// set not selected colors
}
It's easier to do this:
// start with appearance for "not in selected range"
contentView.backgroundColor = .clear
dateLabel.backgroundColor = .clear
dateLabel.layer.cornerRadius = 0
dateLabel.layer.masksToBounds = false
dateLabel.textColor = .black
// now, if the date IS in the selected range, update the appearance
if date.isSelected {
if date.isStartRange || date.isEndRange {
dateLabel.textColor = .white
dateLabel.backgroundColor = .blue
dateLabel.layer.cornerRadius = dateLabel.bounds.width / 2
dateLabel.layer.masksToBounds = true
} else {
dateLabel.textColor = .black
contentView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
}
}
As for the after every two cells we can notice a minimum space...
Note that the property:
.minimumInteritemSpacing = 0
is minimum, not absolute.
Running your code on an iPhone 15 Pro, for example, the view width (we shouldn't be using UIScreen.main.bounds.width) is 393.0 ... you are then setting itemSize width to:
let size = floor(UIScreen.main.bounds.width / 7)
// size now == 56.0
but... the collection view width is 393.0, and 56.0 * 7.0 == 392.0 -- which means UIKit will "add space" between some of the cells.
To get around that, we can update the frame.size.width of the collection view to size * 7.0. Unfortunately, that leaves a 1-point space on the right-side:
So, we could center the collection view ... in this case, we'd set collectionView.frame.origin.x to 0.5 -- which is not a whole number... and UIKit will try to give us 1.5-pixel space on each side, but since it cannot draw "partial pixels" we actually end up with 1-pixel on the left and 2-pixels on the right:
which looks a little more "balanced."
If we really want full "edge-to-edge" coverage:
we could calculate the cellSize and the number of cells that need to be 1-point wider:
layout.estimatedItemSize = CGSize(width: cellSize, height: cellSize)
let totalCellsWidth: CGFloat = cellSize * 7.0
numberOfPlusOneCells = Int(collectionView.frame.width - totalCellsWidth)
conform to flow layout delegate:
class ViewController: UIViewController,
UICollectionViewDelegate, UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout {
and implement sizeForItemAt:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// account for non-even cell widths
if indexPath.item % 7 < numberOfPlusOneCells {
return .init(width: cellSize + 1.0, height: cellSize)
}
return .init(width: cellSize, height: cellSize)
}
Here is your complete code, with the above changes:
class ViewController: UIViewController,
UICollectionViewDelegate, UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout {
private var months = [CalendarMonth]()
private var selectedRange: (start: Date?, end: Date?) = (nil, nil)
// track the current view width, so we can update the collection view properties
// when layout gives us the correct size
private var curViewWidth: CGFloat = 0.0
// these will be set in viewDidLayoutSubviews()
private var cellSize: CGFloat = 0.0
private var numberOfPlusOneCells: Int = 0
private let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 2
// sizes will be updated in viewDidLayoutSubviews()
let size = floor(UIScreen.main.bounds.width / 7)
layout.estimatedItemSize = CGSize(width: size, height: size)
layout.headerReferenceSize = CGSize(width: UIScreen.main.bounds.width, height: 40)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(CalendarDateCell.self, forCellWithReuseIdentifier: CalendarDateCell.identifier)
collectionView.register(CalendarHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: CalendarHeaderView.identifier)
return collectionView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(collectionView)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.frame = view.bounds
generateDates()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// this will be called on first layout - and possibly (probably) additional times
// so only execute this code if the view width has changed...
if curViewWidth != view.frame.width {
curViewWidth = view.frame.width
if let fl = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
// update collection view frame width
collectionView.frame.size.width = curViewWidth
// we can't "draw on partial pixels" so
// get a whole number of width / 7 for item size
let size = floor(curViewWidth / 7.0)
cellSize = size
// now, the actual collection view width needs to be
// size * 7, NOT the full view width
// so get the number of cells that need width to be cellSize+1
let totalCellsWidth: CGFloat = cellSize * 7.0
numberOfPlusOneCells = Int(curViewWidth - totalCellsWidth)
// update flow layout's estimatedItemSize
fl.estimatedItemSize = CGSize(width: cellSize, height: cellSize)
// update headerReferenceSize tp be the collection view width
fl.headerReferenceSize = CGSize(width: curViewWidth, height: 40)
}
}
}
private func generateDates() {
let calendar = Calendar.current
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "MMMM yyyy"
let currentDate = Date()
guard let startDate = calendar.date(byAdding: .month, value: 0, to: currentDate),
let endDate = calendar.date(byAdding: .month, value: 12, to: currentDate) else {
return
}
var date = startDate
var currentMonth: CalendarMonth?
while date <= endDate {
let components = calendar.dateComponents([.year, .month, .day], from: date)
if let firstOfMonth = calendar.date(from: DateComponents(year: components.year, month: components.month, day: 1)) {
let monthTitle = dateFormatter.string(from: firstOfMonth)
if currentMonth == nil || currentMonth!.title != monthTitle {
if var existingMonth = currentMonth {
months.append(existingMonth)
}
currentMonth = CalendarMonth(title: monthTitle, dates: [])
}
}
currentMonth?.dates.append(CalendarDate(date: date, isSelected: false))
date = calendar.date(byAdding: .day, value: 1, to: date)!
}
if var existingMonth = currentMonth {
months.append(existingMonth)
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// account for non-even cell widths
if indexPath.item % 7 < numberOfPlusOneCells {
return .init(width: cellSize + 1.0, height: cellSize)
}
return .init(width: cellSize, height: cellSize)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return months.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return months[section].dates.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarDateCell.identifier, for: indexPath) as! CalendarDateCell
let date = months[indexPath.section].dates[indexPath.item]
cell.configure(with: date)
return cell
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: CalendarHeaderView.identifier, for: indexPath) as! CalendarHeaderView
header.configure(with: months[indexPath.section].title)
return header
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let selectedDate = months[indexPath.section].dates[indexPath.item].date
if selectedRange.start == nil || selectedRange.end != nil {
selectedRange = (start: selectedDate, end: nil)
} else if let start = selectedRange.start, selectedDate >= start {
selectedRange.end = selectedDate
}
updateSelection()
}
private func updateSelection() {
guard let start = selectedRange.start else { return }
for monthIndex in 0..<months.count {
for dateIndex in 0..<months[monthIndex].dates.count {
if let end = selectedRange.end {
months[monthIndex].dates[dateIndex].isSelected = months[monthIndex].dates[dateIndex].date >= start && months[monthIndex].dates[dateIndex].date <= end
months[monthIndex].dates[dateIndex].isStartRange = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isEndRange = months[monthIndex].dates[dateIndex].date == end
} else {
months[monthIndex].dates[dateIndex].isSelected = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isStartRange = months[monthIndex].dates[dateIndex].date == start
months[monthIndex].dates[dateIndex].isEndRange = false
}
}
}
collectionView.reloadData()
}
}
struct CalendarMonth {
let title: String
var dates: [CalendarDate]
}
class CalendarHeaderView: UICollectionReusableView {
static let identifier = "CalendarHeaderView"
private let titleLabel: UILabel = {
let label = UILabel()
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 16)
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(titleLabel)
titleLabel.frame = bounds
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configure(with title: String) {
titleLabel.text = title
}
}
struct CalendarDate {
let date: Date
var isSelected: Bool
var isStartRange: Bool = false
var isEndRange: Bool = false
}
class CalendarDateCell: UICollectionViewCell {
static let identifier = "CalendarDateCell"
private let dateLabel: UILabel = {
let label = UILabel()
label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(dateLabel)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
dateLabel.frame = contentView.bounds
}
func configure(with date: CalendarDate) {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "d"
dateLabel.text = dateFormatter.string(from: date.date)
// start with appearance for "not in selected range"
contentView.backgroundColor = .clear
dateLabel.backgroundColor = .clear
dateLabel.layer.cornerRadius = 0
dateLabel.layer.masksToBounds = false
dateLabel.textColor = .black
// now, if the date IS in the selected range, update the appearance
if date.isSelected {
if date.isStartRange || date.isEndRange {
dateLabel.textColor = .white
dateLabel.backgroundColor = .blue
dateLabel.layer.cornerRadius = dateLabel.bounds.width / 2
dateLabel.layer.masksToBounds = true
} else {
dateLabel.textColor = .black
contentView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
}
}
}
}
- Key Commands must all have a Title, Key and Selector
- SwiftUI: ViewModifier where content is an Image
- SwiftUI. How to change the placeholder color of the TextField?
- How to corrently use UIViews systemLayoutSizeFitting to get the height to show all subviews using a given width?
- Use of protocol as a type must be written with any (Learning Purposes)
- How to allow row selection in a list when there is a ForEach inside it?
- Swift - what's the difference between metatype .Type and .self?
- Try await swift errors thrown from here are not handled - Swift 5.5,*
- layoutManager.glyphRange returns full glyph range although textContainer only has a width of 1
- Enable orphan words feature for NSMutableAttributedString
- Select next NSTextField with Tab key in Swift
- Cannot convert value of type 'Int' to expected argument type 'AttributedString.Index'
- Swift convert Currency string to double
- How to get "everything after the ://" in iOS `URL`
- Embed UIViewController inside a UIView
- Type Parameter Packs: how to return a tuple instead of an array?
- How to pass bytes from Swift (iOS) to Kotlin common module?
- AVFoundation -AVCaptureSession only stops and starts running when going to background and back with a breakpoint
- Effective MacOS/iOS framework for rendering custom maps (Spritekit or raw Metal)?
- How to Animate Path in SwiftUI
- Operator overloading not yet supported?
- How to disable pasting in a TextField in Swift?
- How to embed SwiftData model container in a custom file package document type
- Better way to subscribe to a @published property that changes another @State variable
- React Native NSInvalidArgumentException unrecognized selector sent to instance
- Is there a way to not return a cell after a condition in UITableView?
- How to tell SwiftUI views to bind to nested ObservableObjects
- Where in the iOS document or available source does it say that TaskPriority.userInitiated and TaskPriority.high are aliases?
- Best practice with asynchronous functions Swift & Combine
- Why does my SwiftUI view not get onChange updates from a @Binding member of a @StateObject?