UICollectionViewFlowLayout Place Section Headers over Section Left Inset - ios

Question

I am trying to modify UICollectionViewFlowLayout (vertical scroll) in order to place each section header to the left of all items of that section (as opposed to on top, which is the default).
That is, this is the default behaviour:
...and this is what I want:
So I subclassed UICollectionViewFlowLayout:
override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let attributesToReturn = super.layoutAttributesForElementsInRect(rect) else {
return nil
}
// Copy to avoid the dreadded "Cached frame mismatch" runtime warning:
var copiedAttributes = [UICollectionViewLayoutAttributes]()
for attribute in attributesToReturn {
copiedAttributes.append(attribute.copy() as! UICollectionViewLayoutAttributes)
}
for attributes in copiedAttributes {
if let kind = attributes.representedElementKind {
// Non nil: It is a supplementary View
if kind == UICollectionElementKindSectionHeader {
// HEADER
var frame = attributes.frame
frame.origin.y = frame.origin.y + frame.size.height
frame.size.width = sectionInset.left
attributes.frame = frame
}
}
else{
// Nil: It is an item
}
}
return copiedAttributes
}
Also, for good measure (?), I adopted the protocol UICollectionViewDelegateFlowLayout and implemented this method (although it is not clear what takes precedence. And then, there is the settings in the storyboard file, but those seem to be overriden by their runtime counterparts):
func collectionView(
collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
referenceSizeForHeaderInSection section: Int) -> CGSize {
let left = (collectionViewLayout as! UICollectionViewFlowLayout).sectionInset.left
return CGSizeMake(left, 1)
}
...and I succeed in lowering the header to the first row of its section; However, the space originally occupied by the header stays open:
...and the only way I can accomplish that is by setting the header view height to 1 and "Clips Subviews" to false, so that the label is displayed (If I set the height to 0, the label is not drawn), but this is definitely not the most elegant solution (and will likely break in -say- iOS 9.2)
That is, the actual height of the header is linked to the vertical space between sections: I can not set the space to zero while keeping the header view at a reasonable size for display.
Perhaps I should also move all section items up (by the same amount as my header height) instead, to fill the hole?

Answer 1

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *originalAttributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray *allAttributes = [NSMutableArray new];
for (UICollectionViewLayoutAttributes* attributes in originalAttributes) {
[allAttributes addObject:[attributes copy]];
}
for (UICollectionViewLayoutAttributes *attributes in allAttributes) {
NSString *kind = attributes.representedElementKind;
if (kind == UICollectionElementKindSectionHeader) {
CGRect frame = attributes.frame;
UICollectionViewLayoutAttributes *cellAttrs = [super layoutAttributesForItemAtIndexPath:attributes.indexPath];
frame.origin.x = frame.origin.x;
frame.size.height = self.sectionInset.top;
frame.size.width = cellAttrs.frame.size.width;
attributes.frame = frame;
}
}
return allAttributes;
}

Answer 2

OK, so this is what I did:
First of all, I subclassed UICollectionViewFlowLayout based on this github project, to get the left alignment I was looking for (I had to convert it from Objective-C to swift, but other than than it's pretty much the same).
Since I am already subclassing the layout object, I can implement any modifications in this subclass.
I declared a property to store the width of my "side-headers" (this quantity also doubles as the left inset of each section):
import UIKit
class LeftAlignedFlowLayout: UICollectionViewFlowLayout
{
let customHeaderWidth:CGFloat = 150.0
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
sectionInset.left = customHeaderWidth
}
Then, in the implementation of layoutAttributesForElementsInRect() I did this:
override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]?
{
guard let attributesToReturn = super.layoutAttributesForElementsInRect(rect) else {
return nil
}
var copiedAttributes = [UICollectionViewLayoutAttributes]()
for attribute in attributesToReturn {
// Must copy attributes to avoid runtime warning:
copiedAttributes.append(attribute.copy() as! UICollectionViewLayoutAttributes)
}
for attributes in copiedAttributes {
if let kind = attributes.representedElementKind {
// Non nil : Supplementary View
if kind == UICollectionElementKindSectionHeader {
// [A] HEADER
var frame = attributes.frame
frame.origin.y = frame.origin.y + frame.size.height
frame.size.width = sectionInset.left
frame.size.height = 60 // Hard-coded - header height
attributes.frame = frame
}
else if kind == UICollectionElementKindSectionFooter {
// [B] FOOTER
var frame = attributes.frame
// My footer view is a "hairline" taking most of the width
// (save for 8 points of inset margin on each side):
frame.origin.x += 8
frame.size.width -= 16
attributes.frame = frame
}
}
else{
// Kind is nil : Item (cell)
if let attributesForItem = self.layoutAttributesForItemAtIndexPath(attributes.indexPath){
attributes.frame = attributesForItem.frame
}
}
}
return copiedAttributes
}
There is also the implementation of layoutAttributesForItemAtIndexPath(), but that pertains more to the left alignment of the items-part, so I omitted it (if anyone is interested, please check the above-linked github project).
I will create a repository with a demo project of my implementation as soon as I have time.
These are the Size Inspector settings for the collection view and the flow layout object, respectively:
(By the way, item size is variable and determined at runtime by the delegate method, so ignore those values)
I also adopted the UICollectionViewDelegateFlowLayout protocol, like this:
func collectionView(collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
referenceSizeForHeaderInSection section: Int) -> CGSize
{
let left = (collectionViewLayout as! UICollectionViewFlowLayout).sectionInset.left
return CGSizeMake(left, 1)
}
Although, to be honest, some of the layout attributes can be specified in many places (Interface Builder, properties of layout object, return value from delegate methods, etc... ) and I don't remember exactly which takes precendence in each case, so I need to clean up my code a bit.