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内部项

2 个答案: