Advanced collection views
-
Upload
mike-bluestein -
Category
Technology
-
view
15.231 -
download
4
Transcript of Advanced collection views
![Page 1: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/1.jpg)
Mike BluesteinDeveloper/WriterXamarin
Advanced Collection Views
@mikebluestein
![Page 2: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/2.jpg)
Agenda
• Overview of Collection Views• Built-in Layout Support• Extending the Built-in Layout• Creating Custom Layouts
![Page 3: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/3.jpg)
Overview
![Page 4: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/4.jpg)
Collections Views
• Introduced in iOS 6• Layout system for item display• Easy to implement grid of items
![Page 5: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/5.jpg)
UICollectionView
• Data is provided via Data Source• Interaction is handled through Delegate• Very similar to UITableView• Manages cell selection
![Page 6: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/6.jpg)
UICollectionView
• Cells• Supplementary Views• Decoration Views
![Page 7: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/7.jpg)
Cells
• UICollectionViewCell• Represents a single item in the data set• Has 3 parts
ContentViewSelectedBackgroundViewBackgroundView
BackgroundView
SelectedBackgroundView
ContentView
![Page 8: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/8.jpg)
UICollectionViewCell
![Page 9: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/9.jpg)
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); }}
![Page 10: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/10.jpg)
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
![Page 11: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/11.jpg)
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;}
![Page 12: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/12.jpg)
Cell Reuse
![Page 13: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/13.jpg)
Supplementary Views
• Driven by section data• A more general way of doing headers and footers• Can use any view to create
![Page 14: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/14.jpg)
Supplementary Views
• Register Supplementary Views similar to Cells• GetViewForSupplementaryElement returns view• DequeueReusableSupplementary view creates view• Supplementary View inherits from UICollectionReusableView
![Page 15: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/15.jpg)
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;}
![Page 16: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/16.jpg)
Decoration Views
• Provide visual content• Not data driven• Common use to provide backdrop that scrolls with content• Associated with layout• Created in layout subclass
![Page 17: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/17.jpg)
Decoration Views
Decora4on View withPurple Color
![Page 18: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/18.jpg)
Decoration Views
• Must inherit from UICollectionViewReusableView
public class MyDecorationView : UICollectionReusableView{ [Export ("initWithFrame:")] public MyDecorationView (RectangleF frame) : base (frame) { BackgroundColor = UIColor.Purple; }}
![Page 19: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/19.jpg)
Providing Content
• UICollectionViewDataSource is used to provide data• Works similar to data source used to populate UITableView
![Page 20: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/20.jpg)
Handling Interaction
• UICollectionViewDelegate • Handles item interaction
Item SelectionHighlightingContext Menu
![Page 21: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/21.jpg)
UICollectionViewController
• Pre-defined controller• View is a UICollectionView• Usage is optional (like UITableView can also use any
UIViewController as the controller for a UICollectionView)
![Page 22: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/22.jpg)
Layout
![Page 23: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/23.jpg)
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
![Page 24: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/24.jpg)
Flow Layout
• UICollectionViewFlowLayout• Line-based layout• Grids• Automatic handling of orientation
![Page 25: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/25.jpg)
Spacing and ScrollDirection
UICollec4onViewScrollDirec4on.Horizontal UICollec4onViewScrollDirec4on.Ver4cal
![Page 26: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/26.jpg)
Flow Layout Delegate
• UICollectionViewDelegateFlowLayout• Allows layout properties to be set granularly per section and
item rather than globallyItemSizeMinimumLineSpacingMinimumInteritemSpacingetc...
![Page 27: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/27.jpg)
Subclassing Flow Layout
• Why do this?Custom Line-Based LayoutsFlow Layouts with Decoration Views
![Page 28: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/28.jpg)
Custom Line-Based Layouts
• Custom line-based layouts beyond grids• Inherit from UICollectionViewFlowLayout
![Page 29: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/29.jpg)
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;
![Page 30: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/30.jpg)
Custom Layout
• Create custom layouts that are not line-based• Inherit directly from UICollectionViewLayout• Override:
PrepareLayout - initial layout calculationsCollectionViewContentSize - display areaLayoutAttributesForElementsInRect - position items
![Page 31: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/31.jpg)
Custom Layout
![Page 32: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/32.jpg)
Layout Attributes
• Several built-in properties including:AlphaCenterHiddenSizeTransform3DZIndex
• Can create custom layout attributes as well
![Page 33: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/33.jpg)
Extending Layout Attributes
• UICollectionViewLayoutAttributes Subclass
• UICollectionViewAttributes.CreateForCell<T>• UICollectionViewAttributes.CreateForSupplementaryView<T>• UICollectionViewAttributes.CreateForDecorationView<T>
• Override ApplyLayoutAttributes
![Page 34: Advanced collection views](https://reader034.fdocuments.net/reader034/viewer/2022042607/55515abdb4c9059f768b4a8c/html5/thumbnails/34.jpg)
Demo