Questions tagged [uicollectionview]

The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. Available in iOS 6.0 and later

The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.

When adding a collection view to your user interface, your app’s main job is to manage the data associated with that collection view. The collection view gets its data from the data source object, which is an object that conforms to the UICollectionViewDataSource protocol and is provided by your app. Data in the collection view is organized into individual items, which can then be grouped into sections for presentation. An item is the smallest unit of data you want to present. For example, in a photos app, an item might be a single image. The collection view presents items onscreen using a cell, which is an instance of the UICollectionViewCell class that your data source configures and provides.

In addition to its cells, a collection view can present data using other types of views too. These supplementary views can be things like section headers and footers that are separate from the individual cells but still convey some sort of information. Support for supplementary views is optional and defined by the collection view’s layout object, which is also responsible for defining the placement of those views.

Besides embedding it in your user interface, you use the methods of UICollectionView object to ensure that the visual presentation of items matches the order in your data source object. Thus, whenever you add, delete, or rearrange data in your collection, you use the methods of this class to insert, delete, and rearrange the corresponding cells. You also use the collection view object to manage the selected items, although for this behavior the collection view works with its associated delegate object.

Collection Views and Layout Objects

A very important object associated with a collection view is the layout object, which is a subclass of the UICollectionViewLayout class. The layout object is responsible for defining the organization and location of all cells and supplementary views inside the collection view. Although it defines their locations, the layout object does not actually apply that information to the corresponding views. Because the creation of cells and supplementary views involves coordination between the collection view and your data source object, the collection view actually applies layout information to the views. Thus, in a sense, the layout object is like another data source, only providing visual information instead of item data.

You normally specify a layout object when creating a collection view but you can also change the layout of a collection view dynamically. The layout object is stored in the collectionViewLayout property. Setting this property directly updates the layout immediately, without animating the changes. If you want to animate the changes, you must call the setCollectionViewLayout:animated:completion: method instead.

If you want to create an interactive transition—one that is driven by a gesture recognizer or touch events—use the startInteractiveTransitionToCollectionViewLayout:completion: method to change the layout object. That method installs an intermediate layout object whose purpose is to work with your gesture recognizer or event-handling code to track the transition progress. When your event-handling code determines that the transition is finished, it calls the finishInteractiveTransition or cancelInteractiveTransition method to remove the intermediate layout object and install the intended target layout object.

Creating Cells and Supplementary Views

The collection view’s data source object provides both the content for items and the views used to present that content. When the collection view first loads its content, it asks its data source to provide a view for each visible item. To simplify the creation process for your code, the collection view requires that you always dequeue views, rather than create them explicitly in your code. There are two methods for dequeueing views. The one you use depends on which type of view has been requested:

Before you call either of these methods, you must tell the collection view how to create the corresponding view if one does not already exist. For this, you must register either a class or a nib file with the collection view. For example, when registering cells, you use the registerClass:forCellWithReuseIdentifier: or registerNib:forCellWithReuseIdentifier: method. As part of the registration process, you specify the reuse identifier that identifies the purpose of the view. This is the same string you use when dequeueing the view later.

After dequeueing the appropriate view in your delegate method, configure its content and return it to the collection view for use. After getting the layout information from the layout object, the collection view applies it to the view and displays it.

14313 questions
47
votes
3 answers

UICollectionView header not showing

I'm working on a project that uses an UICollectionView to show several albums. The items show fine, but now I want to show an header above the first section. To do this, I added the registerNib:forSupplementaryViewOfKind:withReuseIdentifier: to my…
Guido Hendriks
  • 5,706
  • 3
  • 27
  • 37
46
votes
9 answers

UICollectionViewCell content wrong size on first load

I have a added a UICollectionView to my UIViewController and have made a custom cell for it. I set the size of the cell using the sizeForItemAtIndexPath method and set each cell to be UIScreen.mainScreen().bounds.width/2 in both height and width. So…
myles
  • 1,681
  • 1
  • 15
  • 27
46
votes
12 answers

Reload UICollectionView header or footer?

I have some data that is fetched in another thread that updates a UICollectionView's header. However, I've not found an efficient way of reloading a supplementary view such as a header or footer. I can call collectionView reloadSections:, but this…
akaru
  • 6,299
  • 9
  • 63
  • 102
