Search code examples
iosobjective-cuser-interfaceautolayoutxcode8

How to use Autolayout to achieve result as per shown screen

I'm developing an app where I'm facing an issue to achieve one UI layout only for iPhone devices. This is the layout that I'd like to achieve:

This is an output I'd like to achieve for all iPhone Devices

I want to achieve overlapped views that layout should be same on every device from 5s to 7 plus.

Solution

  • The key is setting proportional constraints.

    Start with adding a UIView to hold the 4 elements - background, man, woman and heart.

    Add a UIImage for the background, and pin the edges to the edges of the view - that's the easy part.

    Add a UIImage for the Man...

    • Set the Aspect Ratio to 1:1 to keep it square (well, round in this case).
    • Set the Height constraint equal to the Height of the "containing" view, but then set the multiplier to less than 1 to make it relative to the view. In this case, 0.6 is pretty close.
    • Set constraints for Centered Horizontally and Vertically... then set the Multipliers to keep the image left and above the centers. 0.64 on horizontal, and 0.9 on vertical work pretty good.

    Add a UIImage for the Woman...

    • Set the Height and Width constraints equal to the Man image.
    • Set constraints for Centered Horizontally and Vertically... then set the Multipliers to keep the image right and below the centers. 1.4 on horizontal, and 1.2 on vertical work pretty good.

    Add a UIImage for the Heart...

    • Set the Aspect Ratio to 1:1 (or whatever gives you the proper ratio for your heart image).
    • Set the Height constraint equal to the Height of the "containing" view, but then set the multiplier to less than 1 to make it relative to the view. In this case, 0.15 is pretty close.
    • Set constraints for Centered Horizontally and Vertically... then it will need a little adjustment o note Vertical 1.05 worked for me.

    Now, you just need to set appropriate constraints for the "containing" view, and all the elements will scale and position themselves within it.

    When you're all done, it should (hopefully) look like this:

    enter image description here

    I put the project up in a GitHub repo for you to look at: https://github.com/DonMag/AnotherLayoutExample