Autolayout Can I combine CenterY with Top and Bottom Constraints?

Question

I'm trying to make this layout somehow dynamic. The options here are dynamic (unknown count), so we can easily put these options in a tableView, collectionView, or just simply scrollView.

The problem is that I wanna make this white container small if possible and centering vertically. And when I combine centerY constraint with Top+Bottom insets, only the top and bottom constraints seem to be activated.

And when the options are quite long, options can be scrollable, BUT maintaining the fact that there are top and bottom insets.

I have already some ideas in mind, such as observing if the height of the container view exceeds the device height.

I use snapKit, but the constraints should be understandable. Here's my current layout:

func setupUI() {

        self.view.backgroundColor = .clear

        self.view.addSubviews(
            self.view_BGFilter,
            self.view_Container
        )

        self.view_BGFilter.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }

        self.view_Container.snp.makeConstraints {
            $0.centerY.equalToSuperview().priority(.high)
            //$0.top.bottom.greaterThanOrEqualToSuperview().inset(80.0).priority(.medium)
            $0.leading.trailing.equalToSuperview().inset(16.0)
        }

        // Setup container
        self.view_Container.addSubviews(
            self.label_Title,
            self.stackView,
            self.button_Submit
        )

        self.label_Title.snp.makeConstraints {
            $0.top.equalToSuperview().inset(40.0)
            $0.leading.trailing.equalToSuperview().inset(16.0)
        }

        self.stackView.snp.makeConstraints {
            $0.top.equalTo(self.label_Title.snp.bottom).offset(29.0)
            $0.leading.trailing.equalToSuperview().inset(24.0)
        }

        self.button_Submit.snp.makeConstraints {
            $0.height.equalTo(52.0)
            $0.top.equalTo(self.stackView.snp.bottom).offset(30.0)
            $0.bottom.leading.trailing.equalToSuperview().inset(24.0)
        }

        self.generateButtons()
    }

Answer 1

My answer your question - CenterY with Top and Bottom constraints? - comes with just a little commentary...

I know that SnapKit is popular, and I'm sure at times it can be very helpful, especially if you use it all the time.

However... when using it you can never be absolutely sure what it's doing. And, in my experience, folks who use SnapKit often don't really understand what constraints are or how they work (not implying that's the case with you ... just an observation from looking at various questions).

In this specific case, either SnapKit has a bit of a bug, or this particular line is not quite right for the desired result:

$0.top.bottom.greaterThanOrEqualToSuperview().inset(80.0)

You can confirm it with a simple test:

class TestViewController: UIViewController {

    let testView: UIView = {
        let v = UIView()
        v.backgroundColor = .red
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(testView)

        testView.snp.makeConstraints {
            $0.centerY.equalToSuperview()

            // height exactly 200 points                
            $0.height.equalTo(200.0)

            // top and bottom at least 80 points from superview
            $0.top.bottom.greaterThanOrEqualToSuperview().inset(80.0)

            $0.leading.trailing.equalToSuperview().inset(16.0)
        }

    }

}

This is the result... along with [LayoutConstraints] Unable to simultaneously satisfy constraints. message in debug console:

If we replace that line as follows:

        // replace this line
        //$0.top.bottom.greaterThanOrEqualToSuperview().inset(80.0)

        // with these two lines
        $0.top.greaterThanOrEqualToSuperview().offset(80.0)
        $0.bottom.lessThanOrEqualToSuperview().offset(-80.0)

which certainly seems to be doing the same thing, we get what we expected:

So, something in SnapKit is fishy.

That will fix your issue. Change your view_Container constraint setup like this:

    self.view_Container.snp.makeConstraints {
        $0.centerY.equalToSuperview().priority(.required)

        // replace this line
        //$0.top.bottom.greaterThanOrEqualToSuperview().inset(80.0)

        // with these two lines
        $0.top.greaterThanOrEqualToSuperview().offset(80.0)
        $0.bottom.lessThanOrEqualToSuperview().offset(-80.0)

        $0.leading.trailing.equalToSuperview().inset(16.0)
    }

Before the change:

After the change:

As to adding scrolling when you have many Option Buttons, I can give you an example for either scrolling all the content or scrolling only the Option Buttons.