Increasing the spacing improves the overall look of the items and prevents large gaps at the end of each line. If there is extra space at the end of the line, the layout object increases the interitem spacing until the items fit evenly within the line boundaries, as shown in Figure 3-3. If the line is just big enough to fit an integral number of items with no extra space, then the space between the items would be equal to the minimum spacing. The layout object may similarly increase the actual line-spacing when the items being laid out are different sizes.ĭuring layout, the flow layout object adds items to the current line until there is not enough space left to fit an entire item. Because of how it lays out content, the flow layout object may increase the spacing between items to a value greater than the one you specified. Keep in mind that the spacing you provide is only the minimum spacing. Using the flow layout, you can specify the minimum spacing between items on the same line and the minimum spacing between successive lines. Specifying the Space Between Items and Lines Note: When you specify different sizes for cells, the number of items on a single line can vary from line to line. Figure 3-2 Items of different sizes in the flow layout The overall height or width of the line is then determined by the largest item in that dimension. During layout, the flow layout object centers items vertically on the same line, as shown in Figure 3-2. You can use the provided index path information to return the size of the corresponding item. If you want to specify different sizes for your cells, you must implement the collectionView:layout:sizeForItemAtIndexPath: method on the collection view delegate. (Always specify the size of items in points.) This is the fastest way to configure the layout object for content whose size does not vary. If all of the items in the collection view are the same size, assign the appropriate width and height values to the itemSize property of the flow layout object.
Specifying the Size of Items in the Flow Layout Your implementation must then return appropriate values for all of the items in the collection view. If a given method exists, the flow layout object calls that method instead of using the fixed value it has. You implement these methods on the same delegate object you assigned to the collection view itself. If you want to vary the spacing or size of items dynamically, you can do so using the methods of the UICollectionViewDelegateFlowLayout protocol. For example, setting the cell size using the itemSize property of the flow layout object causes all cells to have the same size. When set, these properties are applied to all items equally in the layout. The flow layout object exposes several properties for configuring the appearance of your content. If you don’t, your items are assigned a width and height of 0 and will never be visible. Important: At a minimum, you must specify the width and height of cells. If you want section headers or section footers, specify their size. Set the spacing options (as needed) for the lines and items. The steps for configuring the flow layout are as follows:Ĭreate a flow layout object and assign it to your collection view. You can configure the flow layout either programmatically or using Interface Builder in Xcode. Items can also be different sizes, which yields something more asymmetrical than a traditional grid but that still has a linear flow to it. For example, rather than having a grid of items, you can adjust the spacing to create a single line of items along the scrolling dimension. The idea of a linear layout can be applied to many different designs. You can use the flow layout to implement grids, but you can also use it for much more. Figure 3-1 Laying out sections and cells using the flow layout The cells in a single section can be optionally surrounded with section header and section footer views. In this case, lines are laid out horizontally with each new line positioned below the previous line. Figure 3-1 shows what this looks like for a flow layout that scrolls vertically. When the layout object runs out of room on the current line, it creates a new line and continues the layout process there.
The flow layout implements a line-based breaking layout, which means that the layout object places cells on a linear path and fits as many cells along that line as it can. You can arrange items in your collection views using a concrete layout object, the UICollectionViewFlowLayout class.
0 kommentar(er)
