iOS-针对imageView上按钮的不同屏幕尺寸的自动布局缩放

Question

I have a parent UIView with a UIImageView and another UIView inside. The UIImageView has an image and it's constrained to the same size of the parent UIView. The child UIView is also constrained to the same size of the parent UIView and it has buttons that position above certain parts of the UIImageView (this allows the user to click on the image to trigger an action depending on where the image was clicked).

I've tried to set constraints with AutoLayout by using size classes, but I can't seem to get them to resize accordingly to screen sizes. I've created the fixed constraints on an iPhone 8 screen. iPhone 8, iPhone X, and iPhone 8 Plus all have width Compact/height Regular, however it only looks right on iPhone 8/X. I also would like the button sizes to scale down for iPhone SE/4s.

Here is what it looks like (blue blackground has been replaced for the real image): notice the buttons are the same size in all 3 screens

parent UIView constraints

child UIImageView constraints

child UIView constraints

The buttons inside the child UIView have fixed constraints of top/trailing/leading/bottom according to the iPhone 8/X screen size.

How can I get the buttons to resize accordingly for all screen sizes while maintaining the same position over the image that also scales depending on screen sizes?

UPDATE: After replacing the inner UIView with a StackView and updating the constraints, with the distribution filled equally it looks like the following structure:

Replaced UIView with StackView

How do I get it to look like this?

original screen

UPDATE 2:

Added spacing and centered X/Y of stackView.

updated stackView

UPDATE 3: The image I have in the imageView has Content Mode in Aspect Fit. How do I scale the buttons in this mode?

Answer 1

First regarding parent view don't give it static height(371) -> instead give a proportional height constraint to main view

Second regarding inner subviews

1- imageView won't resize as you think as it has leading , Trailing , Top , B constraints

2- same for the view with buttons

instead of give those constraints consider giving centerX&Y with proprtional width & height constraints for these subviews to the parent view

Also stackView will fit for these buttons if you don't already use it

Answer 2

You have to use equal width and equal height constraints for buttons to make it adopt size according to the screen size.

Place two horizontal views over the image. and make their height constraint equal. for reference view below image.

then place buttons inside those views then set equal width constraints. for reference view below image.

Hope this will help you.