The Core iOS Developer’s Cookbook, Fifth Edition (2014)

---

Views

To create a collection view for embedding into another view (without using a UICollectionViewController), establish a layout, create the collection view using the layout, and set the data source and delegate. The flow layout delegate utilizes the object you set as the collection view’s delegate property:

UICollectionViewFlowLayout *layout =
[[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero
collectionViewLayout:layout];
collectionView.dataSource = self;
collectionView.delegate = self;

Data Sources and Delegates

View controllers coordinating collection views declare UICollectionViewDataSource and UICollectionViewDelegate. Unlike with table views, when using a flow layout, a third protocol is also declared, UICollectionViewDelegateFlowLayout.

The delegate flow layout protocol coordinates layout information with your collection’s layout instance through a series of callbacks. Your collection view’s delegate adopts this protocol—that is, you do not have to specify a third collection view property like delegateFlowLayout.

As with table views, the data source provides section and item information and returns cells and other collection view items on demand. The delegate handles user interactions and provides meaningful responses to user changes. The flow layout delegate introduces section-by-section layout details and is, for the most part, completely optional. You’ll read about flow layouts and their delegate callbacks in the next section.

Flow Layouts

Flow layouts provided by the UICollectionViewFlowLayout class create organized grid presentations in an application. They provide built-in properties that you edit directly or establish via delegate callbacks. These properties specify how the flow sets itself up to place items onscreen. In its most basic form, the layout properties provide you with a geometric vocabulary, where you talk about row spacing, indentation, and item-to-item margins.

Scroll Direction

The scrollDirection property controls whether sections are lined up horizontally (UICollectionViewScrollDirectionHorizontal) or vertically (UICollectionViewScroll-DirectionVertical). Figure 10-1 demonstrates otherwise identical layouts with horizontal (left) and vertical (right) flows. The members of each grouped section wrap to available space, based on the current flow. Because there is more vertical space than horizontal space in the iPhone portrait presentation, section groups are longer and thinner in the horizontal flow than in the vertical flow.

Figure 10-1 Horizontal (left) and vertical (right) flows determine a collection view’s overall scrolling direction. The left image scrolls left–right. The right image scrolls up–down. For each example, a flow layout automatically handles wrapping duties at the end of each line. There are 6 items per line in the left image and 4 per line on the right. Each section includes 12 items.

Item Size and Line Spacing

Use the itemSize property to specify the default size for each onscreen item, like the small squares in Figure 10-1. The minimumLineSpacing and minimumInteritemSpacing properties specify how much space you need wrapped between objects within each section. Line spacing always goes between each line in the direction of flow. For example, line spacing refers to the space between S0(0) and S0(6) in Figure 10-1 (left) or between S0(0) and S0(4) in Figure 10-1 (right). Item spacing is orthogonal (at right angles) to lines, specifying the gap to leave between each consecutive item, such as between S0(0) and S0(1) and between S0(1) and S0(2).

Figure 10-2 shows these properties in action, in this case using a vertical flow. The left figure shows consistent spacing of 10 points. The middle figure expands line spacing to 50 points. This space appears between lines of items, where the flow wraps from one line to the next. The right figure expands item spacing to 30 points. Item spaces appear along each row, adding spacers between each object.

Figure 10-2 Minimum line and inter-item spacing control how items are wrapped within each section. Item sizes specify the dimensions for each cell. The left image uses default spacing. The center image increases line spacing to 50 points. The right image increases inter-item spacing to 30 points.

As with many new layout items introduced in iOS 6 and later, these settings are requests. Specifically, the spacing may exceed whatever value you specify, but the layout tries to respect the minimums you assign.

You can set the mentioned layout properties directly to assign default values applied across an entire collection. You can also use flow layout delegate callback methods to specify values from code. Setting these values at runtime offers far more nuance than the default settings, as they are applied on a section-by-section and item-by-item basis rather than globally. The following methods handle item size and minimum spacing:

collectionView:layout:sizeForItemAtIndexPath:—Corresponds to the itemSize property, on an item-by-item basis.

collectionView:layout:minimumLineSpacingForSectionAtIndex:—Corresponds to the minimumLineSpacing property but controls it on a section-by-section basis.

collectionView:layout:minimumInteritemSpacingForSectionAtIndex:—Corresponds to the minimumInteritemSpacing property, again on a section-by-section basis.

Of these, the first method for item sizes offers the adaptation most typically used in iOS development. It enables you to build collections whose items, unlike those shown in Figure 10-2, vary in dimension. Figure 10-4, which follows later in this chapter, shows a flow layout that adjusts itself to multisized contents.

Header and Footer Sizing

The headerReferenceSize and footerReferenceSize properties define how wide or how high header and footer items should be. Notice the difference between the extents for these items in Figure 10-3 in the top two and bottom two screen shots. The horizontal flow at the top uses 60-point-wide spacing for these two items. The vertical flow at the bottom uses 30-point-high spacing. Although you supply a full CGSize to these properties, the layout uses only one field at any time, based on the flow direction. For horizontal flow, it’s the width field; for vertical flow, it’s the height.

Figure 10-3 Section insets control the space that leads up to and away from a section’s items. The top images show a horizontal flow and the bottom images a vertical flow. All images use a top spacing of 50 points and a bottom spacing of 30 points, along with 10-point left and right spacing.

Here are the two callbacks used to generate the Figure 10-3 layouts. They return complete size structures even though only one field is used at any time. If the delegate does not implement these methods, the flow layout object uses the property values above:

- (CGSize) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(60.0f, 30.0f);
}

