UICollectionView - Meetupfiles.meetup.com/4162752/NSCoderJP-UICollectionView.pdf · ¥...

UICollectionView

NSCoder Milwaukee2 April 2013

John Psuik

1Tuesday, April 2, 13

•New to iOS 6

•Layouts determine placement of items (flowlayout and custom layout)

•UITableView concepts, but you can do so much more...

•Displaying a simple column...

All images used without permission of any kind.

UICollectionView


•New to iOS 6



•Displaying a simple column, row...

UICollectionView


•New to iOS 6



•Displaying a simple column, row, or grid

•This example requires very little code

UICollectionView


•It doesn’t take much more to do something like this...

UICollectionView


•It doesn’t take much more to do something like this... or this.

UICollectionView


•It doesn’t take much more to do something like this... or this. Use your imagination to create any layout you wish

UICollectionView


•Similarities to UITableView•UICollectionView•UICollectionViewCell•UICollectionViewDelegate•UICollectionViewDataSource

•UICollectionViewFlowLayoutConcrete class that handles grid, column, row layouts. Very simple to use.

•UICollectionViewLayoutSubclass this abstract base class to create your own layouts. Can become quite complex, but doesn’t have to be.

Getting Started


•Supplementary Views•Optional•Data driven views•Similar to header/footer views in UITableView•Not selectable by user

•Decoration Views•Like the name implies, visual adornments•Think thumbtack on a picture•Not selectable by user

Additional Features


A layout is used to specify the location of all cells, decoration views and supplementary views.

The layout ONLY provides the positioning and size of the items, it doesn’t create the views.

A layout works with UICollectionViewLayoutAttributes supplied for each item to define the position, size, visibility, z-index as well as a 3D transform. For basic grids or vertical/horizontal list scroll views, the UICollectionViewFlowLayout handles much of this for you.

What is a layout?


@interface MyCollectionViewCell () // derives from UICollectionViewCell@property (nonatomic, strong) UIImageView *imageView;

@end

@implementation MyCollectionViewCell

- (id)initWithFrame:(CGRect)frame{ if (!(self = [super initWithFrame:frame])) return nil; CGRect imageRect = CGRectInset (CGRectMake(0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame)), 5, 5);

self.imageView = [[UIImageView alloc] initWithFrame:imageRect]; self.imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

[self.contentView addSubview:self.imageView]; self.backgroundColor = [UIColor whiteColor]; return self;}-(void)prepareForReuse{ // cleanup for cell reuse [self setImage:nil];}

Let’s start with the cellNothing fancy here, simply adding an image to the cell (to it’s contentView)


Cell views/selection/highlightingProperties similar to UITableViewCell

•contentViewRead-only. Add custom subviews to this view.

•backgroundViewOptional, automatically sized and placed behind content view.

•selectedBackgroundViewOptional view, displayed when cell is selected.

•highlighted and selected states

•Cells are retrieved for use by registering the class or nib file containing your cell then calling dequeueReusableCellWithReuseIdentifier


Cell views/selection/highlightingProperties similar to UITableViewCell

• contentViewRead-only. Add custom subviews to this view.

• backgroundViewOptional, automatically sized and placed behind content view.

• selectedBackgroundViewOptional view, displayed when cell is selected.

• highlighted and selected states

• Cells are retrieved for use by registering the class or nib file containing your cell then calling dequeueReusableCellWithReuseIdentifier


@implementation MyCollectionViewFlowLargeLayout

if (!(self = [super init])) return nil; self.itemSize = CGSizeMake (130, 130); self.sectionInset = UIEdgeInsetsMake (10, 10, 10, 10); self.minimumInteritemSpacing = 10; self.minimumLineSpacing = 10; self.scrollDirection = UICollectionViewScrollDirectionVertical; /* specify sizes for header and footer views if not set, headers and footers will not be visible self.headerReferenceSize = CGSizeMake (width, height); self.footerReferenceSize = CGSizeMake (width, height); */ return self;

@end

Using the UICollectionViewFlowLayoutThe flow layout does most of the hard work in implementing a grid or scrolling column/row.We only need to specify the cell size, spacing and padding


static NSString *ItemReuseIdentifier = @"myCellIdentifier";

@implementation MyViewController

-(void)loadView{ self.largeLayout = [[MyCollectionViewFlowLayout alloc] init]; self.sineLayout = [[SineLayout alloc] init]; // specify the initial layout when creating // you may change the layout at anytime self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.smallLayout];

// register your reusable cell. Can also use registerNib... [self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:ItemReuseIdentifier];

// standard stuff just like UITableView self.collectionView.delegate = self; self.collectionView.dataSource = self; self.collectionView.indicatorStyle = UIScrollViewIndicatorStyleWhite;}

Creating your UICollectionView


// this is all that’s needed in the data source and delegate to generate// the views shown in the previous screen shots

// the slightly more complex layouts of the circle and sine wave// are handled all within the layouts. these methods remain untouched.

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 200;}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ // a cell will automatically be created if necessary // remember, we registered the cell class earlier MyCollectionViewCell *cell = (AFCollectionViewCell *) [collectionView dequeueReusableCellWithReuseIdentifier:ItemReuseIdentifier forIndexPath:indexPath]; [cell setImage:[UIImage imageNamed: [NSString stringWithFormat:@"meetup%d.jpg", indexPath.item % 14]]]; return cell;}

Data Source & Delegate MethodsAgain, very similar to working with UITableView


// UICollectionViewDelegateFlowLayout

// we'll override the size specified in our own flow layouts

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ CGFloat squareSize = (indexPath.item + 2) * 8; CGSize itemSize = CGSizeMake(squareSize, squareSize); return itemSize;}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{ return UIEdgeInsetsMake(3, 3, 3, 3);}

