This document provides an overview and agenda for discussing collection views in iOS. It covers the built-in collection view and flow layout support, as well as extending and creating custom layouts. Key topics include using collection views for grids of items, registering cell and supplementary view classes, implementing reuse, and subclassing the flow layout or custom layouts.

1. Mike Bluestein
Developer/Writer
Xamarin
mike.bluestein@xamarin.com
Advanced Collection Views
@mikebluestein

2. Agenda
• Overview of Collection Views
• Built-in Layout Support
• Extending the Built-in Layout
• Creating Custom Layouts

3. Overview

4. Collections Views
• Introduced in iOS 6
• Layout system for item display
• Easy to implement grid of items

5. UICollectionView
• Data is provided via Data Source
• Interaction is handled through Delegate
• Very similar to UITableView
• Manages cell selection

6. UICollectionView
• Cells
• Supplementary Views
• Decoration Views

7. Cells
• UICollectionViewCell
• Represents a single item in the data set
• Has 3 parts
ContentView
SelectedBackgroundView
BackgroundView
BackgroundView
SelectedBackgroundView
ContentView

8. UICollectionViewCell

9. UICollectionViewCell
public class MonkeyCell : UICollectionViewCell
{
UIImageView imageView;
[Export ("initWithFrame:")]
public MonkeyCell (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 (“monkey.png"));
imageView.Center = ContentView.Center;
imageView.Transform = CGAffineTransform.MakeScale (0.7f, 0.7f);
ContentView.AddSubview (imageView);
}
}

10. Cell Reuse
• No longer 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 cell in DequeueReusableCell call
• Works with UICollectionView and UITableView

11. 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;
}

12. Cell Reuse

13. Supplementary Views
• Driven by section data
• A more general way of doing headers and footers
• Can use any view to create

14. Supplementary Views
• Register Supplementary Views similar to Cells
• GetViewForSupplementaryElement returns view
• DequeueReusableSupplementary view creates view
• Supplementary View inherits from UICollectionReusableView

15. 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;
}

16. Decoration Views
• Provide visual content
• Not data driven
• Common use to provide backdrop that scrolls with content
• Associated with layout
• Created in layout subclass

17. Decoration Views
Decora4on
View
with
Purple
Color

18. Decoration Views
• Must inherit from UICollectionViewReusableView
public class MyDecorationView : UICollectionReusableView
{
[Export ("initWithFrame:")]
public MyDecorationView (RectangleF frame) : base (frame)
{
BackgroundColor = UIColor.Purple;
}
}

19. Providing Content
• UICollectionViewDataSource is used to provide data
• Works similar to data source used to populate UITableView

20. Handling Interaction
• UICollectionViewDelegate
• Handles item interaction
Item Selection
Highlighting
Context Menu

21. UICollectionViewController
• Pre-defined controller
• View is a UICollectionView
• Usage is optional (like UITableView can also use any
UIViewController as the controller for a UICollectionView)

22. Layout

23. Layout
• UICollectionViewLayout - base class for any layout
• Creates layout attributes for every item, supplementary view
and decoration view
• Can include custom layout attributes
• Built-in UICollectionViewFlowLayout
• Custom layout - inherit directly from UICollectionViewLayout

24. Flow Layout
• UICollectionViewFlowLayout
• Line-based layout
• Grids
• Automatic handling of orientation

25. Spacing and ScrollDirection
UICollec4onViewScrollDirec4on.Horizontal UICollec4onViewScrollDirec4on.Ver4cal

26. Flow Layout Delegate
• UICollectionViewDelegateFlowLayout
• Allows layout properties to be set granularly per section and
item rather than globally
ItemSize
MinimumLineSpacing
MinimumInteritemSpacing
etc...

27. Subclassing Flow Layout
• Why do this?
Custom Line-Based Layouts
Flow Layouts with Decoration Views

28. Custom Line-Based Layouts
• Custom line-based layouts beyond grids
• Inherit from UICollectionViewFlowLayout

29. Create Decoration Views
• RegisterClassForDecorationView in layout class
• UICollectionViewLayoutAttributes.CreateForDecorationView
RegisterClassForDecorationView (typeof(MyDecorationView), myDecorationViewId);
var decorationAttribs = UICollectionViewLayoutAttributes.CreateForDecorationView(
kind, indexPath);
decorationAttribs.Size = rect.Size;
decorationAttribs.Center = CollectionView.Center;
decorationAttribs.ZIndex = -1;

30. 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

31. Custom Layout

32. Layout Attributes
• Several built-in properties including:
Alpha
Center
Hidden
Size
Transform3D
ZIndex
• Can create custom layout attributes as well

33. Extending Layout Attributes
• UICollectionViewLayoutAttributes Subclass
• UICollectionViewAttributes.CreateForCell<T>
• UICollectionViewAttributes.CreateForSupplementaryView<T>
• UICollectionViewAttributes.CreateForDecorationView<T>
• Override ApplyLayoutAttributes

34. Demo