ITP 342 Mobile App Dev. Collection View

Transcription

1 ITP 342 Mobile App Dev Collection View

2 Collection View A collection view manages an ordered collection of items and presents them in a customizable layout. A collection view: Can contain optional views that visually distinguish subsets of items or provide decorative items, such as custom backgrounds Supports custom animated transitions between layouts (by default, a collection view provides animations when users insert, move, or delete items) Supports the addition of gesture recognizers to perform custom actions. 2

3 Collection View A collection view is a way to present an ordered set of data items using a flexible and changeable layout. The most common use for collection views is to present items in a grid-like arrangement, but collection views in ios are capable of more than just rows and columns. With collection views, the precise layout of visual elements is definable through subclassing and can be changed dynamically, so you can implement grids, stacks, circular layouts, dynamically changing layouts, or any type of arrangement you can imagine. 3

4 Collection Views Collection views keep a strict separation between the data being presented and the visual elements used to present that data. In most cases, your app is solely responsible for managing the data. Your app also provides the view objects used to present that data. After that, the collection view takes your views and does all the work of positioning them onscreen. It does this work in conjunction with a layout object, which specifies the placement and visual attributes for your views and that can be subclassed to fit your app s exact needs. Thus, you provide the data, the layout object provides the placement information, and the collection view merges the two pieces together to achieve the final appearance. 4

5 Collection View Basics To present its content onscreen, a collection view cooperates with many different objects. Some objects are custom and must be provided by your app. For example, your app must provide a data source object that tells the collection view how many items there are to display. Other objects are provided by UIKit and are part of the basic collection view design. Like tables, collection views are data-oriented objects whose implementation involves a collaboration with your app s objects. Understanding what you have to do in your code requires a little background information about how a collection view does what it does. 5

6 Classes and Protocols A collection view is a collaboration of objects. The design of collection views separates the data being presented from the way that data is arranged and presented onscreen. Although your app is strictly responsible for managing the data to be presented, its visual presentation is managed by many different objects. UICollectionView and UICollectionViewController UICollectionViewDataSource and UICollectionViewDelegate UICollectionReusableView and UICollectionViewCell UICollectionViewLayout, UICollectionViewLayoutAttributes, and UICollectionViewUpdateItem UICollectionViewFlowLayout and UICollectionViewDelegateFlowLayout 6

7 Top-level Containment and Management A UICollectionView object defines the visible area for your collection view s content. This class descends from UIScrollView and can contain a large scrollable area as needed. This class also facilitates the presentation of your data based on the layout information it receives from its layout object. A UICollectionViewController object provides view controller level management support for a collection view. Its use is optional. 7

8 Content Management To implement a data source object, you must create an object that conforms to the UICollectionViewDataSource protocol. The data source object is the most important object associated with the collection view and is one that you must provide. The data source manages the content of the collection view and creates the views needed to present that content. The collection view delegate object (UICollectionViewDelegate protocol) lets you intercept interesting messages from the collection view and customize the view s behavior. For example, you use a delegate object to track the selection and highlighting of items in the collection view. Unlike the data source object, the delegate object is optional. 8

9 Presentation All views displayed in a collection view must be instances of the UICollectionReusableView class. This class supports a recycling mechanism in use by collection views. Recycling views (instead of creating new ones) improves performance in general and especially improves it during scrolling. A UICollectionViewCell object is a specific type of reusable view that you use for your main data items. 9

10 Layout Subclasses of UICollectionViewLayout are referred to as layout objects and are responsible for defining the location, size, and visual attributes of the cells and reusable views inside a collection view. During the layout process, a layout object creates layout attribute objects (instances of the UICollectionViewLayoutAttributes class) that tell the collection view where and how to display cells and reusable views. The layout object receives instances of the UICollectionViewUpdateItem class whenever data items are inserted, deleted, or moved within the collection view. You never need to create instances of this class yourself. 10

