Video for this session: http://www.youtube.com/watch?v=aAPRG-5W8sI
Code for this session: https://github.com/xamarin/Seminars/tree/master/2012-11-01-CollectionViews
Collection Views are a powerful new technology in iOS 6 that allow content to be presented using arbitrary layouts. In this session, Mike Bluestein will introduce Collection Views. Mike will look at how to use Collection Views to create grid-like layouts, as well as how to create custom layouts.
6. CELLS
• UICollectionViewCell
• Represents a single item in the data set
• Has 3 parts BackgroundView
SelectedBackgroundView
• ContentView
ContentView
• SelectedBackgroundView
• BackgroundView
8. 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);
}
}
9. CELL REUSE
• Nolonger 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
10. 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;
}
11. SUPPLEMENTARY VIEWS
• Driven by section data
•A more general way of doing headers and footers
• Can use any view to create
17. DECORATION VIEWS
• Must inherit from UICollectionViewReusableView
public class MyDecorationView : UICollectionReusableView
{
[Export ("initWithFrame:")]
public MyDecorationView (System.Drawing.RectangleF frame) : base (frame)
{
BackgroundColor = UIColor.Red;
}
}
23. 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 from UICollectionViewLayout
26. FLOW LAYOUT DELEGATE
• UICollectionViewDelegateFlowLayout
• Allowslayout attributes to be set granularly per section and
item rather than globally
• ItemSize, MinimumLineSpacing, MinimumInteritemSpacing,
etc...
• Defaults to class set for UICollectionView.Delegate
27. 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