将按钮的中间放在手机屏幕的底部（无论屏幕大小如何）

Question

I would like to ask how can one set a constraint such that the middle of a button is located at the bottom of the screen for different iOS screen size?

This is the ideal case where middle of button is placed at the bottom of the screen, and the bottom half is not shown on screen:

With the below code, this is what's happening, which is not what I wanted:

I have tried this:

[qrScanner.bottomAnchor constraintEqualToAnchor:self.bottomLayoutGuide.topAnchor constant:100].active = YES;

but it only works on iPhone 6 screen, not on other screen, such as iPad Mini.

May I know if there's any way that can generalise such formula so that all centre of buttons are nicely placed at the bottom of the screen regardless of screen size?

Please help, I have tried for days and searched everywhere but cannot find a single clue. Thanks!

Answer 1

[qrScanner.centerYAnchor constraintEqualToAnchor:self.bottomLayoutGuide.topAnchor constant:0].active = YES;

Answer 2

Based off what your mockups look like, I'm guessing that your button does not have a fixed size, but rather it grows/shrinks depending on the size of the container. Because of this, the offset of 100 only works when your button happens to have a height of 200.

I'm not sure how you determine the size of the button, but as far as positioning goes, you want to center its X coordinate, and then set a bottom constraint where the button's center Y val is equal to the container's bottom. These are the 2 constraints you will need to add for positioning:

// Center X value in the view
[NSLayoutConstraint constraintWithItem:button
                             attribute:NSLayoutAttributeCenterX
                             relatedBy:NSLayoutRelationEqual
                                toItem:self.view
                             attribute:NSLayoutAttributeCenterX
                            multiplier:1
                              constant:0];

// Center button's Y value to the bottom of the view
[NSLayoutConstraint constraintWithItem:button
                             attribute:NSLayoutAttributeCenterY
                             relatedBy:NSLayoutRelationEqual
                                toItem:self.view
                             attribute:NSLayoutAttributeBottom
                            multiplier:1
                              constant:0];

Answer 3

斯威夫特4.2

qrScanner.centerYAnchor.constraint(equalTo: view.bottomAnchor).isActive = true