SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
Introduction to
Collection Views


    November 1, 2012

     Copyright 2012 © Xamarin Inc. All rights reserved
Mike Bluestein
                    Xamarin Documentation Team
                    mike.bluestein@xamarin.com
                    @mikebluestein




                                                    Xamarin
Copyright 2012 © Xamarin Inc. All rights reserved
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                           BackgroundView
                                           SelectedBackgroundView
 • ContentView
                                             ContentView

 • SelectedBackgroundView

 • BackgroundView
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

• 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
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

• DequeueReusableSupplementary       view 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.Red;
                }
           }
CREATE DECORATION VIEWS

• RegisterClassForDecorationView                           in layout class
   RegisterClassForDecorationView (typeof(MyDecorationView), myDecorationViewId);




• UICollectionViewLayoutAttributes.CreateForDecorationView

   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

• Usageis 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 from UICollectionViewLayout
FLOW LAYOUT

• UICollectionViewFlowLayout

• Line-based   layout

• For   example, grids

• Automatic    handling of
 orientation
FLOW LAYOUT


• Customline-based layouts
 beyond grids

• Caninherit from
 UICollectionViewFlowLayout
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
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
Xamarin
    Seminar
   Please give us your feedback
  http://bit.ly/xamfeedback


      Follow us on Twitter
        @XamarinHQ



        Copyright 2012 © Xamarin Inc. All rights reserved

Mais conteúdo relacionado

Mais de Xamarin

Exploring UrhoSharp 3D with Xamarin Workbooks
Exploring UrhoSharp 3D with Xamarin WorkbooksExploring UrhoSharp 3D with Xamarin Workbooks
Exploring UrhoSharp 3D with Xamarin WorkbooksXamarin
 
Desktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin
Desktop Developer’s Guide to Mobile with Visual Studio Tools for XamarinDesktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin
Desktop Developer’s Guide to Mobile with Visual Studio Tools for XamarinXamarin
 
Developer’s Intro to Azure Machine Learning
Developer’s Intro to Azure Machine LearningDeveloper’s Intro to Azure Machine Learning
Developer’s Intro to Azure Machine LearningXamarin
 
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UICustomizing Xamarin.Forms UI
Customizing Xamarin.Forms UIXamarin
 
Session 4 - Xamarin Partner Program, Events and Resources
Session 4 - Xamarin Partner Program, Events and ResourcesSession 4 - Xamarin Partner Program, Events and Resources
Session 4 - Xamarin Partner Program, Events and ResourcesXamarin
 
Session 3 - Driving Mobile Growth and Profitability
Session 3 - Driving Mobile Growth and ProfitabilitySession 3 - Driving Mobile Growth and Profitability
Session 3 - Driving Mobile Growth and ProfitabilityXamarin
 
Session 2 - Emerging Technologies in your Mobile Practice
Session 2 - Emerging Technologies in your Mobile PracticeSession 2 - Emerging Technologies in your Mobile Practice
Session 2 - Emerging Technologies in your Mobile PracticeXamarin
 
Session 1 - Transformative Opportunities in Mobile and Cloud
Session 1 - Transformative Opportunities in Mobile and Cloud Session 1 - Transformative Opportunities in Mobile and Cloud
Session 1 - Transformative Opportunities in Mobile and Cloud Xamarin
 
SkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.FormsSkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.FormsXamarin
 
Building Games for iOS, macOS, and tvOS with Visual Studio and Azure
Building Games for iOS, macOS, and tvOS with Visual Studio and AzureBuilding Games for iOS, macOS, and tvOS with Visual Studio and Azure
Building Games for iOS, macOS, and tvOS with Visual Studio and AzureXamarin
 
Intro to Xamarin.Forms for Visual Studio 2017
Intro to Xamarin.Forms for Visual Studio 2017Intro to Xamarin.Forms for Visual Studio 2017
Intro to Xamarin.Forms for Visual Studio 2017Xamarin
 
