In the mobile development world it’s common to support many devices, and therefore many screen sizes. Android devices come in a huge variety of sizes as do iPhones and iPads. Desktops and laptop sizes vary; but mobile is where you really notice the variety because they are so radically different.
Imagine you’d like to write an app and have it work on as many devices, and sizes, as possible. Do you have to write a lot of code to move buttons around and resize them so they look just OK on all those devices? Or do you just hard code things so that it looks OK on a few well known device sizes and say “to heck with the rest”? Is there perhaps another way to deal with this flood of devices that doesn’t involve writing a lot of code, yet still looks as intended when your app runs on a device you didn’t plan for?
Yes, there is and it’s called Auto Layout.
Imagine you can, at design time, simply make a button stay proportionally spaced fom another button, or make a button stay the right distance from the edge, regardless of the device it is on. You write no code. You just make the layout and Auto Layout does exactly this – regardless of if you run your app on a small device like a phone or a large device like a tablet. It’s certainly easier than creating one UI for “small devices” (phones up to a certain size), another for “medium devices” (tablets), and yet another for “large devices” (like full size 10+ inch tablets), and possibly another for desktop screens.
Localized apps, where strings in one language may be longer or shorter, varying DPI of devices, possible different metrics between versions of the same OS, possible changes in metrics at run time like the user deciding to use a different default font size on the device than you designed for, and trying to create a handful of layouts become a real chore. Add in that Xojo is a cross-platform framework and we have to account for OS X, Windows & Linux- which all have different metrics. And don’t forget that a good internationalized application should respect cultural differences like using left to right or right to left. It’s a lot to have to consider. How much code did you say you wanted to write to handle all this?
So, this is where Auto Layout comes in. Apple has been promoting the use of Auto Layout for a few releases of OS X and iOS, in part because you can use it to create designs for various UI aspects of your app that adapt themselves in intelligent ways based on how much screen real estate a specific device has.
Auto Layout allows you to specify the relationships between controls in the UI (for example, keep button A spaced to the left of button B by the “standard” spacing) rather than specifying things in absolute pixel terms. Remember varying DPI’s and all those other fun bits can affect how a UI should look.
Auto Layout replaces the locking properties you have in Xojo today. You still lay out your controls via drag and drop. In fact, when you use the layout guidelines that automatically appear as you position controls, Xojo will automatically create most of the Auto Layout rules (called “constraints”) for you. Later, you can tweak them where needed to get exactly the behavior you want.
For anyone not familiar with Auto Layout, you should watch the first 4 minutes of Apple’s WWDC video from 2013 “Taking Control of Auto Layout in Xcode“, it offers a great explanation of the various issues.
Auto Layout goes beyond just making UI’s adapt to a few devices with different resolutions. It makes it possible to deal with a great number of things that influence how your UI should look in a powerful and expressive way.
And, of course, because Xojo’s goal is to abstract you from all these issues so you can focus on your app, we’re using it with Xojo iOS!