Skip to content

Instantly share code, notes, and snippets.

@beccadax
Created July 14, 2013 03:26
Show Gist options
  • Save beccadax/5993071 to your computer and use it in GitHub Desktop.
Save beccadax/5993071 to your computer and use it in GitHub Desktop.
Collection view cells and headings which, together, give a nice grid with light gray borders between each element.
//
// FDRCollectionViewCell.h
//
//
// Created by Brent Royal-Gordon on 7/10/13.
//
//
#import <UIKit/UIKit.h>
@interface FDRCollectionViewCell : UICollectionViewCell
@end
//
// FDRCollectionViewCell.m
//
//
// Created by Brent Royal-Gordon on 7/10/13.
//
//
#import "FDRCollectionViewCell.h"
#import "FDRCollectionViewFlowLayout.h"
@interface FDRCollectionViewCellBackgroundView : UIView
@property (assign, nonatomic) BOOL rightBorderHidden;
@property (assign, nonatomic) BOOL bottomBorderHidden;
@end
@implementation FDRCollectionViewCell
- (void)awakeFromNib {
[super awakeFromNib];
self.backgroundView = [FDRCollectionViewCellBackgroundView new];
self.backgroundView.backgroundColor = self.backgroundColor;
self.backgroundView.opaque = self.opaque;
self.selectedBackgroundView = [UIView new];
self.selectedBackgroundView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.03];
self.selectedBackgroundView.opaque = NO;
}
- (void)setBackgroundColor:(UIColor *)backgroundColor {
super.backgroundColor = backgroundColor;
self.backgroundView.backgroundColor = backgroundColor;
}
- (void)setOpaque:(BOOL)opaque {
super.opaque = opaque;
self.backgroundView.opaque = opaque;
}
- (void)applyLayoutAttributes:(FDRCollectionViewLayoutAttributes *)layoutAttributes {
[super applyLayoutAttributes:layoutAttributes];
FDRCollectionViewCellBackgroundView * background = (id)self.backgroundView;
background.bottomBorderHidden = layoutAttributes.inLastRowOfSection && !layoutAttributes.inLastSection;
background.rightBorderHidden = layoutAttributes.againstRightEdge;
}
@end
@implementation FDRCollectionViewCellBackgroundView
- (void)setBottomBorderHidden:(BOOL)bottomBorderHidden {
_bottomBorderHidden = bottomBorderHidden;
[self setNeedsDisplay];
}
- (void)setRightBorderHidden:(BOOL)rightBorderHidden {
_rightBorderHidden = rightBorderHidden;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
[[UIColor colorWithWhite:0.74 alpha:1.0] set];
CGFloat thickness = 1 / self.contentScaleFactor;
if(!self.rightBorderHidden) {
UIRectFill(CGRectMake(CGRectGetMaxX(self.bounds) - thickness, 0, thickness, CGRectGetHeight(self.bounds)));
}
if(!self.bottomBorderHidden) {
UIRectFill(CGRectMake(0, CGRectGetMaxY(self.bounds) - thickness, CGRectGetWidth(self.bounds), thickness));
}
}
@end
//
// FDRCollectionViewFlowLayout.h
// Feeder
//
// Created by Brent Royal-Gordon on 7/11/13.
// Copyright (c) 2013 Architechies. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface FDRCollectionViewFlowLayout : UICollectionViewFlowLayout
@end
@interface FDRCollectionViewLayoutAttributes : UICollectionViewLayoutAttributes
@property (assign, nonatomic, getter = isInLastRowOfSection) BOOL inLastRowOfSection;
@property (assign, nonatomic, getter = isInLastSection) BOOL inLastSection;
@property (assign, nonatomic, getter = isAgainstRightEdge) BOOL againstRightEdge;
@end
//
// FDRCollectionViewFlowLayout.m
// Feeder
//
// Created by Brent Royal-Gordon on 7/11/13.
// Copyright (c) 2013 Architechies. All rights reserved.
//
#import "FDRCollectionViewFlowLayout.h"
@implementation FDRCollectionViewFlowLayout
+ (Class)layoutAttributesClass {
return [FDRCollectionViewLayoutAttributes class];
}
- (void)intuitSectioningAttributes:(FDRCollectionViewLayoutAttributes*)attributes {
NSIndexPath * lastIndexPath = [NSIndexPath indexPathForItem:[self.collectionView numberOfItemsInSection:attributes.indexPath.section] - 1 inSection:attributes.indexPath.section];
attributes.inLastRowOfSection = [lastIndexPath isEqual:attributes.indexPath] || attributes.center.y == [super layoutAttributesForItemAtIndexPath:lastIndexPath].center.y;
attributes.inLastSection = attributes.indexPath.section == self.collectionView.numberOfSections - 1;
attributes.againstRightEdge = CGRectGetMaxX(attributes.frame) == CGRectGetMaxX(self.collectionView.bounds);
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
FDRCollectionViewLayoutAttributes * attributes = (id)[super layoutAttributesForItemAtIndexPath:indexPath];
[self intuitSectioningAttributes:attributes];
return attributes;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray * attributesArray = [super layoutAttributesForElementsInRect:rect];
for(FDRCollectionViewLayoutAttributes * attrs in attributesArray) {
[self intuitSectioningAttributes:attrs];
}
return attributesArray;
}
@end
@implementation FDRCollectionViewLayoutAttributes
- (id)copyWithZone:(NSZone *)zone {
FDRCollectionViewLayoutAttributes * copy = [super copyWithZone:zone];
copy.inLastRowOfSection = self.inLastRowOfSection;
copy.inLastSection = self.inLastSection;
copy.againstRightEdge = self.againstRightEdge;
return copy;
}
@end
//
// FDRSectionHeaderView.h
// Feeder
//
// Created by Brent Royal-Gordon on 7/11/13.
// Copyright (c) 2013 Architechies. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface FDRSectionHeaderView : UICollectionReusableView
@property (weak, nonatomic) IBOutlet UILabel * titleLabel;
@end
//
// FDRSectionHeaderView.m
// Feeder
//
// Created by Brent Royal-Gordon on 7/11/13.
// Copyright (c) 2013 Architechies. All rights reserved.
//
#import "FDRSectionHeaderView.h"
@implementation FDRSectionHeaderView
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
[[UIColor colorWithWhite:0.74 alpha:1.0] set];
CGFloat thickness = 1 / self.contentScaleFactor;
UIRectFill(CGRectMake(0, 0, CGRectGetWidth(self.bounds), thickness));
UIRectFill(CGRectMake(0, CGRectGetMaxY(self.bounds) - thickness, CGRectGetWidth(self.bounds), thickness));
}
@end
Copy link

ghost commented May 20, 2014

I am using different cell sizes for Portrait and Landscape orientations and calling
[self.collectionView performBatchUpdates:nil completion:nil] on didRotateFromInterfaceOrientation
But it seems the drawRect is not called and the borders remain the same.
The borders should also resize accordingly. How can it be achieved?

@SriSamVictor
Copy link

Hi am two months of experience in ios. i don't know how to use those classes. so please explain briefly

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