swift - 使用约束格式化 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 更靠近单元格的上边缘

添加以下与单元格的内容 View 边距相关的约束，如下所示

//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

更新

确保您已将控件添加为 subview 并设置 translatesAutoresizingMaskIntoConstraints = false

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

1. 初始化您的控件，如 let yourLabel = UILabel()

2. 设置yourLabel.translatesAutoresizingMaskIntoConstraints = false

3. 将标签添加为 subview self.addSubView(yourLabel)

4. 为您的标签添加约束