UICollectionViewCell 中的 Swift3 中心项目

Question

我正在尝试使用以下代码在 UICollectionViewCell 自定义 class 中将 UIImageView 居中，但不起作用

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

我也在设置单元格的宽度和高度

NSLayoutConstraint.activate([imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor)])
NSLayoutConstraint.activate([imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor)])

我做错了什么？

已编辑 我要存档的完整代码

import UIKit

class MenuBar: UIView,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{

    lazy var collectionView:UICollectionView = {

        let verticalLayout = UICollectionViewFlowLayout()
        let cv:UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: verticalLayout)
        cv.backgroundColor = UIColor.rgb(red: 230, green: 32, blue: 31)
        cv.delegate = self
        cv.dataSource = self
        return cv
    }()

    let cellId:String = "cellId"

    override init(frame: CGRect) {

        super.init(frame: frame)

        collectionView.register(MenuCell.self, forCellWithReuseIdentifier: cellId)

        addSubview(collectionView)
        addConstraintsWithFormat(format: "H:|[v0]|", views: collectionView)
        addConstraintsWithFormat(format: "V:|[v0]|", views: collectionView)


    }

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

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)

        return cell
    }

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

class MenuCell:BaseCell{

    override func setupViews() {
        super.setupViews()

        //backgroundColor = UIColor.yellow

        addSubview(imageView)
        addConstraintsWithFormat(format: "H:|[v0(28)]|", views: imageView)
        addConstraintsWithFormat(format: "V:|[v0(28)]|", views: imageView)

        NSLayoutConstraint.activate([imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor)])
        NSLayoutConstraint.activate([imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor)])
    }

    let imageView:UIImageView = {
        let iv:UIImageView = UIImageView()
        iv.image = UIImage(named: "home")

        return iv
    }()

}

extension UIView{
    func addConstraintsWithFormat(format:String, views:UIView...){
        var viewsDictionary = [String:UIView]()

        for(index, view) in views.enumerated(){
            let key:String = "v\(index)"

            view.translatesAutoresizingMaskIntoConstraints = false
            viewsDictionary[key] = view


        }

        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))

    }
}

extension UIColor{
    static func rgb(red:CGFloat,green:CGFloat,blue:CGFloat)->UIColor{
        return UIColor(colorLiteralRed: Float(red/255), green: Float(green/255), blue: Float(blue/255), alpha: 1)
    }
}



class BaseCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)

        setupViews()
    }

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

    func setupViews() {

    }
}

Answer 1

虽然视觉格式语言可以方便，但它也可以去除一些"explicitness"的约束，并且很容易遗漏一些明显的东西.. .

在您的 MenuCell class 中，您将 imageView 添加为子视图，然后调用：

    addConstraintsWithFormat(format: "H:|[v0(28)]|", views: imageView)
    addConstraintsWithFormat(format: "V:|[v0(28)]|", views: imageView)

竖线/竖线符号“|”告诉自动布局视图在其父视图的边缘 "pinned"。在您的情况下，您都明确设置了 imageView 和单元格的大小（在 sizeForItemAt 中）和你是说 "pin the sides of imageView to the sides of the cell." 有些事情不会令人满意。

如果您只是简单地删除“|”这两行的符号：

    addConstraintsWithFormat(format: "H:[v0(28)]", views: imageView)
    addConstraintsWithFormat(format: "V:[v0(28)]", views: imageView)

您的单元格中应该有一个居中的 28x28 图像视图。

注意：由于您通过 NSLayoutConstraint.activate() 调用来遵循它，因此您也可以以这种方式设置这些约束：

    imageView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([imageView.widthAnchor.constraint(equalToConstant: 28.0)])
    NSLayoutConstraint.activate([imageView.heightAnchor.constraint(equalToConstant: 28.0)])

    NSLayoutConstraint.activate([imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor)])
    NSLayoutConstraint.activate([imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor)])

使用一致的方法可能会降低失误的可能性。

UICollectionViewCell 中的 Swift3 中心项目

Swift3 center Item in UICollectionViewCell

xcode

ios

uicollectionviewcell

swift3