Search code examples
iosiphoneobjective-cipadxib

Dynamic xib layout for iPhone and iPad

I have an xib file that you can see in the image below.

enter image description here

I would like to know how I can make it so that it lays itself out correctly when being used in either iPhone or iPad devices.

Please note that the text in the labels is just used as a placeholder.

So far, I can adjust the width of

  • 1997 to 1998 label
  • SalesDescription label

and the positioning of the images without any trouble, the issue I am having happens when I try to layout the bottom line of UILables. It gets completely messed up

This is what I am trying to achieve

  • Card should stay in the same position and not change width
  • 023 should also stay in the same position and not change width
  • Num should change its position horizontally depending on the device type but maintain its width
  • 8 should change its position relative to Num however its width should change independently
  • Uni and 0052 should behave like Num and 8

With that in mind, is this possible? If it is, then I was hoping maybe someone can give me some pointers or a tutorial they think could help. I have looked at a few tutorials, however the relative positioning is what is throwing me off.

Solution

  • The things you are trying to do are all fairly easy to solve with Autolayout constraints.

    There is a bit of a learning curve, but it will be well worth the effort. Pretty much everything you wish to do can be done with no code to maintain.

    Here is a good primer on Autolayout:

    http://www.raywenderlich.com/64392/video-tutorial-beginning-auto-layout