45
votes
6 answers

UICollectionView in landscape on iPhone X

When iPhone X is used landscape, you're supposed to check safeAreaInsets to make suitably large gutters on the left and right. UITableView has the new insetsContentViewsToSafeArea property (default true) to automatically keep cell contents in the…
Wes Campaigne
  • 4,060
  • 3
  • 22
  • 17
45
votes
9 answers

How can I center rows in UICollectionView?

I have a UICollectionView with random cells. Is there any method that allows me to center rows? This is how it looks by default: [ x x x x x x ] [ x x x x x x ] [ x x ] Here is what the desired layout looks like: [ x x x x x ] […
deycall
  • 453
  • 1
  • 4
  • 5
45
votes
10 answers

UICollectionView cell subviews do not resize

In a CollectionView, some cells should have an additional subview or layer. The CollectionView can be told to resize it's cells, thus all content needs to resize appropriately. Currently, the cell is initialized from a nib containing a cell with…
ceekay
  • 1,167
  • 1
  • 10
  • 14
44
votes
1 answer

VoiceOver focus resetting UICollectionView to first entry?

I’m using VoiceOver, and having an issue with a UICollectionView. I have an initial screen with ten buttons, each of which links through to one of ten cells in the collection view. The collection view is actually the full size of the screen, and…
Luke
  • 9,512
  • 15
  • 82
  • 146
44
votes
5 answers

Removing empty space, if the section header is hidden in the UICollectionView

I have two sections in UICollectionView. I want to show a section header in UICollectionView for only 1st section. Not in 0th section. So I tried to return nil in viewForSupplementaryElementOfKind: method for section == 0 and returns view for the…
Dinesh Raja
  • 8,501
  • 5
  • 42
  • 81
44
votes
8 answers

UICollectionView horizontal paging - can I use Flow Layout?

This is related to but distinct from To use Flow Layout, or to Customize?. Here is an illustration of what I’m trying to do: I’m wondering if I can do this with a UICollectionViewFlowLayout, a subclass thereof, or if I need to create a completely…
Zev Eisenberg
  • 8,080
  • 5
  • 38
  • 82
44
votes
9 answers

Why UICollectionView's UICollectionViewCell is not highlighting on user touch?

I have a UICollectionView that is made up of a custom UICollectionViewCell subclass. The cell's are displaying correctly and are responding correctly to user's touches by firing this method: - (void)collectionView:(UICollectionView *)collectionView…
IkegawaTaro
  • 3,563
  • 5
  • 21
  • 26
43
votes
8 answers

UICollectionVIew: How can I remove the space on top first cell's row?

I have this arrangement in Interface Builder, all properties are set to zero. However, when I run it on both device and simulator it appears like this Where is the space above the cells come from? So I try to set these properties for…
SaintTail
  • 6,160
  • 4
  • 31
  • 51
43
votes
4 answers

Reorder cells of UICollectionView

Consider a UICollectionView with flow layout and horizontal direction. By default, cells are ordered from top to bottom, left to right. Like this: 1 4 7 10 13 16 2 5 8 11 14 17 3 6 9 12 15 18 In my case, the collection view is paged and it has been…
hpique
  • 119,096
  • 131
  • 338
  • 476
42
votes
1 answer

UICollectionView animating cell size change causes undesired behavior

I have a UICollectionViewController that using a standard UICollectionViewFlowLayout to display a single vertical column of cells. I am attempting to create an expand/collapse animation on a cell when a cell is tapped. I use the following code to…
Cory Breed
  • 423
  • 1
  • 4
  • 8
42
votes
11 answers

UICollectionView: One Row or Column

I want to use UICollectionView to display a horizontal scrollable list of thumbnails, however, I want this to be a single row. On another view, I'm displaying the thumbnails in a UICollectionView but this one scrolls vertically and it's in a single…
William T.
  • 12,831
  • 4
  • 56
  • 53
41
votes
5 answers

How can I enable/disable section headers in UICollectionView programmatically?

How can I enable/disable section headers in UICollectionView programmatically? It can be easily done easily done in Storyboard (checkbox), but how about doing it in code?
Xyand
  • 4,470
  • 4
  • 36
  • 63