Nick Harris

Adaptive UI Part One – Introduction

leave a comment »

A little over a year ago, at WWDC 2014, Apple announced a suite of tools and UIKit changes to support what it calls Adaptive User Interface. The idea behind Adaptive UI is to easily allow app makers to support a wide variety of devices and orientations without having to write specific code for each device. Personally for me the announcement of Swift took up most of the sessions I attended so I didn’t give Adaptive UI much thought until last fall when the iPhone 6 and 6+ were introduced. With the announcement of iOS 9 and the ability to run side by side apps on iPad I figured I needed to take yet another look at Adaptive UI and what it really means to support all devices and orientations.

This series of posts will use a sample workspace I created. Its very simple and I’m sure there are many nuances, tips and tricks that I’ll miss. But there are a number of other tutorials and articles. I’d recommend Rene Ritchie’s summary on iMore from last September as well as Sam Davies tutorial on raywenderlich.com.

Demo App Idea

The demo app is called One Eyed Royals. The idea is to show the three royal cards in a standard playing card deck and the wikipedia explanation of their nickname. The UI should fill as much of the screen real-estate as possible by scaling the images for the cards and adjusting the font for the description. It should also look slightly different in landscape mode on iPhone to keep the font size readable and not require the user to scroll the content.

screen_shot_1 screen_shot_2

(iPhone)

screen_shot_3 screen_shot_4

(iPad) 

Tools

There are three main tools you use to build an Adaptive UI – Auto Layout, Storyboards and Size Classes. Notice I didn’t mention anything about Swift or Objective-C. My demo is done completely in Interface Builder without needing a single line of code. I think that’s important to know. I see many developers use macros to determine devices and screen sizes then use hard coded values for view sizes and placements. Break yourself of that habit. Instead use the tools Apple recommends.

Auto Layout

Adaptive UI means thinking about UI elements in terms of how they orient themselves with other UI elements. Desktop developers have had this mindset for a very long time. Users expect to resize windows on a desktop to whatever size they like. iOS developers (as well as Mac and Windows Desktop devs) have long had the idea of “Springs and Struts” to do this. Adaptive UI however means using Auto Layout.

Auto layout is a constraint based approach to UI design. I’m not going to try and give a good description of what that means. The best way to understand Auto Layout is to start using it and fight through the learning curve. There have been plenty of times when I’ve thrown up my hands in frustration and walked away for a bit before coming back to an Auto Layout issue. But I can say that the more you work with it the easier it becomes and you’ll start to understand the power behind it.

The demo workspace has an incredibly simple demo app that shows how to anchor labels at top right, center and bottom left of a “view”.

Storyboards

The battle over Storyboards versus xib files is still going strong. You can use Auto Layout and Size Classes with both so I’ll leave that choice up to you. I prefer Storyboards for their grouping of related UI. The project I work on is BIG. If each view had its own xib we would be struggling to figure out how they relate to each other. Storyboards do a lot of that for us. There’s also the misconception that you use only one Storyboard. You can use as many as you want and Xcode 7’s Storyboard References make it even easier.

Size Classes

Size Classes are odd but awesome. Instead of needing to define all of your constraints for all devices in a single place, you can instead break them down into subsets that inherent from a parent and allow you to disable, remove or add new constraints for a particular set of devices. Currently there are only “regular” and “compact” size classes for various devices and orientations. Apple docs are the best place to read about which devices use which Size Classes.

For my own understanding I included a simple app in the demo workspace that updates a label with the Size Class information. There are UIViewController delegate methods and properties that give you this information in code.

screen_shot_6 screen_shot_5

(iPhone 6, 5, 4S)

screen_shot_8 screen_shot_7

(iPhone 6+)

screen_shot_10 screen_shot_9

(iPad)

Up Next

This looks like a good place to break. The next post (or possibly posts) will go into how I built the One Eyed Royals demo app. I’m thinking I’ll have a wrap up post which reflects on what I’ve learned and how I plan to move the project I work on to Adaptive UI. As always though, life and work may get in the way so no promise on timeline. But at least the demo app is available now for everyone to take a look at!

Advertisements

Written by Nick Harris

June 25, 2015 at 5:18 am

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: