Here is my weather app interface: iphone 5, 6 and ipad
What I was able to do:
- made a mockup in Photoshop and put it as a temporary background image to speed up the layout process in xcode. Much easier to align everything and set text size when you have a jpg below.
- Set all contrains for iphone 5, 6 and iPad in portrait mode only. almost there for landscape mode but couldn't figure out how to resize item based on screen size. i don't know if it's possible.
- background image stretch on all these devices (portrait mode). lots of bugs in xcode... Even if I sent the image to back (Arrange> Sent to back) it kept coming on top layer always when I run the app... had to send it to front and back again to see the UI elements. So I figured best way to do it in put bkg guide first, place UI elements, then delete bkg image to set contrains, and put final bkg image at the end only.
What I wasn't able to do
- background image doesn't stretch on ipad landscape mode. Couldn't figure out how to do it... Image is 1024 x 768. I tried with a bigger and larger one but it didn't make any difference in landscape mode. my image view is set to Scale to Fill. tried all the others without success.
- some elements are overlapping on iphone 5 landscape mode . I misses media queries and css... is there a way to adapt layout also based on screen size for some elements? seems natural to position some elements more horizontally on landscape mode but I didn't find any solution.