以编程方式从集合视图下方设置标签约束

Posted 2023-03-10

【中文标题】以编程方式从集合视图下方设置标签约束

【英文标题】：Set constraint on label from below collection view programmatically

【发布时间】：2020-06-09 11:04:42

【问题描述】：

将约束lbl_Title从底部设置为collectionView。

将底部约束设置为 60 时，标签位于集合视图下方，将其设置为 -60 后，将其调整为位置。

如何根据集合设置约束？

func setCollectionViewConstraints() -> Void 

    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 10).isActive = true
    collectionView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0).isActive = true
    collectionView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0).isActive = true
    collectionView.heightAnchor.constraint(greaterThanOrEqualToConstant: 60).isActive = true


func setRecentJobLabelConstraints() -> Void 

    lbl_Title.translatesAutoresizingMaskIntoConstraints = false
    lbl_Title.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -60).isActive = true
    lbl_Title.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
    lbl_Title.heightAnchor.constraint(greaterThanOrEqualToConstant: 20).isActive = true

如果将约束设置为-60，问题就解决了，我认为这是错误的方式。

【问题讨论】：

我不认为这是一个问题....您可以反转约束以仅提供 60 个...例如 bottomAnchor.constraint(equalTo: lbl_Title.bottomAnchor , constant: 60).isActive = true

【参考方案1】：

设置-60 是正确的方法。 CocoaTouch 的坐标系有点奇怪，因为它的(0,0) 位于设备的top-left 角落，而Cocoa 中的坐标系从bottom-left 开始。一旦您以编程方式执行更多自动布局，您就会习惯这一点。

注意：另外，在尝试将子视图约束为来自right 的超级视图时，您需要提供负值。

不同的方法：另一种方法是将超级视图约束到子视图，这样它更具可读性和不言自明。将super-view 的bottomAnchor 约束为sub-view 的bottomAnchor，填充为60 个点。

bottomAnchor.constraint(equalTo: lbl_Title.bottomAnchor, constant: 60).isActive = true

【参考方案2】：

这不是错误的方式，在使用底部和尾随约束时调用常量应该带有一个负值，您可以使用我创建的以下扩展而不是重复相同的自动布局线

// MARK: - Anchors Method
extension UIView 
  func anchors (top:NSLayoutYAxisAnchor? , leading:NSLayoutXAxisAnchor? , bottom : NSLayoutYAxisAnchor? , trailing: NSLayoutXAxisAnchor? , padding : UIEdgeInsets = .zero)

    translatesAutoresizingMaskIntoConstraints = false

    if let top = top 
        topAnchor.constraint(equalTo: top , constant: padding.top).isActive = true
    
    if let leading = leading 
        leadingAnchor.constraint(equalTo: leading , constant: padding.left).isActive = true
    
    if let bottom = bottom 
        bottomAnchor.constraint(equalTo: bottom , constant: -padding.bottom).isActive = true
    
    if let trailing = trailing 
        trailingAnchor.constraint(equalTo: trailing , constant: -padding.right).isActive = true
    
  

并像下面这样称呼它：

YourUIView.anchors(top: View.topAnchor , leading: View.leadingAnchor , bottom: View.bottomAnchor , trailing: View.trailingAnchor , padding: .init(top: 10, left: 10, bottom: 10, right: 10))

一个快速的建议，没有必要指定一个 void 作为返回，因为函数没有返回任何东西。