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
•@mikebluestein
• docs.xamarin.com