使用约束格式化 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)

我想要的：

ImageView 更靠近单元格的上边缘
产品名称标签居中
能够在产品名称标签和单元格底边之间添加另一个标签

我该怎么做？我如何考虑单元格的边缘？

Answer 1

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)

Answer 2

您可以使用 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

更新

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

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

像let yourLabel = UILabel()
设置yourLabel.translatesAutoresizingMaskIntoConstraints = false
将您的标签添加为子视图self.addSubView(yourLabel)
为您的标签添加约束条件

使用约束格式化 UICollectionViewCell 内部项目

Formatting UICollectionViewCell inner items with constraints

constraints

nslayoutconstraint

uicollectionviewcell

swift