layout with before and after margins with equalToSystemSpacingAfter

Question

I’m trying to change some layouts I have to a number-less layout. This is what I have for a segmented bar that should be inside a container view with something like this | - margin - segmented - margin -|

segmentedControl.leadingAnchor.constraint(equalToSystemSpacingAfter: margins.leadingAnchor, multiplier: 1),
segmentedControl.trailingAnchor.constraint(equalToSystemSpacingAfter: margins.trailingAnchor, multiplier: 1),

I know that the second line doesn’t make any sense, but I don’t see any equalToSystemSpacingBEFORE just after, and I’m not sure how to do it without having to rely only on layout propagation.

Basically, the leadingAchor works fine with this code, but the trailingAnchor (as the method name implies) adds the margin AFTER the trailing anchor, which is not what I want.

any ideas?

score 1 · Accepted Answer · answered Jan 17 '20 at 16:45

You can constrain the trailingAnchor of your "container" view relative to the trailingAnchor of your segmented control.

Here's a quick example which I believe gives you the layout you want:

class SysSpacingViewController: UIViewController {

    let seg: UISegmentedControl = {
        let v = UISegmentedControl(items: ["A", "B", "C"])
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let cView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .white
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .systemYellow

        cView.addSubview(seg)
        view.addSubview(cView)

        let g = view.safeAreaLayoutGuide
        let m = cView.layoutMarginsGuide

        NSLayoutConstraint.activate([

            cView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            cView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            cView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
            cView.heightAnchor.constraint(equalToConstant: 70.0),

            seg.leadingAnchor.constraint(equalToSystemSpacingAfter: m.leadingAnchor, multiplier: 1.0),
            m.trailingAnchor.constraint(equalToSystemSpacingAfter: seg.trailingAnchor, multiplier: 1.0),

            seg.centerYAnchor.constraint(equalTo: cView.centerYAnchor),

        ])

    }

}

Result:

that's it, This worked: segmentedControl.leadingAnchor.constraint(equalToSystemSpacingAfter: view.leadingAnchor, multiplier: 1), margins.trailingAnchor.constraint(equalToSystemSpacingAfter: segmentedControl.trailingAnchor, multiplier: 1), — Wak, Jan 17 '20 at 16:47

score 0 · Answer 2 · answered Jan 17 '20 at 16:05

0

I think you can use this:

segmentedControl.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 8).isActive = true
segmentedControl.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -8).isActive = true

Please change the name of containerView and constants accordingly.

answered Jan 17 '20 at 16:05

Rob

2,086
18
25

2

I know I can use the numbers, but the reason of doing what I'm doing is that I want a number-less layout. I know it can be done, it works for the leadingAnchor but I don't understand how it's supposed to work for the trailingAnchor – Wak Jan 17 '20 at 16:08

layout with before and after margins with equalToSystemSpacingAfter

2 Answers2