Connected Mobile Apps with Microsoft Azure
Connected Mobile Apps with Microsoft AzureConnected Mobile Apps with Microsoft Azure
Connected Mobile Apps with Microsoft AzureXamarin
 
Introduction to Xamarin for Visual Studio 2017
Introduction to Xamarin for Visual Studio 2017Introduction to Xamarin for Visual Studio 2017
Introduction to Xamarin for Visual Studio 2017Xamarin
 
Building Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioBuilding Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioXamarin
 
Building Your First Android App with Xamarin
Building Your First Android App with XamarinBuilding Your First Android App with Xamarin
Building Your First Android App with XamarinXamarin
 
Building Your First Xamarin.Forms App
Building Your First Xamarin.Forms AppBuilding Your First Xamarin.Forms App
Building Your First Xamarin.Forms AppXamarin
 
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#Xamarin
 
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOps
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOpsXamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOps
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOpsXamarin
 
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...Xamarin
 
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...Xamarin
 

Mais de Xamarin (20)

Exploring UrhoSharp 3D with Xamarin Workbooks
Exploring UrhoSharp 3D with Xamarin WorkbooksExploring UrhoSharp 3D with Xamarin Workbooks
Exploring UrhoSharp 3D with Xamarin Workbooks
 
Desktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin
Desktop Developer’s Guide to Mobile with Visual Studio Tools for XamarinDesktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin
Desktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin
 
Developer’s Intro to Azure Machine Learning
Developer’s Intro to Azure Machine LearningDeveloper’s Intro to Azure Machine Learning
Developer’s Intro to Azure Machine Learning
 
Customizing Xamarin.Forms UI
Customizing Xamarin.Forms UICustomizing Xamarin.Forms UI
Customizing Xamarin.Forms UI
 
Session 4 - Xamarin Partner Program, Events and Resources
Session 4 - Xamarin Partner Program, Events and ResourcesSession 4 - Xamarin Partner Program, Events and Resources
Session 4 - Xamarin Partner Program, Events and Resources
 
Session 3 - Driving Mobile Growth and Profitability
Session 3 - Driving Mobile Growth and ProfitabilitySession 3 - Driving Mobile Growth and Profitability
Session 3 - Driving Mobile Growth and Profitability
 
Session 2 - Emerging Technologies in your Mobile Practice
Session 2 - Emerging Technologies in your Mobile PracticeSession 2 - Emerging Technologies in your Mobile Practice
Session 2 - Emerging Technologies in your Mobile Practice
 
Session 1 - Transformative Opportunities in Mobile and Cloud
Session 1 - Transformative Opportunities in Mobile and Cloud Session 1 - Transformative Opportunities in Mobile and Cloud
Session 1 - Transformative Opportunities in Mobile and Cloud
 
SkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.FormsSkiaSharp Graphics for Xamarin.Forms
SkiaSharp Graphics for Xamarin.Forms
 
Building Games for iOS, macOS, and tvOS with Visual Studio and Azure
Building Games for iOS, macOS, and tvOS with Visual Studio and AzureBuilding Games for iOS, macOS, and tvOS with Visual Studio and Azure
Building Games for iOS, macOS, and tvOS with Visual Studio and Azure
 
Intro to Xamarin.Forms for Visual Studio 2017
Intro to Xamarin.Forms for Visual Studio 2017Intro to Xamarin.Forms for Visual Studio 2017
Intro to Xamarin.Forms for Visual Studio 2017
 
Connected Mobile Apps with Microsoft Azure
Connected Mobile Apps with Microsoft AzureConnected Mobile Apps with Microsoft Azure
Connected Mobile Apps with Microsoft Azure
 
Introduction to Xamarin for Visual Studio 2017
Introduction to Xamarin for Visual Studio 2017Introduction to Xamarin for Visual Studio 2017
Introduction to Xamarin for Visual Studio 2017
 
