UICollectionView. NSCoder Milwaukee. 2 April John Psuik. Tuesday, April 2, 13

Transcription

1 UICollectionView NSCoder Milwaukee 2 April 2013 John Psuik 1

2 UICollectionView 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. 2

3 UICollectionView 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, row... 3

4 UICollectionView 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, row, or grid This example requires very little code 4

5 UICollectionView It doesn t take much more to do something like this... 5

6 UICollectionView It doesn t take much more to do something like this... or this. 6

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

8 Getting Started Similarities to UITableView UICollectionView UICollectionViewCell UICollectionViewDelegate UICollectionViewDataSource UICollectionViewFlowLayout Concrete class that handles grid, column, row layouts. Very simple to use. UICollectionViewLayout Subclass this abstract base class to create your own layouts. Can become quite complex, but doesn t have to be. 8

9 Additional Features 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 9

10 What is a layout? 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. 10

11 Let s start with the cell Nothing fancy here, simply adding an image to the cell (to it s MyCollectionViewCell () // derives from (nonatomic, strong) 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]; 11

12 Cell views/selection/highlighting Properties similar to UITableViewCell contentview Read-only. Add custom subviews to this view. backgroundview Optional, automatically sized and placed behind content view. selectedbackgroundview Optional 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 12

13 Cell views/selection/highlighting Properties similar to UITableViewCell contentview Read-only. Add custom subviews to this view. backgroundview Optional, automatically sized and placed behind content view. selectedbackgroundview Optional 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 dequeuereusablecellwithreuseide ntifier 13

14 Using the UICollectionViewFlowLayout The 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 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 14

15 Creating your UICollectionView static NSString 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; 15

16 Data Source & Delegate Methods Again, very similar to working with UITableView // 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; 16

17 UICollectionViewDelegateFlowLayout Let s see what else we can do with the flow layout // 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); 17

18 The results - (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); 18

19 Adding a header/supplementary view. UICollectionReusableView FYI: UICollectionViewCell is a specialized subclass of UICollectionReusableView // this is a subclass of 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; 19

20 Supplementary View Register our header view for reuse // in the view controller // define a reuse identifier for our header static NSString * MySectionTitleReuseId -(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]; 20

21 Supplementary View Dequeueing the section header view // 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; 21

22 Supplementary View Customizing the look of the header via transform // apply a transform to the item // using it's 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; 22

23 Supplementary View Results! 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. 23

24 Custom anything-goes layouts The collection view simply asks it s current layout where things should go. It s up to you to supply all of the info. 24

25 Sine wave layout Base class UICollectionViewLayout...Means we need to do all of the work. Not really that difficult though. SineLayout : UICollectionViewLayout #define ITEM_SIZE 60 #define PADDING_SIZE 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; 25

26 Sine wave layout Base class UICollectionViewLayout And that s pretty much all that s needed for basic customization! // 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; 26

27 UICollectionViewLayout Overview of the methods to implement collectionviewcontentsize used 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 27

28 UICollectionViewLayout Overview 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 28

29 Support for < ios 6.0 See PSTCollectionView (support for ios 4.3 and later) PSTCollectionView 29

30 Other stuff More channels for dev info/collaboration IRC channels: #iphonedev #devmke #parse you 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 30

31 NSCoder Milwaukee Thank you for the opportunity to present Great 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 31