使用SnapKit进行UICollectionViewCell布局

Question

我有一个全宽的简单UICollectionViewCell，我使用SnapKit来布局它的子视图。我正在为我的另一个视图使用SnapKit，它工作得很好，但不是在collectionViewCell中。这就是我想要实现的布局：collectionViewCell layout

collectionViewCell的代码是：

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

在不应用任何约束的情况下，imageView显示在单元格的左上角，但是应用任何约束都会使图像消失。在调试视图中检查collectionViewCell会显示imageView和约束，但“UIImageView的大小和水平位置不明确”。

我还尝试了将contentView.translatesAutoresizingMaskIntoConstraints = false设置为其他值，但结果相同。

我使用的是所有代码，没有故事板UI或布局。

谢谢你的帮助！

Answer 1

不能同时使用自动布局(SnapKit)和手动布局(设置框架)。通常，使用自动布局会导致手动布局失败。但是，snp闭包中的约束代码并不完整。无论是使用自动布局还是手动布局，最终视图都应该获得位置和大小。

因此，您可以这样尝试：

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

Answer 2

我对SnapKit了解不多，但看起来你缺少了一个约束。你需要高度、宽度、x和y。可以很好地处理iOS9的约束。

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
    }