CODEWITHSUNDEEP
ioscocoa-touchuicollectionviewuistoryboardnslayoutconstraint
Fattie
Fattie

Reputation: 12353

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

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

enter image description here

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)
        }
    }

Upvotes: 3

Views: 2080

Answers (1)

matt
matt

Reputation: 535850

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.)

Upvotes: 7

Related Questions