INTRODUCTION TO COLLECTION VIEWS

sprocketexponentialMobile - Wireless

Dec 10, 2013 (4 years and 21 days ago)

646 views

INTRODUCTION TO
COLLECTION VIEWS
Using MonoTouch and C
Mike Bluestein
Xamarin
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 UICollectionViewReusableView
public 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