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.

1. Introduction to
Collection Views
November 1, 2012
Copyright 2012 © Xamarin Inc. All rights reserved

2. Mike Bluestein
Xamarin Documentation Team
mike.bluestein@xamarin.com
@mikebluestein
Xamarin
Copyright 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 REUSE
CollectionView.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 VIEWS
CollectionView.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