Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced collection views

18,126 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

×