11 Flow Layout The UICollectionViewFlowLayout class is a concrete layout object that you use to implement grids or other line-based layouts. You can use the class as-is or in conjunction with the flow delegate object, which allows you to customize the layout information dynamically. 11

12 Merging Content and Layout 12

13 Relationship The collection view gets information about the cells to display from its data source. The data source and delegate objects are custom objects provided by your app and used to manage the content, including the selection and highlighting of cells. The layout object is responsible for deciding where those cells belong and for sending that information to the collection view in the form of one or more layout attribute objects. The collection view then merges the layout information with the actual cells (and other views) to create the final visual presentation. 13

14 2 Ways 2 ways to add a collection view into a project (pick one) 1. Add a Collection View 2. Add a Collection View Controller 14

15 Collection View 1. Add a Collection View In the Storyboard, add a Collection View onto an existing View Controller (use the Library) In the Storyboard, connect the datasource and delegate outlets of the Collection View to the View Controller Scene (Connections Inspector) In the class for the View Controller, adhere to the UICollectionViewDataSource and UICollectionViewDelegate protocols 15

16 Collection View Controller 2. Add a Collection View Controller In the Storyboard, add a Collection View Controller (use the Library) Add a new Cocoa Touch class which inherits from UICollectionViewController In the Storyboard, set the Class to the new Swift class (Identity Inspector) 16

17 Storyboard 17

18 18

19 19

20 20

21 21

22 22

23 Xcode Create a Single View Application Create a plist (property list) file containing some information such as an array of places Create a model class to read the plist Create a class that inherits from UICollectionViewController (ios Cocoa Touch Class) Add a property of the model class Create a class that inherits from UICollectionViewCell 23

24 plist 24

25 Model Class Create a model class for the places Create a singleton Implement the init method to read the plist file and create the array of dictionary objects Create public methods for the following Getting the number of places Getting a place given an index 25

26 Model Class - plist The plist file is located in the project, not in the Documents folder. Use the NSBundle class and the pathforresource method. let path = Bundle.main.path(forResource: "Places", oftype: "plist") self.places = NSMutableArray(contentsOfFile: path!) 26

27 Storyboard Drag CollectionViewController to the storyboard and set it as the initial view controller. Set the initial scroll direction to Vertical or Horizontal depending on what you want Set the class identify to the Collection View Controller class For the cell, add an ImageView and a Label For the cell, set the class identify to the Collection Cell View Controller class 27

28 CollectionViewCell Class Add UIImageView and UILabel IBOutlets to set image and label for a particular place. Create a public method that sets up the cell by passing in a dictionary as an argument and then sets the image and text to display. 28

29 Setting the Image UIImageView has a property named image which is of type UIImage. Use the UIImage class and imagenamed method to set the image. let imagefilename = self.place["image"]! self.placeimageview.image = UIImage(named: imagefilename) 29

30 Collection View Provide the section and item counts func numberofsections(in collectionview: UICollectionView) -> Int { return 1 } func collectionview(_ collectionview: UICollectionView, numberofitemsinsection section: Int) -> Int { return self.model.numberofplaces() } 30

31 Set up the cell Collection View Use the custom collection view cell class func collectionview(_ collectionview: UICollectionView, cellforitemat indexpath: IndexPath) -> UICollectionViewCell { // Update reuseable identifer "Place" in storyboard let cell = collectionview.dequeuereusablecell(withreuseidentifier: "Place", for: indexpath) // Call CollectionViewCell methods to set up cell } return cell Update in Storyboard 31

32 Portrait and Landscape override func willtransition(to newcollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) { let layout = self.collectionview.collectionviewlayout as! UICollectionViewFlowLayout let orientation = UIDevice.current.orientation if orientation ==.portrait{ layout.scrolldirection =.vertical } else { layout.scrolldirection =.horizontal } } super.willtransition(to: newcollection, with: coordinator) 32

33 Reference entation/windowsviews/conceptual/collectio nviewpgforios/introduction/introduction.htm l#//apple_ref/doc/uid/tp ch1-sw1 33