UICollectionViewCell 中的 Swift3 中心项

服部半藏

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

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() {

    }
}

唐麦格

虽然可视化格式语言可以很方便，但它也可以去除一些约束的“明确性”，并且很容易错过一些明显的东西......

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

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

管道/竖线符号“|” 告诉自动布局视图被“固定”到其父视图的边缘。在您的情况下，您都明确设置了单元格的大小imageView 和大小（in sizeForItemAt），并且您说的是“将 imageView 的侧面固定到单元格的侧面”。有些东西不会满足。

如果您只是删除“|” 来自这两行的符号：

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

使用一致的方法可能会使遗漏的可能性降低一些。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。