Set constraint on label from below collection view programmatically

Question

Set constraint lbl_Title from bottom to collectionView.

On setting the bottom constraint 60, the label goes below the collection view, after setting it to -60 then it's adjusted to location.

How to set constraints based on collection?

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
}

Here the issue is fixed if the constraint is set to -60, I think it's the wrong way.

Answer 1

Setting -60 is the right way. The coordinate system for CocoaTouch is a bit strange because it's (0,0) is in the top-left corner of the device, compared to the coordinated in Cocoa which starts from bottom-left. You'll get used to this once you do more auto-layout programmatically.

Note: Also, you need to give negative values when trying to constraint sub-views to super-views from right.

Different Approach: Another approach would be to constraint the super-view to the sub-view this way it's more readable and self-explanatory. Constraint the bottomAnchor of super-view to sub-view's bottomAnchor with a padding of 60 points.

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

Answer 2

It is not a wrong way , calling the constant while using bottom & trailing constraints should be with a minus value , you can use the below extension i created rather than repeating the same autolayout lines over & over

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

and call it like below this :

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

A quick advice , there is no need to assign a void as a return since the function is not returning something .