Constraint Compare

LayoutConstraints.swift

// VFL (View Format Language) จริงๆดูดีนะ แต่น่าจะไม่รองรับทุกเคส

let views = [
    "redView": redView,
    "greenView": greenView
]

let metrics = [
    "padding": padding,
    "spacing": spacing
]

let hRedConstraints = NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-(padding)-[redView]-(padding)-|",
    options: [],
    metrics: metrics,
    views: views
)

let hGreenConstraints = NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-(padding)-[greenView]-(padding)-|",
    options: [],
    metrics: metrics,
    views: views
)

let vContraints = NSLayoutConstraint.constraints(
    withVisualFormat: "V:|-(padding)-[redView(==greenView)]-(spacing)-[greenView]-(padding)-|",
    options: [],
    metrics: metrics,
    views: views
)

let constraints = hRedConstraints + hGreenConstraints + vContraints
NSLayoutConstraint.activate(constraints)


// NSLayoutConstraint ดาดๆ ยาวเวิ่นเว่อมาก

 NSLayoutConstraint.activate([
    NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: padding),
    NSLayoutConstraint(item: view!, attribute: .trailing, relatedBy: .equal, toItem: redView, attribute: .trailing, multiplier: 1.0, constant: padding),
    NSLayoutConstraint(item: greenView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: padding),
    NSLayoutConstraint(item: view!, attribute: .trailing, relatedBy: .equal, toItem: greenView, attribute: .trailing, multiplier: 1.0, constant: padding),
    NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: padding),
    NSLayoutConstraint(item: greenView, attribute: .top, relatedBy: .equal, toItem: redView, attribute: .bottom, multiplier: 1.0, constant: spacing),
    NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: greenView, attribute: .height, multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: view!, attribute: .bottom, relatedBy: .equal, toItem: greenView, attribute: .bottom, multiplier: 1.0, constant: spacing),
])


// Layout Anchors นี่คือ ดูดีสุดละนะ ยาวอยู่ดี (เมื่อเทียบกับ CSS กร้ากก)

NSLayoutConstraint.activate([
    redView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: padding),
    greenView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: padding),
    view.trailingAnchor.constraint(equalTo: redView.trailingAnchor, constant: padding),
    view.trailingAnchor.constraint(equalTo: greenView.trailingAnchor, constant: padding),
    redView.topAnchor.constraint(equalTo: view.topAnchor, constant: padding),
    greenView.topAnchor.constraint(equalTo: redView.bottomAnchor, constant: spacing),
    redView.heightAnchor.constraint(equalTo: greenView.heightAnchor),
    view.bottomAnchor.constraint(equalTo: greenView.bottomAnchor, constant: padding),
])

หน้าตา output