1

I know this question seems to be a old-school one, but I can't find a nice answer to it, there is the thing:

The logical screen resolutions for iPhone5, iPhone6 and iPhone6+:

iPhone5   320 x 568
iPhone6   375 x 667
iPhone6+  414 x 736

Assume that I have a square UI element at the center of the screen, and there is three ways to constrain its width(&height) over different devices:

  1. width is constant
  2. width/screen.width is constant
  3. screen.width - width is constant

these three different ways of constraining result in three different appearances:

Picture 1: 3 different appearances

I think the 2nd way of constraining (i.e. middle column in the Picture 1) is most natural from designer's point of view but it's least natural from programmer's point of view. I need to check device type and calculate dimensions and use different images for different devices(autolayout can't help in this circumstance)

1st way seems very natural to implement, but it sucks in practice, especially when dealing with text font sizes.

3rd one also need to judge which image to use programmatically, because three UI elements in three different devices do not match the simple @x2 @x3 scale factors.

Is there any work around to easily implement 2nd way of constraining?

Nandin Borjigin
  • 2,094
  • 1
  • 16
  • 37
  • The UI element needs the proper constraints - do not hardcode any screen values. `1)` Add horizontal and vertical center constraints (this will keep it centred). `2)` Add a width = height constraint to the square (this will make it a square). `3)` Add a width = proportion of superview constraint to the square (this will give it a width and a height based on the screen size without any hardcoded screen values and will work for all devices). – Robotic Cat Apr 02 '16 at 13:47

3 Answers3

1

You can just give Horizontally in Container and Vertically in Container constraints to view which is in centre if ViewController and if needed then give Height and Width of View itself.

Akshay Hastekar
  • 158
  • 11
0

If you are using storyboard you can easily calculate the 2nd way you want. You can give proportional width with the superview. As you can see in the image you can give multiplier to your views. Or you can create a width constraint in your code such as:

@IBOutlet weak var widthConstraint: NSLayoutConstraint!

and you can update your constraint in your code.

ridvankucuk
  • 2,407
  • 1
  • 23
  • 41
  • Thank u for your quick reply. The storyboard doesn't help with the image selection, assume that `multiplier = 0.5`, then i need `160x160px` image for iphone5 and `187.5x187.5px` image for iphone6 – Nandin Borjigin Apr 02 '16 at 09:40
  • When you add the image with the sizes `@x`, `@2x` and `@3x` you don't need to add any other different size of that image. – ridvankucuk Apr 02 '16 at 09:43
  • And what i can do for font size? – Nandin Borjigin Apr 02 '16 at 09:49
  • both of iphone5 and iphone6 use @2x. They need different size of image, but i can only provide one size at the same time – Nandin Borjigin Apr 02 '16 at 09:49
  • What do you mean by font size? Do you want different font sizes for different resolutions? – ridvankucuk Apr 02 '16 at 09:57
  • yes, sometimes. For guide views(ones appear at the first time app launched), the font size of the texts is always large, so the difference between 3 devices must be taken account. I found a work around that in such circumstance i can convert my texts into images. – Nandin Borjigin Apr 02 '16 at 10:53
0

Use Macro's

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)

#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)

#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)

#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)

#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))

#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)

#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)

#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)

#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)

if(IS_PHONE_5){//TODO}

if(IS_PHONE_6){//TODO}

Rahul Sharma
  • 284
  • 1
  • 17