{"id":374,"date":"2016-05-29T02:22:39","date_gmt":"2016-05-29T02:22:39","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=374"},"modified":"2016-05-30T20:08:52","modified_gmt":"2016-05-30T20:08:52","slug":"uicollectionview-custom-layout-the-ultimate-tutorial-part-2","status":"publish","type":"post","link":"https:\/\/strawberrycode.com\/blog\/uicollectionview-custom-layout-the-ultimate-tutorial-part-2\/","title":{"rendered":"UICollectionView Custom Layout: the Ultimate Tutorial \u2013 Part 2"},"content":{"rendered":"

Welcome back to the “UICollectionView Custom Layouts: the Ultimate Tutorial” series. This is Part 2, where we will actually tackle the custom layout part.
\nIf you haven’t seen or done the first part<\/a>, I strongly recommend you to take a look at it, as we will be using the UICollectionView<\/code> we created there.<\/p>\n

Remember what we had at the end of Part 1<\/a>, when we run the project without the custom layout, and what we would like to achieve?<\/p>\n

\"CollectionView       \"Wireframe<\/p>\n

A few words<\/h2>\n

A few words before we start:<\/p>\n

I recommend you to have a look at Session 232 of WWDC 2014: Advanced User Interfaces with Collection Views<\/a> for the Custom Layout questions, and at Session 226 of WWDC 2014: What’s new in Table and Collection Views<\/a> concerning the cell sizing. I won’t go into the details here as everything is well explained on the videos.
\nHere, we will focus on the implementation.<\/p>\n

Preparing the cells<\/h2>\n

First, we need to add a bit of code in the TextCell<\/code> class, as this cell will need to get resized. Simply paste the following code in TextCell.swift<\/code><\/p>\n

override func preferredLayoutAttributesFittingAttributes(layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {\r\n        \r\n    let attr = layoutAttributes.copy() as! UICollectionViewLayoutAttributes\r\n\r\n    self.setNeedsLayout()\r\n    self.layoutIfNeeded()\r\n        \r\n    let desiredHeight: CGFloat = self.contentView.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height\r\n    attr.frame.size.height = desiredHeight\r\n    self.frame = attr.frame  \/\/ Do NOT forget to set the frame or the layout won't get it !!!\r\n\r\n    return attr\r\n}<\/pre>\n
Let’s add a simpler version of it in the ItemCell<\/code> class:<\/p>\n
override func preferredLayoutAttributesFittingAttributes(layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {\r\n        \r\n    let attr = layoutAttributes.copy() as! UICollectionViewLayoutAttributes\r\n    self.setNeedsLayout()\r\n    self.layoutIfNeeded()\r\n    self.frame = attr.frame\r\n\r\n    return attr\r\n}<\/pre>\n
This part of the code enables the Layout to calculate the new size of the cell, matching its content.<\/p>\n
You don’t need similar code for ImageCell<\/code> because its size is fixed, set in the custom layout and not re-calculated.<\/p>\n
And now, take a deep breath, we will create the long-awaited custom layout!<\/p>\n
UICollectionViewFlowLayout<\/h2>\n
Let’s start with the first baby step:<\/p>\n
Create a new file, subclass of UICollectionViewFlowLayout<\/code> and name it MyCollectionViewFlowLayout<\/code>.<\/p>\n
Then, let’s add some configuration: section variables, initializations and basic setup.<\/p>\n
let cellHeight: CGFloat = 200\r\nvar itemWidth: CGFloat = 200\r\nlet itemRatio: CGFloat = 1.33\r\nvar layoutInfo = [NSIndexPath: UICollectionViewLayoutAttributes]()\r\nvar layoutHeaderInfo = [NSIndexPath: UICollectionViewLayoutAttributes]()\r\nvar collectionViewWidth: CGFloat = 0\r\nvar maxOriginY: CGFloat = 0\r\nvar textHeight: CGFloat = 0.0\r\nvar itemsPerRow = 0\r\n\r\nlet numberOfSections = 4\r\nlet sectionImage = 0\r\nlet sectionText = 1\r\nlet sectionItem = 2\r\n\r\n\r\noverride init() {\r\n    super.init()\r\n    setup()\r\n}\r\n\r\nrequired init(coder aDecoder: NSCoder) {\r\n    super.init(coder: aDecoder)!\r\n    setup()\r\n}\r\n\r\nfunc setup() {\r\n    \/\/ setting up some inherited values\r\n    \r\n    minimumInteritemSpacing = 0\r\n    minimumLineSpacing = 0\r\n    scrollDirection = UICollectionViewScrollDirection.Horizontal\r\n    \r\n    collectionViewWidth = UIScreen.mainScreen().bounds.width\r\n    if let collectionView = collectionView {\r\n        collectionViewWidth = collectionView.frame.size.width\r\n    }\r\n    \r\n    itemWidth = getItemWidth()\r\n    headerReferenceSize = CGSizeMake(collectionViewWidth, 50)\r\n}\r\n\r\n\r\nfunc getItemWidth() -> CGFloat {\r\n    \/\/ calculate here the size of the items -- see example on GitHub\r\n}\r\n<\/pre>\n
Also, don’t forget to add the class in the Collection View attributes<\/code> in the Storyboard. Select “Custom” and type “CustomCollectionViewLayout” in the class field. Obvious, but oh so easy to forget ;)<\/p>\n
PrepareLayout<\/h2>\n
Now, let’s tackle the heart of the problem<\/del> custom layout:<\/p>\n
The first function to create is prepareLayout<\/code>, which, as its name states, prepares the layout.<\/p>\n
The documentation says :<\/p>\n
<\/p>\n
“Tells the layout object to update the current layout.
\nLayout updates occur the first time the collection view presents its content and whenever the layout is invalidated explicitly or implicitly because of a change to the view. During each layout update, the collection view calls this method first to give your layout object a chance to prepare for the upcoming layout operation.
\nThe default implementation of this method does nothing. Subclasses can override it and use it to set up data structures or perform any initial computations needed to perform the layout later.”<\/p>\n
<\/em><\/div>\n
In this function, we will loop over the sections and items to get the actual size of each element, and to keep track of the height of the content.
\nAnd as we would like to have a code as elegant as possible, we will do the size calculation in a separate function, called frameForItemAtIndexPath<\/code>.<\/p>\n
override func prepareLayout() {\r\n    \r\n    maxOriginY = 0\r\n    setup() \/\/ can also be triggered only if the layout or collectionView bounds have changed\r\n    \r\n    for i in 0 ..< numberOfSections {\r\n        \r\n        if let collectionView = self.collectionView {\r\n            \r\n            for j in 0 ..< collectionView.numberOfItemsInSection(i) {\r\n                let indexPath = NSIndexPath(forRow: j, inSection: i)\r\n                \r\n                let itemAttributes = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)\r\n                itemAttributes.frame = frameForItemAtIndexPath(indexPath)\r\n                \r\n                if (indexPath.section < sectionItem) {\r\n                    maxOriginY += itemAttributes.frame.size.height\r\n                    \r\n                } else if (indexPath.section == sectionItem) {\r\n                    let allRows = (indexPath.item % Int(itemsPerRow)) == (Int(itemsPerRow) - 1)\r\n                    let lastRow = indexPath.item == (collectionView.numberOfItemsInSection(i) - 1)\r\n                    \r\n                    if (allRows || lastRow) {\r\n                        \/\/ add height only if there is \"itemsPerRow\" items per row, or if multiple rows: last item per row\r\n                        maxOriginY += itemAttributes.frame.size.height\r\n                    }\r\n                }\r\n                layoutInfo[indexPath] = itemAttributes\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\nfunc frameForItemAtIndexPath(indexPath: NSIndexPath) -> CGRect {\r\n    \r\n    if (indexPath.section == sectionImage) {\r\n        return CGRectMake(0, maxOriginY, collectionViewWidth, collectionViewWidth)\r\n        \r\n    } else if (indexPath.section == sectionText) {\r\n        \r\n        var currentCellHeight = max(textHeight, cellHeight)\r\n        if let collectionView = self.collectionView {\r\n            if let cell = collectionView.cellForItemAtIndexPath(indexPath) as? TextCell {\r\n                textHeight = max(textHeight, cell.frame.height)\r\n                currentCellHeight = textHeight\r\n            }\r\n        }\r\n        return CGRectMake(0, maxOriginY, collectionViewWidth, currentCellHeight) \/\/ width, height\r\n        \r\n    } else if (indexPath.section == sectionItem) {\r\n        \r\n        let currentColumn = ceil(CGFloat(indexPath.item % itemsPerRow))\r\n        let posX = currentColumn * itemWidth\r\n        let rect = CGRectMake(posX, maxOriginY, itemWidth, itemWidth * itemRatio)\r\n        \r\n        return rect\r\n    }\r\n    return CGRectZero\r\n}<\/pre>\n
Then, we will make sure that the UICollectionView<\/code> has the right size:<\/p>\n
override func collectionViewContentSize() -> CGSize {\r\n    \r\n    guard let collectionView = self.collectionView else { return CGSizeMake(UIScreen.mainScreen().bounds.width, maxOriginY)}\r\n    return CGSizeMake(collectionView.frame.width, maxOriginY)\r\n}<\/pre>\n
Pretty straight forward.<\/p>\n
Layout Attributes<\/h2>\n
Two more thing and we’re done! Now that we have calculated the size of the cells and that we know the size of the UICollectionView<\/code>, we can determine the attributes<\/code>, ie what will appear on screen in a rect<\/code> or at a certain indexPath<\/code>:<\/p>\n
override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {\r\n    \r\n    var allAttributes: [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()\r\n\r\n    for (_, attributes) in layoutInfo {\r\n        if CGRectIntersectsRect(rect, attributes.frame) {\r\n            allAttributes.append(attributes)\r\n        }\r\n    }\r\n    return allAttributes\r\n}\r\n\r\noverride func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {\r\n    return layoutInfo[indexPath]\r\n}<\/pre>\n
Should invalidate layout<\/h2>\n
And the last step to finalize the layout: we want to invalidate the layout when needed, ie make sure the cells are calculated according to the actual space available, and not according to the layout estimated size.<\/p>\n
override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {\r\n    \/\/ if you don't want to re-calculate everything on scroll\r\n    return !CGSizeEqualToSize(newBounds.size, self.collectionView!.frame.size)\r\n}\r\n\r\n\r\noverride func shouldInvalidateLayoutForPreferredLayoutAttributes(preferredAttributes: UICollectionViewLayoutAttributes, withOriginalAttributes originalAttributes: UICollectionViewLayoutAttributes) -> Bool {\r\n    \r\n    if (originalAttributes.indexPath.section >= sectionText) {\r\n        \/\/ true only for sections that needs to be updated (the ones that are changing size)\r\n        \/\/ ie. the ones that are using preferredLayoutAttributesFittingAttributes to self-resize\r\n        return true\r\n    }\r\n    return false\r\n}<\/pre>\n
I hope this tutorial series helped a bit. As I said at the beginning, I tried to cover different cell configurations to give you the tools to start experimenting with custom layouts, now it’s up to you to go further! And, who knows, maybe Apple will soon release something to help us deal (easily) with variable height in UICollectionViewCells<\/code> like they did for UITableView<\/code>… <\/p>\n
All the code for this tutorial is available on GitHub: SCCollectionViewCustomLayout<\/a>. As usual, don’t hesitate to fork it and play with it! Also, there is a little bonus: I’ve included a dynamic HeaderView<\/code> in the UICollectionView<\/code> and Custom Layout :) You’re welcome! <\/p>\n
\nIf you have read that far, thank you! Really! I know it has been long, but you won’t go unrewarded, I have some extra tips to share with you :)\n<\/div>\n
Pro tips: <\/h3>\n