0

My existing app has two Storyboards (for iPhone and iPad), and it supports iOS7+. I am now planning to convert it to one storyboard using Autolayouts and Size Classes, but I have few confusions:

  • What will the size of the images? For instance, right now without Size Classes and Autolayouts, I ask designer to slice images for iPhone5, and iPad and make them @2x and @3x respectively. But for Autolayouts, what size they will have to slice i.e what screen size will they choose and then will give me images accordingly for @2x and @3x, i.e what universal screen size? For instance, I ask them to give me a background image of screen size. What size will they give me? From what I understand, it should not be iPhone specific or iPad specific as the app will be universal.

  • I am aware of the fact that Size Classes support iOS8 onwards, so what about iOS7? I will have to do things programatically for iOS7? Will I have to use device-specific images or can I use universal size images for iOS7 as well?

Wain
  • 118,658
  • 15
  • 128
  • 151
Munahil
  • 2,381
  • 1
  • 14
  • 24
  • See http://stackoverflow.com/questions/24172860/how-can-xcode-6-adaptive-uis-be-backwards-compatible-with-ios-7-and-ios-6 – Wain Sep 02 '15 at 06:41

2 Answers2

1

size classes doesnt mean you cant be specific with things anymore, you should still set the background to be a suitable phone sized image for when the size class is the shape of a phone (compact x regular), and set a suitable iPad sized image when its the size of an iPad (regular x regular).

it seems like you can still use size classes in iOS 7 with some limitations

i think you are viewing the size classes as having one generic storyboard that will solve your problems of having a specific iPad and iPhone storyboard like before, which is partly true, all it really does is save you having two separate storyboards, so if your ipad and iphone screens differ, you would need to have the differences layout out in the different size classes (in your case the different sized backgrounds are a difference). it might just save you having to specify your autolayouts twice in 2 different storyboards (and even then maybe not)

Community
  • 1
  • 1
Fonix
  • 11,447
  • 3
  • 45
  • 74
  • Thanks. And what about the image sizes? – Munahil Sep 02 '15 at 06:47
  • can probably just use your old ones, its not like the devices screens have changed... :P – Fonix Sep 02 '15 at 06:48
  • If for instance, a new UI is created, then what size will it be then? because in image xcassets, we can choose "Universal" or "Device Specific". I want to know about the "Universal" size? – Munahil Sep 02 '15 at 06:54
  • you should only use universal, if the image is the same size for iphone and ipad, like a button or something, the background of a viewcontroller is quite specific, so you will need one for each screen size still – Fonix Sep 02 '15 at 06:55
  • Alright. So, for instance, I want the background image in Any-Any mode of Storyboard, so I should ask designer to make the screen of size 600x600 and give it to me in 2x and 3x, and after adding it to the "Universal" in image xcasset, I will get the right size for all the devices? – Munahil Sep 02 '15 at 07:02
  • you can do that, but it will probably be squashed on iphone and stretched on ipad which is probably undesirable. you still would want to have different images for the different screen sizes, like you had before using size classes, iphoneBG@2x iphoneBG@3x ipadBG@2x ipadBG@3x etc then change which image is used in the different size classes in the storyboard, and maybe have a default one that is used for any x any (which probably wont even get used if you have specified the others) – Fonix Sep 02 '15 at 07:05
  • so for compact x regular use iphoneBG and for regular x regular use ipadBG (the *@2x and *@3x will be automatically selected like normal) – Fonix Sep 02 '15 at 07:07
  • Right. So considering the Designer's point of view, there is not much advantage of autolayouts and size classes for them? – Munahil Sep 02 '15 at 07:08
  • not really no, size classes is more of a convenience for the developer – Fonix Sep 02 '15 at 07:09
0

For images, you still need different images from design team as:

imageName@2x.png: 640 x 960 (iPhone 4. iPhone 4s)
imageName-568h@2x.png: 640 x 1136 (iPhone 5, iPhone 5s)
imageName-667h@2x.png: 750 x 1334 (iPhone 6, Portrait)
imageName-736h@3x.png: 1242 x 2208 (iPhone 6 Plus, Portrait)
imageName~ipad.png: 750 x 1334 (iPad)
imageName~ipad@2x.png: 1242 x 2208 (iPad Retina)

For icons, we will prefer to make a font file from svg of the icons using icomoon.io website.

During development, we need to validate image name on device level. Just look into this utility: https://github.com/victorjiang/UIImage-VJDeviceSpecificMedia/blob/master/UIImage%2BVJDeviceSpecialMedia.m

Ankit Thakur
  • 4,739
  • 1
  • 19
  • 35