使用约束格式化UICollectionViewCell内部项

Question

我有一个UICollectionViewCell，我希望能够更自由地格式化其中的项目。这意味着 - 我希望能够设置相对于单元格本身的约束。

这是我的手机：

这是我的代码：

//image View Constraints
        let productImageTopConstraint = NSLayoutConstraint(item: ProductImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: 1) // constant was 10
        let productImageBottomConstraint = NSLayoutConstraint(item: ProductImageView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: -30)
        let productImageLeadingConstraint = NSLayoutConstraint(item: ProductImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 10)
        let productImageTrailingConstraint = NSLayoutConstraint(item: ProductImageView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: -10)

        //product name field constraints
        let productNameTopConstraint = NSLayoutConstraint(item: ProductName, attribute: .top, relatedBy: .equal, toItem: ProductImageView, attribute: .bottom, multiplier: 1, constant: 10)
        let productNameBottomConstraint = NSLayoutConstraint(item: ProductName, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0)
        let productNameLeadingConstraint = NSLayoutConstraint(item: ProductName, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 10)
        let productNameTrailingConstraint = NSLayoutConstraint(item: ProductName, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: 0)

我想要的是：

1. ImageView更接近单元格的顶部边缘
2. 产品名称标签位于中心
3. 能够在产品名称标签和单元格底边之间添加另一个标签

我怎么做 ？我如何考虑细胞的边缘？

Answer 1

您可以使用Layout Anchors来实现此目的。首先得到你的UICollectionViewCell contentView的边距，如下所示

let margins = self.contentView.layoutMarginsGuide

1. ImageView更接近单元格的顶部边缘

添加以下约束相对于单元格的内容视图边距，如下所示

//Add top, left, right constraint relative to cell content view like below

yourImageView.topAnchor.constraint(equalTo: margins.topAnchor,constant:5).isActive = true
yourImageView.leftAnchor.constraint(equalTo: margins.leftAnchor,constant:5).isActive = true
yourImageView.rightAnchor.constraint(equalTo: margins.rightAnchor,constant:5).isActive = true

2.产品名称标签位于中心

//To center align
yourLabel.centerXAnchor.constraint(equalTo: margins.centerXAnchor).isActive = true
//Now set your label top anchor to display it below your image view

yourLabel.topAnchor.constraint(equalTo: yourImageView.bottomAnchor,constant:5).isActive = true

3.能够在产品名称标签和单元格底边之间添加另一个标签

anotherLabel.topAnchor.constraint(equalTo: yourLabel.bottomAnchor,constant:5).isActive = true
anotherLabel.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true
//To center align
anotherLabel.centerXAnchor.constraint(equalTo: margins.centerXAnchor).isActive = true

UPDATE

确保已将控件添加为子视图并设置translatesAutoresizingMaskIntoConstraints = false

您应以编程方式添加约束的顺序如下

1. 像let yourLabel = UILabel()一样初始化你的控件
2. 设置yourLabel.translatesAutoresizingMaskIntoConstraints = false
3. 将您的标签添加为子视图self.addSubView(yourLabel)
4. 为您的标签添加约束

Answer 2

1

let productImageTopConstraint = NSLayoutConstraint(item: ProductImageView,
                                                   attribute: .top,
                                                   relatedBy: .equal,
                                                   toItem: self,
                                                   attribute: .top,
                                                   multiplier: 1,
                                                   constant: 1) <- make it 0 so it will be pinned to top edge

2设置ProductName.textAlignment = .center

3 a）删除productNameBottomConstraint，以便自动从文本和字体计算ProductName的高度

b）添加另一个带布局的标签

let productName2TopConstraint = NSLayoutConstraint(item: ProductName2, attribute: .top, relatedBy: .equal, toItem: ProductName, attribute: .bottom, multiplier: 1, constant: 10)
let productName2BottomConstraint = NSLayoutConstraint(item: ProductName2, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0)
let productName2LeadingConstraint = NSLayoutConstraint(item: ProductName2, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 10)
let productName2TrailingConstraint = NSLayoutConstraint(item: ProductName2, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: 0)