Advanced collection views

17,977 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

Advanced collection views

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

×