Create Views On Top Of Collection View? - ios

Question

Currently, I have a calendar grid system. I am trying to implement a feature, where I can show event blocks within the calendar. So, I want to be able to implement where it is possible to add the "Untitled" blocks anywhere within the grid system by the user tapping a cell. My first thought is to add a view outside of the UICollectionView, but then when I scroll away on the calendar. The "Untitled" block would still exist, and would still be on the screen. I need to add a cell within the collection layout in order for it to stay within the flow of the collection view. To build the grid system, I had to make a custom subclass of UICollectionViewLayout, so I am not using a UICollectionViewFlowLayout. I am still a little lost how to add a cell above another cell, any ideas on the best way to implement this feature?

Answer 1

I ended up figuring out the answer to my own question. And, I was able to do it without having to hack the collectionView with a bunch of inner scroll views. Here's what I did. I already had my grid system in place, so I had to add an extra section to my collection view. This section's number of items was dependent upon my events data source array as such:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == Constants.numberOfSections {
//custom event section
return events.count
}
//calender grid items
return Constants.numberOfColumns
}
But, my custom layout for the collection view needed to be updated about the cellAttributes. If I did not tell it that a new cell was added, then it would either crash because it couldn't find a corresponding grid member or add the cell to the grid, like it was another part of the grid. So, I had to update the cellAttributes in my custom layout class, and then manually calculate where the cell should be placed within the layout. So, basically every time I add an event cell, the layout has to manually calculate where that cell should be within the grid. This is the function where I manually calculate the events coordinates in my custom layout subclass (the relevant parts is in the custom events comments):
fileprivate func setCellAttributes(item: Int, section: Int) {
// Build the UICollectionVieLayoutAttributes for the cell.
let cellIndex = IndexPath(item: item, section: section)
var cellWidth: Double = CELL_WIDTH
var cellHeight: Double = CELL_HEIGHT
var xPos: Double = 0
var yPos = Double(section) * CELL_HEIGHT
if section == collectionView!.numberOfSections - 1 {
//custom event items
let rect = getCustomEventRect(item: item)
xPos = Double(rect.x)
yPos = Double(rect.y)
cellHeight = Double(rect.height)
cellWidth = Double(rect.width)
} else if item == 0 {
//the y axis cells
cellWidth = yAxisCellWidth
} else {
//all other cells
xPos = calculateXPos(item: item)
}
let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
cellAttributes.frame = CGRect(x: xPos, y: yPos, width: cellWidth, height: cellHeight)
// Determine zIndex based on cell type.
if section == 0 && item == 0 {
//top left corner cell
cellAttributes.zIndex = 5
} else if section == 0 {
//y axis cells
cellAttributes.zIndex = 4
} else if section == collectionView!.numberOfSections - 1 {
//custom event cells
cellAttributes.zIndex = 2
} else if item == 0 {
//top x axis cells
cellAttributes.zIndex = 3
} else {
//all background schedule cells
cellAttributes.zIndex = 1
}
// Save the attributes.
cellAttrsDictionary[cellIndex] = cellAttributes
}
Also, every time I updated the events in my viewController, I had to update the events in my layout. So, I implemented this in my viewController:
var events: [CustomEvent] = [] {
didSet {
if let layout = theCollectionView.collectionViewLayout as? ScheduleCollectionViewLayout {
layout.events = events
}
}
}
And, when a user taps to add a new event, I make sure to update the layout accordingly:
func removeEventCell(at indexPath: IndexPath) {
let eventSection: Int = collectionView!.numberOfSections - 1
let totalEventItems: Int = collectionView!.numberOfItems(inSection: eventSection)
//decrementing all indexPaths above the deleted event cell, so the attribute dictionary will be up to date, when reloadSections is run by the collectionView.
for item in 0..<totalEventItems where item > indexPath.item {
let targetIndexPath = IndexPath(item: item - 1, section: eventSection)
let cellAttr = cellAttrsDictionary[IndexPath(item: item, section: eventSection)]
cellAttr?.indexPath = targetIndexPath
cellAttrsDictionary[targetIndexPath] = cellAttr
}
let lastIndexPath = IndexPath(item: totalEventItems - 1, section: eventSection)
cellAttrsDictionary.removeValue(forKey: lastIndexPath)
}
fileprivate func addEventCellAttributes(numOfEventsToAdd: Int) {
for num in 1...numOfEventsToAdd {
setCellAttributes(item: events.count - num, section: collectionView!.numberOfSections - 1)
}
}
This is a very manual process of calculating where to put the cells, but it keeps the collectionView working smoothly and allows the functionality of having cells above cells. The summary of my answer is that I added a new section for my custom events, and I had to manually calculate where the positions of these cells should be, rather than just having them flow with the grid system. My interactive calendar now works perfectly. If you're having trouble trying to even create a grid system, I used this tutorial:
https://www.credera.com/blog/mobile-applications-and-web/building-a-multi-directional-uicollectionview-in-swift/