Your SlideShare is downloading. ×
Introduction to Collection Views in iOS 6
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Collection Views in iOS 6

4,255
views

Published on

Video for this session: http://www.youtube.com/watch?v=aAPRG-5W8sI …

Video for this session: http://www.youtube.com/watch?v=aAPRG-5W8sI

Code for this session: https://github.com/xamarin/Seminars/tree/master/2012-11-01-CollectionViews

Collection Views are a powerful new technology in iOS 6 that allow content to be presented using arbitrary layouts. In this session, Mike Bluestein will introduce Collection Views. Mike will look at how to use Collection Views to create grid-like layouts, as well as how to create custom layouts.

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Introduction toCollection Views November 1, 2012 Copyright 2012 © Xamarin Inc. All rights reserved
    • 2. Mike Bluestein Xamarin Documentation Team mike.bluestein@xamarin.com @mikebluestein XamarinCopyright 2012 © Xamarin Inc. All rights reserved
    • 3. UICOLLECTIONVIEW• New in iOS 6• Items displayed with layout• Easy to implement grid of items
    • 4. UICOLLECTIONVIEW• Data is provided via Data Source• Interaction is handled though Delegate• Very similar to UITableView• Manages cell selection
    • 5. UICOLLECTIONVIEW• Cells• Supplementary Views• Decoration Views
    • 6. CELLS• UICollectionViewCell• Represents a single item in the data set• Has 3 parts BackgroundView SelectedBackgroundView • ContentView ContentView • SelectedBackgroundView • BackgroundView
    • 7. UICOLLECTIONVIEWCELL
    • 8. UICOLLECTIONVIEWCELL public class AnimalCell : UICollectionViewCell { UIImageView imageView; [Export ("initWithFrame:")] public AnimalCell (System.Drawing.RectangleF frame) : base (frame) { BackgroundView = new UIView{BackgroundColor = UIColor.Orange}; SelectedBackgroundView = new UIView{BackgroundColor = UIColor.Green}; ContentView.Layer.BorderColor = UIColor.LightGray.CGColor; ContentView.Layer.BorderWidth = 2.0f; ContentView.BackgroundColor = UIColor.White; ContentView.Transform = CGAffineTransform.MakeScale (0.8f, 0.8f); imageView = new UIImageView (UIImage.FromBundle ("image.png")); imageView.Center = ContentView.Center; imageView.Transform = CGAffineTransform.MakeScale (0.7f, 0.7f); ContentView.AddSubview (imageView); } }
    • 9. CELL REUSE• Nolonger have to check if cell exists before de-queueing in Delegate (like pre-iOS 6 UITableView)• Register class or xib for cell• System will create in DequeueReusableCell call• Works with UICollectionView and UITableView
    • 10. CELL REUSECollectionView.RegisterClassForCell (typeof(MyCell), myCellId);...public override UICollectionViewCell GetCell (UICollectionView collectionView,MonoTouch.Foundation.NSIndexPath indexPath){ var myCell = (MyCell)collectionView.DequeueReusableCell (myCellId, indexPath); var myObject = data [indexPath.Row]; // populate myCell with data from myObject ... return myCell;}
    • 11. SUPPLEMENTARY VIEWS• Driven by section data•A more general way of doing headers and footers• Can use any view to create
    • 12. SUPPLEMENTARY VIEWS
    • 13. SUPPLEMENTARY VIEWS• Register Supplementary Views similar to Cells• GetViewForSupplementaryElement returns view• DequeueReusableSupplementary view creates view• Supplementary View inherits from UICollectionReusableView
    • 14. SUPPLEMENTARY VIEWSCollectionView.RegisterClassForSupplementaryView (typeof(Header), UICollectionElementKindSection.Header, headerId);public override UICollectionReusableView GetViewForSupplementaryElement ( UICollectionView collectionView, NSString elementKind, NSIndexPath indexPath){ var headerView = (Header)collectionView.DequeueReusableSupplementaryView ( elementKind, headerId, indexPath); headerView.Text = "This is a Supplementary View"; return headerView;}
    • 15. DECORATION VIEWS• Provide visual content• Not data driven• Common use to provide backdrop• Associated with layout• Created in layout subclass
    • 16. DECORATION VIEWS
    • 17. DECORATION VIEWS• Must inherit from UICollectionViewReusableView public class MyDecorationView : UICollectionReusableView { [Export ("initWithFrame:")] public MyDecorationView (System.Drawing.RectangleF frame) : base (frame) { BackgroundColor = UIColor.Red; } }
    • 18. CREATE DECORATION VIEWS• RegisterClassForDecorationView in layout class RegisterClassForDecorationView (typeof(MyDecorationView), myDecorationViewId);• UICollectionViewLayoutAttributes.CreateForDecorationView var decorationAttribs = UICollectionViewLayoutAttributes.CreateForDecorationView (myDecorationViewId, NSIndexPath.FromItemSection (0, 0)); decorationAttribs.Size = rect.Size; decorationAttribs.Center = CollectionView.Center; decorationAttribs.ZIndex = -1;
    • 19. PROVIDING CONTENT• UICollectionViewDataSource is used to provide data• Works similar to data source used to populate UITableView
    • 20. MORE ABOUT CELL REUSE
    • 21. HANDLING INTERACTION• UICollectionViewDelegate handles item interaction • Item Selection • Highlighting • Context Menu
    • 22. CONTROLLER• UICollectionViewController• Pre-defined controller• View is a UICollectionView• Usageis optional (like UITableView can also use any UIViewController as the controller for a UICollectionView)
    • 23. LAYOUT• UICollectionViewLayout - base class for any layout• Creates layout attributes for every item, supplementary view and decoration view• Built-in UICollectionViewFlowLayout• Custom layout - inherit directly from UICollectionViewLayout
    • 24. FLOW LAYOUT• UICollectionViewFlowLayout• Line-based layout• For example, grids• Automatic handling of orientation
    • 25. FLOW LAYOUT• Customline-based layouts beyond grids• Caninherit from UICollectionViewFlowLayout
    • 26. FLOW LAYOUT DELEGATE• UICollectionViewDelegateFlowLayout• Allowslayout attributes to be set granularly per section and item rather than globally • ItemSize, MinimumLineSpacing, MinimumInteritemSpacing, etc...• Defaults to class set for UICollectionView.Delegate
    • 27. CUSTOM LAYOUT• Create custom layouts that are not line-based• Inherit directly from UICollectionViewLayout• Override: • PrepareLayout - initial layout calculations • CollectionViewContentSize - display area • LayoutAttributesForElementsInRect - position items
    • 28. CUSTOM LAYOUT
    • 29. DEMO
    • 30. Xamarin Seminar Please give us your feedback http://bit.ly/xamfeedback Follow us on Twitter @XamarinHQ Copyright 2012 © Xamarin Inc. All rights reserved