iOS Auto Layout: Adaptive UIs for All Devices

Building a user interface for all the different iPhones and iPads on the market can be a daunting task. This course will teach you the technologies to tackle this challenge, including auto layout, trait collections, scroll views, and more.
Course info
Level
Intermediate
Updated
Jan 25, 2017
Duration
5h 50m
Table of contents
Course Overview
Building a Dynamic User Interface
Working with UIScrollView and Layout Guides
Introducing Size Classes and Trait Collections
Applying Equal Spacing in Auto Layout
Building Adaptive Apps in Interface Builder
Controlling Traits and Constraints
Breaking Down the UISplitViewController
Leveraging Pseudo-languages for Internationalization
Supporting Accessibility with Dynamic Type
Completing iPad Multitasking
Description
Course info
Level
Intermediate
Updated
Jan 25, 2017
Duration
5h 50m
Description

Today, developers are faced with the task of building user interfaces that can adapt to a large number of devices. On iOS, there are three different screen sizes for both the iPhones and iPads. Then both sets of devices can be in either a portrait and landscape orientation. Finally, the iPad also supports multitasking with two apps running side-by-side. In this course, iOS Auto Layout: Adaptive UIs for All Devices, you will learn how to leverage technologies provided by Apple to build a clean simple user interface that can adjust to any size. First, you will learn to use auto layout along with the scroll view, size classes, and pseudo-languages to create an adaptive and flexible user interface. Then you'll explore how to create a user interface within one storyboard file, customizing the navigation to work on both the iPhone and iPad. Finally, you'll learn how to make your layout exist alongside other apps in iPad multitasking mode. When you're finished with this course, you will have the foundation to succeed in building apps that work on all iOS devices from the start of your project.

About the author
About the author

James Wilson is a Mobile Developer that specializes in iOS. He comes from a background in .NET, but spends the majority of his time in Objective-C, Swift, and iOS.

More from the author
Google Cloud Functions Fundamentals
Intermediate
4h 52m
28 Aug 2018
Google Cloud Functions: Getting Started
Beginner
2h 27m
20 Dec 2017
More courses by James Wilson
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. My name is James Wilson. And welcome to my course iOS Auto Layout Adaptive Uis for all devices. Today, there are so many different sized iPhone and iPads in the market. And it can be overwhelming to build user interfaces that can adapt to all of these different screen sizes. In this course, we're going to leverage several technologies with a key focus on auto layout that will let us build an app that will work and adapt to every iPhone and iPad. In addition, the app will work in iPad multitasking mode. Some of the major topics that we will cover include working with UIScrollView and Auto Layout an in-depth look at iOS adaptivity using tree collections building adaptive user interfaces using Interface Builder customizing the navigation so it will adapt to the iPhone, iPad, and iPad multitasking mode. We'll use advanced concepts from Auto Layout to create a truly flexible user interface. Finally, we'll leverage Xcode pseudo languages and dynamic text to push our constraints to new limits. By the end of this course, you will have a firm understanding of how Auto Layout tree collections and ScrollViews allow you to build truly flexible user interfaces that can adapt to all the different iOS devices on the market today. Before beginning the course, you should be familiar with using Xcode and Interface Builder. The code used in this course is in Swift. But you should be at least be comfortable working in Swift, Objective-C, or C# with Xamarin. Finally, a solid understanding of Auto Layout is required. You can always check out the iOS Auto Layout fundamentals course on Pluralsight before starting this course. I hope you'll join me on this journey to create truly adaptive user interfaces with the iOS Auto Layout adaptive UIs for all devices course at Pluralsight.

Building a Dynamic User Interface
Hi, my name is James Wilson and welcome to the course, iOS Auto Layout: Adaptive Uis for All Devices. One of the most challenging aspects in mobile development has been the diversity of devices. We start with the simple iPhone and before you knew it, we had a four inch iPhone, a 4. 7 inch iPhone, and a 5. 5 inch iPhone. And that's not it, though, right? We have the iPad and don't forget about the iPad mini and the iPad pro. Perhaps you're thinking, "Well, that's not too bad. " But what about the different orientations all these devices can be in? Since you have portrait and landscape modes. Did I also mention that since iOS 9 the iPad supports multitasking mode? Now your iPad app also has to be able to scale to a third of the screen, half of the screen, two thirds, or the whole screen. So how do we handle this complexity? Well, that's exactly what this course is going to teach you. Apple has gone ahead and created incredible technologies such as auto layout, trait collections, size classes, dynamic type, and even pseudo languages for internationalization. We're going to leverage these technologies and many more to make a truly flexible user interface that can run on the iPhone, iPad, and iPad multi tasking mode.

Introducing Size Classes and Trait Collections
Welcome to the module, Introducing Size Classes and Trait Collections. Now we've gone over Auto Layout in great detail, and in iOS 8, Apple introduced Size Classes and Trait Collections to take Auto Layout to the next level, and in this module and the next, we are going to leverage these with Auto Layout to create truly adaptive user interfaces, and we're going to work with our Collaborate project to create one interface that can be run on an iPhone, the iPad, and even in iPad Multitasking mode. So in this module, we're first going to introduce Size Classes, and what they are, and how they work, and then, we're going to look at UITraitCollection, and Size Class is just one small component of UITraitCollection, and as the iOS ecosystem evolves, there'll probably be more Traits added, so we're going to get a good introduction to all the Traits that exist today. We're then going to look at the UIImageAsset class and see how we can leverage Size Classes to control the images so we can have smaller images in some circumstances and larger images on other devices, and it's really easy to set up in Xcode so we're going to look at it both in code and through the Xcode user interface with the Xcode Image Asset Catalog. So now that we've taken care of the overview, let's take a look at Size Classes and see why they're awesome.

Applying Equal Spacing in Auto Layout
Welcome to the module Applying Equal Spacing in Auto Layout. You might think that laying out several views with equal spacing is trivial. However, in Auto Layout it's a little more complex than that. In this module, we're going to take the opportunity to look at a technique that I like to use and is pretty standard within the iOS community for laying out views with equal spacing in Auto Layout. We're going to do this in Interface Builder. The first thing we'll do is explain the technique and how it works. We're then going to use our collaborate project and apply the technique. This is going to be the start of our profile view, so we're going to actually be building the regular width portion of our layout, and we're going to use the equal spacing technique to accomplish that goal. Then finally, we're going to take a look at a new object that was introduced in iOS 9 called the UILayoutGuide. This isn't an interface builder yet. It has to be used in code. However, it's great because what you're going to see is with the equal spacing technique in Interface Builder we use empty UIViews. However, the UILayoutGuide was designed to replace those. These are limited in functionality, they're used very specifically as an empty container to be used within Auto Layout. They're very light weight and they don't respond to touch events. They're a really nice addition in terms of having an element which doesn't have much functionality but can help you build more complex user interfaces with Auto Layout. Let's take a look at the equal spacing technique.