Building Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual StudioBuilding Your First iOS App with Xamarin for Visual Studio
Building Your First iOS App with Xamarin for Visual Studio
 
Building Your First Android App with Xamarin
Building Your First Android App with XamarinBuilding Your First Android App with Xamarin
Building Your First Android App with Xamarin
 
Building Your First Xamarin.Forms App
Building Your First Xamarin.Forms AppBuilding Your First Xamarin.Forms App
Building Your First Xamarin.Forms App
 
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#
Intro to Xamarin for Visual Studio: Native iOS, Android, and Windows Apps in C#
 
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOps
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOpsXamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOps
Xamarin Mobile Leaders Summit | Solving the Unique Challenges in Mobile DevOps
 
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...
Xamarin Mobile Leaders Summit: The Mobile Mind Shift: Opportunities, Challeng...
 
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...
Xamarin Mobile Leaders Summit: Business at the Point of Inspiration: Producti...
 

Último

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Último (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Introduction to Collection Views in iOS 6

  • 1. Introduction to Collection Views November 1, 2012 Copyright 2012 © Xamarin Inc. All rights reserved
  • 2. Mike Bluestein Xamarin Documentation Team mike.bluestein@xamarin.com @mikebluestein Xamarin Copyright 2012 © Xamarin Inc. All rights reserved
  • 3. UICOLLECTIONVIEW • New in iOS 6 • Items displayed with layout • Easy to implement grid of items
  • 4. UICOLLECTIONVIEW • Data is provided via Data Source • Interaction is handled though Delegate • Very similar to UITableView • Manages cell selection
  • 5. UICOLLECTIONVIEW • Cells • Supplementary Views • Decoration Views
  • 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
  • 13. SUPPLEMENTARY VIEWS • Register Supplementary Views similar to Cells • GetViewForSupplementaryElement returns view • DequeueReusableSupplementary view creates view • Supplementary View inherits from UICollectionReusableView
  • 14. 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; }
  • 15. DECORATION VIEWS • Provide visual content • Not data driven • Common use to provide backdrop • Associated with layout • Created in layout subclass
  • 17. DECORATION VIEWS • Must inherit from UICollectionViewReusableView public class MyDecorationView : UICollectionReusableView { [Export ("initWithFrame:")] public MyDecorationView (System.Drawing.RectangleF frame) : base (frame) { BackgroundColor = UIColor.Red; } }
  • 18. CREATE DECORATION VIEWS • RegisterClassForDecorationView in layout class RegisterClassForDecorationView (typeof(MyDecorationView), myDecorationViewId); • UICollectionViewLayoutAttributes.CreateForDecorationView var decorationAttribs = UICollectionViewLayoutAttributes.CreateForDecorationView (myDecorationViewId, NSIndexPath.FromItemSection (0, 0)); decorationAttribs.Size = rect.Size; decorationAttribs.Center = CollectionView.Center; decorationAttribs.ZIndex = -1;
  • 19. PROVIDING CONTENT • UICollectionViewDataSource is used to provide data • Works similar to data source used to populate UITableView
  • 21. HANDLING INTERACTION • UICollectionViewDelegate handles item interaction • Item Selection • Highlighting • Context Menu
  • 22. CONTROLLER • UICollectionViewController • Pre-defined controller • View is a UICollectionView • Usageis optional (like UITableView can also use any UIViewController as the controller for a UICollectionView)
  • 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
  • 24. FLOW LAYOUT • UICollectionViewFlowLayout • Line-based layout • For example, grids • Automatic handling of orientation
  • 25. FLOW LAYOUT • Customline-based layouts beyond grids • Caninherit from UICollectionViewFlowLayout
  • 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
  • 29. DEMO
  • 30. Xamarin Seminar Please give us your feedback http://bit.ly/xamfeedback Follow us on Twitter @XamarinHQ Copyright 2012 © Xamarin Inc. All rights reserved

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n