UICollectionViewCell layout with SnapKit

Question

I have a simple UICollectionViewCell which is full width and I'm using SnapKit to layout its subviews. I'm using SnapKit for my other view and it's working great but not within the collectionViewCell. This is the layout I'm trying to achieve: collectionViewCell layout

The code for the collectionViewCell is:

lazy var imageView: UIImageView = {
    let img = UIImageView(frame: .zero)
    img.contentMode = UIViewContentMode.scaleAspectFit
    img.backgroundColor = UIColor.lightGray
    return img
}()

override init(frame: CGRect) {
    super.init(frame: frame)

    let imageWidth = CGFloat(frame.width * 0.80)
    let imageHeight = CGFloat(imageWidth/1.77)
    backgroundColor = UIColor.darkGray

    imageView.frame.size.width = imageWidth
    imageView.frame.size.height = imageHeight
    contentView.addSubview(imageView)

    imageView.snp.makeConstraints { (make) in
        make.top.equalTo(20)
        //make.right.equalTo(-20)
        //make.right.equalTo(contentView).offset(-20)
        //make.right.equalTo(contentView.snp.right).offset(-20)
        //make.right.equalTo(contentView.snp.rightMargin).offset(-20)
        //make.right.equalToSuperview().offset(-20)
    }
}

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

Without applying any constraints the imageView is displayed top left in the cell but applying any constraints makes the image disappear. Inspecting the collectionViewCell in debug view shows the imageView and constraints but the 'Size and horizontal position are ambiguous for UIImageView'.

I have also tried setting contentView.translatesAutoresizingMaskIntoConstraints = false amongst other things but the same results.

I'm using all code and no storyboard UI or layouts.

Thanks for any help!

score 0 · Answer 1 · answered Jun 01 '17 at 02:00

You can't use both auto layout (SnapKit) and manual layout (set frame). Usually, using auto layout will cause manual layout to fail. However, your code of the constraints in snp closure is not complete. Whether using auto layout or manual layout, finally the view should get the position and size.

So, you can try like this:

imageView.snp.makeConstraints { make in
   // set size
   make.size.equalTo(CGSize(width: imageWidth, height: imageHeight))
   // set position
   make.top.equalTo(20)
   make.centerX.equalTo(contentView)
}

That worked - thks. For the x position I had to update the code to - make.centerX.equalTo(contentView.snp.centerX). For my layout though, I wanted the image to hug the right side of the cell so I used make.right.equalTo(contentView.snp.rightMargin) instead. — Dennish, Jun 01 '17 at 08:38

score -1 · Answer 2 · answered May 31 '17 at 23:55

I don't know much about SnapKit but it looks like you're missing a constraint. You need height, width, x and y. Works nicely with IOS 9 constraints.

let imageView: UIImageView = {
        let view = UIImageView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.contentMode = .scaleAspectFit
        view.backgroundColor = .lightGray
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    func setupViews() {
        self.addSubview(imageView)

        imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
        imageView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10).isActive = true
        imageView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 2/3, constant: -10).isActive = true
        imageView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 1/2, constant: -10).isActive = true
    }

UICollectionViewCell layout with SnapKit

2 Answers2