Search code examples
swiftautolayoutios-autolayout

How do I position a label and a button on an image so that even if the image is scaled they are at the same place on the image?

I have an almost complete app. I want to use auto layout but even though I have searched a lot about this subject I could not find an answer that I could use. I can get it to show correctly on one screen size but not on another... Here is my question

How do I put the necessary constraints so that even if the counter is scaled for the different sized devices,the label and the button are at the same place on the image? (the image is a png image)

I would really be glad if you can answer or direct me to an answer that shows how to do a similar thing.

This is what I want Demo Image

And this is what happens if I try doing it with auto layout and on a different screen size.

Demo Image 2

  • This is not the same image that I am using in my app but it will give you an idea.)

Thanks again

Edit:

Thanks for the answers but as pointed out in the comments, 1st answer does not provide a way to scale the image for different screen sizes.

Second answer provides a way but I could not understand the 2nd part of the answer.I need a little bit more detail. I would be glad if there is anyone out there who can help me on this issue.

I am still struggling with this issue. If I follow the 2nd answer Xcode says I need X position,width for the first filler view and Y position,height for the 2nd filler view.I am stuck at this point. I am not sure what value to give to these views.

Solution

  • Because the image size will change on different screen sizes, you can't set constant constraints. What you need is proportional constraints.

    1. Set your UILabel and UIButton to have the width and height proportional to the UIImageView width and height respectively.

    To do that: Click on your UILabel

    enter image description here

    and Ctrl Drag it over the UIImageView, selecting Equal Widths and Equal Heights. enter image description here

    Let's say your UILabel has a width of 100px and your UIImageView has a width of 500px. Edit the constraints that you have just set, and set the multiplier to be 100:500 enter image description here

    This will make sure that any modifications on the UIImageView width, will affect the UILabel width accordingly. Do the same for height constraint.

    Repeat same steps for UIButton.

    1. The top/bottom/trailing/leading constraint cannot be set proportional to the UIImageView size unfortunately, but you can have filler views - transparent views that can mimic the layout constraints.

    You will need two filler views: one for top constraint: enter image description here

    (set its height to be proportional to the UIImageView height)

    and one for leading constraint

    enter image description here

    (set its width to be proportional to the UIImageView width)

    I can make a small video for you if this is not clear enough.