skip to Main Content

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

2

Answers


  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

    Set vertical constraint

    here’s the app running on the iPhone 12 simulator

    iPhone 12

    and here it is on an iPad (12.9 inch)

    iPad Portrait

    and here in landscape

    iPad landscape

    Login or Signup to reply.
  2. You can take parent containerView for each imageView and Button.
    Please see the picture to this link for better understand.

    https://ibb.co/dsTjxbw

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search