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