- (CGSize) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(60.0f, 30.0f);
}

Insets

The two minimum spacing properties define how each in-section item relates to other items within a section. In contrast, the sectionInset property describes how the outer edges of a section add padding. This padding affects how sections relate to their optional headers and footers and how sections move apart from each other in general.

Edge insets consist of a set of {top, left, bottom, right} values. Figure 10-3 shows how this works with collection views. Each shot in Figure 10-3 presents a flow using the same edge insets of 50 points at the top, 30 points at the bottom, and 10 points left and right:

UIEdgeInsetsMake(50.0f, 10.0f, 30.0f, 10.0f)

The top screens show a horizontal flow and the bottom screens a vertical flow. In each case, you see how the insets affect layout. The insets pad the content items from their enclosing container. In the horizontal flow, the content items adjust vertically from the top of the collection view to allow for the top spacing and horizontally from the header and footer. In the vertical flow, the padding of the content items happens below the header and above the footer. Similarly, the left and right spacing are incorporated between the edges of the collection view and the contained items.

Recipe: Basic Collection View Flows

Recipe 10-1 introduces a basic collection view controller implementation, with support for optional headers and footers. This recipe implements the essential data source and delegate methods you need for a simple grid-based flow layout. Apple provides a number of properties to configure responses for the common collection view and flow layout delegate methods. Use these provided properties and simple modification of the source to adjust the number of sections to be viewed, the items per section, and any other layout details that control the overall flow.

Boolean properties determine whether a collection view uses headers and footers. The size can be configured by implementing the first two reference size requests in Recipe 10-1. You’ll find these two methods, one each for header and footer, just after the Flow Layout pragma mark. Returning a 0 size to the header or footer flow delegate method tells the collection view to omit those features for the section in question. When you return any other size, the collection view moves on to requesting the supplementary views for either a header or footer.

Make sure to register all cell and supplementary view classes before using them in your data source. Recipe 10-1 registers its classes in its viewDidLoad method. Once they are registered, you can dequeue instances on demand. You do not have to check whether a dequeuing request returns a usable instance. The methods create and initialize instances for you when needed.

We encourage you to dive into the sample code for Recipe 10-1 and tweak each layout value and callback (which was done to create the figures you’ve already seen in this section) to see how they affect overall flow and appearance. Recipe 10-1 offers a great jumping-off point for testing collection views and seeing how each property influences the final presentation.

Recipe 10-1 Basic Collection View Controller with Flow Layout