May 12, 2015
Mike BluesteinDeveloper/WriterXamarin
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