Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Positioning Button over Image

I have a full screen ImageView (margins constraints) with an Image in "Aspect Fit Mode" and I need to have a button to be over a specific part of that image on all devices.

I have tried to put constraints in different ways, but without any good result.

I hope someone could help me.

Here you can find a screenshot of what I want:

https://www.dropbox.com/s/krl5rp47w2rxl0g/Schermata%202015-09-12%20alle%2015.15.43.png?dl=0

The yellow block is the button and I want it to be over the shoulder for any screen size.

This is iOS 8.

like image 439
David P Avatar asked Sep 11 '26 11:09

David P


1 Answers

Try proportional Constraints. Add the following 4 constraints to your button (values are not exact)

  1. Give your button a proportional width constraint with ImageView. So button width will become 10% of ImageView width for example.
  2. Give your button a proportional height constraint with ImageView. So button height will become 10% of ImageView height for example.
  3. Now center y of button is 40% of center y of ImageView(value is approx.) Try different value to get your goal
  4. Now center x of button is 80% of center x of ImageView.

Apple recommend using proportional constraints. Try to change the percent values slightly to fit the button on shoulder. Once you fit the button on shoulder with these constraints It will look fine on all device . Thanks

like image 170
Irfan Avatar answered Sep 13 '26 00:09

Irfan