INTRODUCTION TO COLLECTION VIEWS

Using MonoTouch and C#

Mike BluesteinXamarin

11/7/2012

MONOTOUCH

• Platform for creating iOS application with C# from Xamarin

• Bindings to native APIs

• Reuse of C# code and base class libraries

• AOT C# compilation

•Memory management

GETTING STARTED SEMINAR

http://youtu.be/LYhXuhMnke8

UICOLLECTIONVIEW

•New in iOS 6

• Items displayed with layout

• Easy to implement grid of items

UICOLLECTIONVIEW

•Data is provided via Data Source

• Interaction is handled though 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

• ContentView

• SelectedBackgroundView

• BackgroundView

BackgroundView

SelectedBackgroundView

ContentView

UICOLLECTIONVIEWCELL

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

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

SUPPLEMENTARY VIEWS

•Driven by section data

• A more general way of doing headers and footers

• Can use any view to create

SUPPLEMENTARY VIEWS

SUPPLEMENTARY VIEWS

• Register Supplementary Views similar to Cells

• GetViewForSupplementaryElement returns view

•DequeueReusableSupplementaryView 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

• Associated with layout

• Created in layout subclass

DECORATION VIEWS

DECORATION VIEWS

•Must inherit from UICollectionViewReusableViewpublic class MyDecorationView : UICollectionReusableView{ [Export ("initWithFrame:")] public MyDecorationView (System.Drawing.RectangleF frame) : base (frame) { BackgroundColor = UIColor.Black;

... }}

CREATE DECORATION VIEWS

• RegisterClassForDecorationView in layout class

• UICollectionViewLayoutAttributes.CreateForDecorationView

RegisterClassForDecorationView (typeof(MyDecorationView), myDecorationViewId);

var decorationAttribs = UICollectionViewLayoutAttributes.CreateForDecorationView (myDecorationViewId, NSIndexPath.FromItemSection (0, 0));decorationAttribs.Size = rect.Size;decorationAttribs.Center = CollectionView.Center;decorationAttribs.ZIndex = -1;

PROVIDING CONTENT

• UICollectionViewDataSource is used to provide data

•Works similar to data source used to populate UITableView

MORE ABOUT CELL REUSE

HANDLING INTERACTION

• UICollectionViewDelegate handles item interaction

• Item Selection

• Highlighting

• Context Menu

CONTROLLER

• 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

• UICollectionViewLayout - base class for any layout

• Creates layout attributes for every item, supplementary view and decoration view

• Built-in UICollectionViewFlowLayout

• Custom layout - inherit directly form UICollectionViewLayout

FLOW LAYOUT

• UICollectionViewFlowLayout

• Line-based layout

• For example, grids

• Automatic handling of orientation

FLOW LAYOUT

• Custom line-based layouts beyond grids

• Can inherit from UICollectionViewFlowLayout

FLOW LAYOUT DELEGATE

• UICollectionViewDelegateFlowLayout

• Allows layout attributes to be set granularly per section and item rather than globally

• ItemSize, MinimumLineSpacing, MinimumInteritemSpacing, etc...

•Defaults to class set for UICollectionView.Delegate

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

CUSTOM LAYOUT

DEMO

THANK YOU

•mike.bluestein@xamarin.com

•@mikebluestein

• docs.xamarin.com