UICollectionViewDelegateFlowLayoutLet’s see what else we can do with the flow layout


- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ CGFloat squareSize = (indexPath.item + 2) * 8; CGSize itemSize = CGSizeMake(squareSize, squareSize); return itemSize;}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{ return UIEdgeInsetsMake(3, 3, 3, 3);}

The results


// this is a subclass of UICollectionReusableView@implementation MyHeaderView

- (id)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (!self) return nil; UIImageView* iv = [[UIImageView alloc]initWithImage: [UIImage imageNamed:@"meetuplogo.png"]];

iv.contentMode = UIViewContentModeCenter; iv.frame = CGRectMake (0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame));

iv.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self addSubview:iv]; return self;}

Adding a header/supplementary view. UICollectionReusableViewFYI: UICollectionViewCell is a specialized subclass

of UICollectionReusableView


// in the view controller// define a reuse identifier for our headerstatic NSString * MySectionTitleReuseId = @"SectionTitleViewIdentifier";

-(void)loadView{ // ... do stuff here...

// register our supplementary view (section title/header) // this is needed for reuse

// ‘myHeaderView’ is a subclass of UICollectionReusableView // ‘UICollectionElementKindSectionHeader’ specifies type // ‘MySectionTitleReuseId’ is the reuse identifier [self.collectionView registerClass:[MyHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:MySectionTitleReuseId];}

Supplementary ViewRegister our header view for reuse


// UICollectionViewDataSource method

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ // since we're using only one section, we don't need to handle // the case of supplying different headers per section if (![kind isEqualToString:UICollectionElementKindSectionHeader]) return nil; MyHeaderView* headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:MySectionTitleReuseId forIndexPath:indexPath]; return headerView;}

Supplementary ViewDequeueing the section header view


// apply a transform to the item// using it's UICollectionViewLayoutAttributes

@implementation MyCollectionViewFlowSmallLayout

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{ // grab the current layout attributes for every item NSArray* attributesArray = [super layoutAttributesForElementsInRect:rect]; for (UICollectionViewLayoutAttributes* attr in attributesArray) { // is this the header item? if ([attr.representedElementKind isEqualToString: UICollectionElementKindSectionHeader]) { // apply some transform to it attr.transform3D = CATransform3DMakeRotation(0.8, 10, 0, 3); } } return attributesArray;}

Supplementary ViewCustomizing the look of the header via transform


Supplementary ViewResults!

Note: The supplementary views will scroll with the content.

It is possible, though not trivial to keep the header in place by further customizing your layout. (it felt like a real hack trying to do that)

Header and Footer sizing is limited by the scrolling direction. For a vertically scrolling view only the height will be honored, the width is fixed.


•The collection view simply asks it’s current layout where things should go. It’s up to you to supply all of the info.

Custom anything-goes layouts


// @interface SineLayout : UICollectionViewLayout

#define ITEM_SIZE 60#define PADDING_SIZE 5@implementation SineLayout

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path{ // sine wave layout UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];

attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE); CGSize size = self.collectionView.frame.size; CGFloat availWidth = size.width - (PADDING_SIZE * 2) - ITEM_SIZE; CGFloat xOffset = PADDING_SIZE + ITEM_SIZE / 2.0; // divide display width into units CGFloat unitWidth = availWidth / (float)self.cellCount ; CGFloat xCenter = xOffset + ((float)path.item * unitWidth) + unitWidth / 2.0; CGFloat yCenter = self.center.y - sinf(xCenter * 2.0 * M_PI / availWidth) * (float)((size.height - ITEM_SIZE - PADDING_SIZE) / 2.0); attributes.center = CGPointMake(xCenter, yCenter); CGFloat angle = M_PI / 12.0 * (float)path.item; attributes.transform3D = CATransform3DMakeRotation(angle, 0, 0, 1.0); return attributes;}

Sine wave layoutBase class UICollectionViewLayout...Means we need to do all of the work. Not really that difficult though.


// create an array of layout attributes for all of the items visible in the view

// in this case it’s not checking to see if the items are in bounds, but for performance // with a large number of items it’s best to only include those items that are visible

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{ NSMutableArray* attributes = [NSMutableArray array]; for (NSInteger i = 0; i < self.cellCount; i++) { NSIndexPath* indexPath = [NSIndexPath indexPathForItem:i inSection:0]; UICollectionViewLayoutAttributes* attributesForItem = [self layoutAttributesForItemAtIndexPath:indexPath];

[attributes addObject:attributesForItem]; } return attributes;}

Sine wave layoutBase class UICollectionViewLayoutAnd that’s pretty much all that’s needed for basic customization!


UICollectionViewLayoutOverview of the methods to implement

• collectionViewContentSizeused to determine whether scrolling will be enabled (vs the view size)

• layoutAttributesForElementsInRect:Called to retrieve an array of the layout attributes for all visible items

• layoutAttributesForItemAtIndexPath:Called for every item/element to retrieve it’s size, visibility, location

• layoutAttributesForSupplementaryViewOfKind:atIndexPath: Used in conjunction with header/footer supplementary views

• layoutAttributesForDecorationViewOfKind:atIndexPath: Used with decoration views


UICollectionViewLayoutOverview of the methods to implement

Handling item insertions/deletions (animations)

• initialLayoutAttributesForAppearingItemAtIndexPath:Think of this as the initial animation position for an item that will be added to the collection view

• initialLayoutAttributesForAppearingSupplementary/DecorationElementOfKind:atIndexPath:Same as above but for supplementary/decoration views

• finalLayoutAttributesForDisappearingItemAtIndexPath:The final layout and display attributes for an item being removed from the collection view. It will be animated to that position. Think along the lines of tossing something into a trash can/fading out.

• finalLayoutAttributesForDisappearingSupplementary/DecorationElementOfKind:atIndexPath: Again, same as above but for supplementary/decoration views

And there’s more, but much of what remains is similar to UITableView


Support for < iOS 6.0

See PSTCollectionView (support for iOS 4.3 and later)

https://github.com/steipete/PSTCollectionView


Other stuff

More channels for dev info/collaboration

IRC channels: #iphonedev #devmke #parseyou’ll find me online as PinkRunner

Somewhat new to iOS?raywenderlich.com for tutorials.stackoverflow.com is a great resource.Apple dev site: WWDC videos and forums


NSCoder Milwaukee

Thank you for the opportunity to presentGreat to see such a large group!

Reach out to others in the group for help

Invite your friends to join the next meetup!

I need a beer


Date post:	29-Oct-2019
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

UICollectionView - Meetupfiles.meetup.com/4162752/NSCoderJP-UICollectionView.pdf · ¥...

Documents