Simply using storyboard, constraints to set size of cell in UICollectionView

Question

Here's a UICollectionView, and the cell in purple:

Quite simply, I want the cells to be 1/2 of the collection view width. (So TBC, it will be a two rows arrangement of cells in the collection view.)

(The collection view is simply fullscreen, so each cell is half the screen width.)

How do you do this in storyboard?

If I try to control-drag in the normal way, it basically doesn't work.

These are simple totally static cells (not dynamic).

For anyone googling here, to save your time: Here's exactly (2016) the simplest way to make a two-across UICollectionView layout; no gaps between the cells.

// Two - two-across UICollectionView
// use a completely standard UIViewController on the storyboard,
// likely change scroll direction to vertical.
// name the cell identifier "cellTwo" on the storyboard
import UIKit
class Two:UICollectionViewController
    {
    override func viewDidLoad()
        {
        super.viewDidLoad()

        let w = collectionView!.bounds.width / 2.0

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.itemSize = CGSize(width:w,height:w)
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0

        collectionView!.collectionViewLayout = layout

        // Note!! DO NOT!!! register if using a storyboard cell!!
        // do NOT do this:
        // self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        }

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int
        { return 1 }
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
        {  return 5 }
    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell
        {
        return collectionView.dequeueReusableCellWithReuseIdentifier("cellTwo", forIndexPath: indexPath)
        }
    }

See this answer: http://stackoverflow.com/a/38028456/1630618 — vacawama, Jun 25 '16 at 18:47

score 6 · Accepted Answer · answered Jun 25 '16 at 18:23

You can't do it in the storyboard. The collection view width is not known until runtime, and collection view cells are not under autolayout, so you cannot express the notion "1/2 the width" of anything else. (If you did know the collection view width in advance, you could use the flow layout in the storyboard to set the cell size absolutely, by dividing in your head; but you don't know it, because the width differs depending on the device.)

Simply using storyboard, constraints to set size of cell in UICollectionView

1 Answers1