ios - Fixed Button Position Relative to ImageView in Xcode

Question

In my project I would like to essentially 'Pin' a button to a certain position on an image. The imageView scales to the screen size from the centre and maintains its aspect ratio.

I am trying to make it so that each button remains over the chakras "coloured icons in centre of body". I need them to maintain a scale that is the size of the chakras and maintain their position over the chakras regardless of screen size.

Wanted Result

Current Result

Scaling Settings

Aspect Settings

question from:https://stackoverflow.com/questions/65904900/fixed-button-position-relative-to-imageview-in-xcode

Answer 1

Here's an example - you will want to play with the exact positioning, but this should show you the method. You can do everything using auto layout in Xcode.

I took one of your images, and edited it to remove the buttons, and used it as the image in a UIImageView filling the screen of a UIViewController

Then I created 7 small buttons, and added constraints to them width & height = 20, and Align Centre Y to Image View

The tricky part is to add a constraint to align the centre of each button to a fixed percentage of the UIImageView centre - and that will be trial and error until it looks right.

Here's how to set the constraint

here's the app running on the iPhone 12 simulator

and here it is on an iPad (12.9 inch)

and here in landscape