With the release of the new iPhone X, you might be wondering, how does an app development and design company like Voltic Labs prepare for such a huge change in both hardware and software?
The biggest question we get is: Do I need to rewrite and design my app for every new iOS device?
The short answer is No, but the complete answer is a little more involved.
Apple unveiled their latest flagship device this week, the iPhone X. The biggest change so far is that the iPhone X doesn’t have a square screen like the iPhone 7 or 8. Instead its screen extends beyond the usual boundary. Leading to a very interesting challenge to both designers and app developers. How do you port your current iOS apps to this new display?
Introducing Auto Layout
Apple calls its clever content resizing API Auto Layout. It gives developers the ability to display similar looking screens across the entire iOS ecosystem without much trouble. So for example if you were to design an app using Auto Layout, an iPhone 5 app won’t look bad when displayed on an iPhone 7 Plus or vice versa.
There is a small catch though, app developers need to write clean code in order to use all of the advantages. Auto Layout is not forced in anyway, but rather its use is highly encouraged. If an app developer decides not to use it, that’s fine but if their app doesn’t look nice on a user’s iPhone 5. Well, the user will simply uninstall the app and leave a bad review, and that’s never a good thing!
Auto Layout enables developers to anchor their content to the sides of the screen, so that when the screen stretches or gets smaller, the content also changes shape based on the available width of the screen. You can also place buttons and images in specific spots with respect to other buttons, images and custom UIViews. Now that is awesome!
Everything except the top and bottom notches on the iPhone X are called safe areas, they give developers the ability to properly insert content without overlapping into the edges. For a more in depth look into Safe Areas check out this article on Medium.
What AutoLayout is not
AutoLayout is not some magical code that automatically works well in every scenario. As an app development company, we can’t just stretch an iPhone app into an iPad app, because there won’t be enough content to fill the giant iPad screen.
As an app developer, one must be cautious about the ways in which larger screens should be filled. You can only stretch the buttons so much before they look like bootlegged versions of iPhone apps (remember the early days of the iPad?).
Once you port over an iPhone app onto an iPad, we need to think about adding more functionality over the iPhone apps. The buttons will need to be resized, the views must scale up and the content must be richer on a larger screen. Since you now have a much larger area for the user to interact with, we need to be able to utilize the entire real estate of the screen.
Is Auto Layout our only saviour?
Not really, there are other content resizing options available. One of them is calculating the size of each element (i.e UIButton, UIView, UILabel) manually and placing them on the screen accordingly. Which isn’t a bad practice, but it is a lot of work. It also exposes us to use a lot of constants (numbers that stay the same) in our code, which is never a good thing. We always want to write robust and dynamic code that can change from one device to another.
There is also an option to use constraints, which is awesome alternative when using drag and drop storyboard UI. It does become somewhat tedious when making views through pure code.
Hopefully, this article gave you some insight into the app designing and development process. At Voltic Labs Calgary we love to sit down and go through the app design process in detail before even thinking about the code. This allows our designers, and developers to shave off time, iterate quickly and give a much more polished final product. Which ultimately lowers the end costs for our clients.
If you have any questions, feel free to reach out to us via email at firstname.lastname@example.org and we will be happy to assist you with a commitment free consultation!
If you would like more content like this, consider signing up for our newsletter!