Advanced collection views

Mike BluesteinDeveloper/WriterXamarin

mike.bluestein@xamarin.com

Advanced Collection Views

@mikebluestein

Agenda

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

Overview

Collections Views

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

UICollectionView

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

UICollectionView

• Cells• Supplementary Views• Decoration Views

Cells

• UICollectionViewCell• Represents a single item in the data set• Has 3 parts

ContentViewSelectedBackgroundViewBackgroundView

BackgroundView

SelectedBackgroundView

ContentView

UICollectionViewCell

UICollectionViewCellpublic 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); }}

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

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

Cell Reuse

Supplementary Views

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

Supplementary Views

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

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

Decoration Views

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

Decoration Views

Decora4on  View  withPurple  Color

Decoration Views

• Must inherit from UICollectionViewReusableView

public class MyDecorationView : UICollectionReusableView{ [Export ("initWithFrame:")] public MyDecorationView (RectangleF frame) : base (frame) { BackgroundColor = UIColor.Purple; }}

Providing Content

• UICollectionViewDataSource is used to provide data• Works similar to data source used to populate UITableView

Handling Interaction

• UICollectionViewDelegate • Handles item interaction

Item SelectionHighlightingContext Menu

UICollectionViewController

• Pre-defined controller• View is a UICollectionView• Usage is optional (like UITableView can also use any

UIViewController as the controller for a UICollectionView)

Layout

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

Flow Layout

• UICollectionViewFlowLayout• Line-based layout• Grids• Automatic handling of orientation

Spacing and ScrollDirection

UICollec4onViewScrollDirec4on.Horizontal UICollec4onViewScrollDirec4on.Ver4cal

Flow Layout Delegate

• UICollectionViewDelegateFlowLayout• Allows layout properties to be set granularly per section and

item rather than globallyItemSizeMinimumLineSpacingMinimumInteritemSpacingetc...

Subclassing Flow Layout

• Why do this?Custom Line-Based LayoutsFlow Layouts with Decoration Views

Custom Line-Based Layouts

• Custom line-based layouts beyond grids• Inherit from UICollectionViewFlowLayout

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;

Custom Layout

• Create custom layouts that are not line-based• Inherit directly from UICollectionViewLayout• Override:

PrepareLayout - initial layout calculationsCollectionViewContentSize - display areaLayoutAttributesForElementsInRect - position items

Custom Layout

Layout Attributes

• Several built-in properties including:AlphaCenterHiddenSizeTransform3DZIndex

• Can create custom layout attributes as well

Extending Layout Attributes

• UICollectionViewLayoutAttributes Subclass

• UICollectionViewAttributes.CreateForCell<T>• UICollectionViewAttributes.CreateForSupplementaryView<T>• UICollectionViewAttributes.CreateForDecorationView<T>

• Override ApplyLayoutAttributes

Demo