Skip to content

Instantly share code, notes, and snippets.

@alloy
Last active July 18, 2020 22:02
Show Gist options
  • Save alloy/5460654 to your computer and use it in GitHub Desktop.
Save alloy/5460654 to your computer and use it in GitHub Desktop.
UICollectionViewFlowLayout subclass to vertically align cells at the bottom edge.
@interface MTLibraryCollectionViewFlowLayout : UICollectionViewFlowLayout
@end
@implementation MTLibraryCollectionViewFlowLayout
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
{
NSArray *attrs = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *element in attrs) {
if (element.representedElementCategory == UICollectionElementCategoryCell) {
CGRect frame = element.frame;
// Get the diff between the ideal height and the actual thumbnail height.
CGFloat deltaY = self.itemSize.height - CGRectGetHeight(frame);
// As the element is already centered, the delta should take that into account.
deltaY = ceilf(deltaY / 2.0);
// Offset and be done with it.
element.frame = CGRectOffset(frame, 0, deltaY);
}
}
return attrs;
}
@end
@jercsnow
Copy link

jercsnow commented Aug 22, 2016

Hello @alloy,

Your code didn't work for me because the call to self.itemSize.height did not give the correct value. I found the following code would be much simpler and works without relying on this API.

class AlignBottomCollectionViewFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attrs = super.layoutAttributesForElementsInRect(rect)
        var attrsCopy = [UICollectionViewLayoutAttributes]()
        for  element in attrs! {
            let elementCopy = element.copy() as! UICollectionViewLayoutAttributes
            if (elementCopy.representedElementCategory == .Cell) {
                elementCopy.frame.origin.y = elementCopy.frame.origin.y * 2.0
            }

            attrsCopy.append(elementCopy)
        }

        return attrsCopy
    }
}

Essentially all you need to do is double the top margin because, assuming the cell is centered, that's all that's required to bottom along each cell. Hope this works for you and anyone else trying to solve this annoying problem, which I personally think is a bug in with Apple because setting sectionOffset should really do the trick (if all cells are the same height).

Thanks for getting me down the right path though!

@lucasfeijo
Copy link

Swift 3 version:

class AlignBottomCollectionViewFlowLayout: UICollectionViewFlowLayout {
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attrs = super.layoutAttributesForElements(in: rect)
        var attrsCopy = [UICollectionViewLayoutAttributes]()
        for  element in attrs! {
            let elementCopy = element.copy() as! UICollectionViewLayoutAttributes
            if (elementCopy.representedElementCategory == .cell) {
                elementCopy.frame.origin.y = elementCopy.frame.origin.y * 2.0
            }
            
            attrsCopy.append(elementCopy)
        }
        
        return attrsCopy
    }
}

@EdenShapiro
Copy link

Great idea!

@OskarGroth
Copy link

Works great in theory but is still a hack and can't be animated between layouts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment