Swift UICollectionView单元格宽度

Question

I'm trying to build a collection view without using interface builder, but I haven't been able to adjust the width of the cells. The cells appear to stay at their minimum square size, where I'd like the cells to stretch the width of the view.

What am I getting wrong with the constraints?

Specifically:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width, height: 50)
}

Doesn't seem to be adjusting the width or height for the cells, full example:

import UIKit

class UserCollectionViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.title = "foo"
        collectionView?.backgroundColor = UIColor.red
        collectionView?.alwaysBounceVertical = true
        collectionView?.register(UserCell.self, forCellWithReuseIdentifier: "cellId")
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let userCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)
        return userCell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: 50)
    }
}

class UserCell:UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    let nameLabel: UILabel = {
        let label = UILabel()
        label.text = "foo"
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.boldSystemFont(ofSize: 14)
        return label
    }()

    func setupView() {
        addSubview(nameLabel)
        let hConstraints = NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": nameLabel])
        addConstraints(hConstraints)
    }
}

Answer 1

In terms of what's wrong with the constraints, you're missing the vertical constraints:

func setupView() {
    addSubview(nameLabel)

    var constraints: [NSLayoutConstraint] = []
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", metrics: nil, views: ["v0": nameLabel])
    constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", metrics: nil, views: ["v0": nameLabel])
    addConstraints(constraints)
}

But that's not why your cells are the wrong size. That's because your sizeForItemAt will not be called because you haven't declared UICollectionViewDelegateFlowLayout conformance. Set a breakpoint where you have it now, and you'll see it's not called. You can fix this by moving it into an extension where you define the conformance:

extension UserCollectionViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.bounds.width, height: 50)
    }
}

Or, better, since they're all the same, I'd just set itemSize for the whole layout:

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = collectionView!.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize(width: view.bounds.width, height: 50)
}

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)

    let layout = self.collectionView!.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize(width: size.width, height: 50)
}

Answer 2

What am I getting wrong with the constraints?

Nothing. The width of a UICollectionViewCell under a UICollectionViewFlowLayout has nothing to do with its internal constraints. (There is supposed to be a feature that allows this, but it has never worked for me.)

It is up to you to set the width explicitly, either by setting the flow layout's itemSize or by implementing collectionView(_:layout:sizeForItemAt:) in the collection view's delegate (which is usually a UICollectionViewController, and in any case must also explicitly adopt UICollectionViewDelegateFlowLayout as you've been told in Rob's answer).

So just change this:

class UserCollectionViewController: UICollectionViewController {

to this:

class UserCollectionViewController : UICollectionViewController, UICollectionViewDelegateFlowLayout {

and you're done.

Answer 3

Create an extension on UIView and add this code:

extension UIView {

    func addConstraintsWithformat(format: String, views: UIView...) {
        // abstracting contstraints code
        var viewsDict = [String: UIView]()
        for(index,view) in views.enumerated() {
            let key = "v\(index)"
            viewsDict[key] = view
            view.translatesAutoresizingMaskIntoConstraints = false
        }
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDict))

    }
}

Then Create a custom class for your collectionViewCell and add this code:

    private func setUpContainerView() {
        let containerView = UIView()
        addSubview(containerView)
        addConstraintsWithformat(format: "H:|-90-[v0]|", views: containerView)
        addConstraintsWithformat(format: "V:[v0(50)]|", views: containerView)
        addConstraint(NSLayoutConstraint(item: containerView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0))

        // set up labels and contents inside the ContainerView and set their constraints with addConstraintsWithformat
    }

Call this code in override func setUpViews() {}