0

I am building an iPhone app using Swift, XCode 7.3.1 in Portrait orientation. We have been provided Visual Displays (from our designer) for the screens that need to be in our app. As developers we need to match the app screen elements exactly to the Visual Displays provided. We have used Auto-Layout but the match for the various elements in the screen is not exact. eg. We are having problems in changing the font size as per the iPhone model etc.

So currently we have a switch statement where we are checking the deviceModel and increasing the size of elements by a fixed percentage for iPhone 6+ and decreasing by a fixed percentage for iPhone 5/5S. Our Visual Display is based on iPhone 6 screen size so we are keeping iPhone 6 as base line.

I am sure there is a better way of doing this.Can some one please help me on this issue.

swiftBoy
  • 35,607
  • 26
  • 136
  • 135
bably
  • 1,065
  • 5
  • 17
  • 27
  • 3
    You should really use the same font size on each device, just because the display is bigger doesn't mean the text has to be bigger as well. – James P Jun 22 '16 at 09:55
  • But there should be a way to change the font size as well otherwise the display wont look good across all phones with different resolutions. Apart from the font size I also want to understand how we can adjust the height of the label, textView etc. in a screen as per phone model. So how my question is how we automatically adjust height width of various elements in screen as per device model. – bably Jun 22 '16 at 10:07
  • 2
    Use autolayout to fill the width of the device, but keep font sizes and heights the same. That way you fit more content on the bigger screens and things don't look strange. Designing everything for one screen size doesn't really work, it needs to be adaptive. – James P Jun 22 '16 at 10:20
  • Normally you would adjust the relative spacing of elements rather than the elements themselves. You also need to allow for the fact that the user can adjust the font size themselves through settings – Paulw11 Jun 22 '16 at 10:22
  • 2
    If you're trying to size the content exactly in all screen sizes so that maybe a certain label covers 5% of the screen width on an iPhone and with an iPad, then you'll still encounter problems with different aspect ratios. There will have to be a compromise made somewhere. Presumably the designs have been supplied for one size - so make it fit perfectly for that size and let autolayout do the rest for other sizes and maybe make small changes where necessary. – aronspring Jun 22 '16 at 10:24
  • 2
    They are different devices. Your app will look different on them all. Your app **should** look different on each of them. Your designer should know this and provide designs that fit each device. – Fogmeister Jun 22 '16 at 12:55

3 Answers3

1

Okay let me share my way to handle this situation.

My application is designed for :

iPhone 5 - Screen Size 4.0 inch

iPhone 6 - Screen Size 4.7 inch

iPhone 6+ - Screen Size 5.5 inch

My BASE phone is iPhone 5 Screen (4 inch)

So I asked designer to have PSD design having 4 inch size, and same I have followed while implementing in Xcode's Storyboard and most important once you have proper design, and font for the layout. we need to carefully define Auto-Layout.

Note: All the required assets/icons goes in three sizes

  • 1x for iPhone 5
  • 2x for iPhone 6
  • 3x for iPhone 6+
swiftBoy
  • 35,607
  • 26
  • 136
  • 135
1

The trick is in the splash.

Default-568h@2x.png                640 x 1136
Default.png                        320 x 480
Default@2x.png                     640 x 960

Just add in project, only drag and drop no more, you don't need add this splash anywhere, just leave them in the source project. The project search by this names and read with the same design the app in all devices, inclusive ipad.

More info here

Community
  • 1
  • 1
jose920405
  • 7,982
  • 6
  • 45
  • 71
  • Please elaborate on this. So my understanding is that if we use different splash screens to cater to different size of phones, then automatically while rendering the app, the app resizes as per the splash screen size? Please correct me if I am wrong. – bably Jun 23 '16 at 04:58
  • Yes, the splash is really the UILaunchImage. This is responsible for giving dimensions to the APPLICATION. Sizes I gave you are the standards for each of ios devices. Exactly with the names that are there are the names by default that xcode searches the compilation process to adjust the screen to the device currently being used, (important not to change the names of these splash). You only need to handle of basic contraints as the top and bottom alignments to the controller. – jose920405 Jun 23 '16 at 12:45
1

First, you don't use a switch based on three possible devices. First, you mess up iPhone 4s users and you mess up gazillions of iPad users (if you don't have an iPad version then the iPad displays a blown up 4s screen). Second, you have no idea what resolutions future devices have. And if you ever want your up to run properly on an iPad, there are two sizes, you should be able to rotate, and then you have five ways to split the screen.

The big mistake is at the very start: That you insist on matching a given design pixel by pixel. Send your designers on a course where they learn how an iOS device works. I'll quote Fogmeister, print this out in large font and hang it on your designer's desks: "They are different devices. Your app will look different on them all. Your app should look different on each of them. Your designer should know this and provide designs that fit each device."

Even if you wanted to have the 5, 6 and 6+ screens look the same except for size, that's bad design. Larger fonts are not just larger. The same font at 36 pt is not just 18 pt under a magnifying glass, there are subtle differences. Thickness of lines should not be scaled up when the size is larger, so you get bad design there.

To actually use the larger screen size, either build against the iOS 9 SDK, or supply launch screens in the required sizes (up to iOS 8, Apple assumes that if you don't have a 6+ sized launch screen for example, then you don't know how to handle the device, so they simulate a smaller one).

Then you read the screen size and use that to scale things, or use auto layout. Auto layout is a beast that you must learn how to handle. It takes time. And make sure that a 6+ can display more information than a 6 or 5, otherwise owners of larger phones will be annoyed with you.

gnasher729
  • 51,477
  • 5
  • 75
  • 98