Lecture Mobile Application Development (119310)

iOS Development - Autolayout

Agenda

Using AutoLayout in Interface Builder
- What is AutoLayout and what are Constraints?
- Size Classes
- Stack Views
- Pin feature
- Alignment feature
AutoLayout Assignment
iOS Human Interface Guidelines
iOS App Deployment

Autolayout

Since the first iPhone multiple devices with different resolutions where introduced, such as for example:
- iPhone 4 / 4s: 960 x 640 pixels
- iPhone 5/5c/5s: 1136 x 64 pixels
- iPhone 6/6s/7/8: 1334 x 750 pixels
- iPhone 6 Plus/6s/7/8 Plus: 1920 x 1080 pixels
- iPhone Xs: 2436 x 1125 pixels
- iPhone Xs Max: 2688 x 1242 pixels
- iPad Mini / iPad 2: 1024 x 768 pixels
- iPad Air / iPad / iPad Mini: 2048 x 1536
- iPad Pro 12.9”: 2732 x 2048 pixels
- Apple Watch Series 4: 368 x 448 pixels (44 mm), 324 x 394 pixels (40mm)

Autolayout

AutoLayout tries to facilitate the UI design for all the different device resolutions and screen sizes
It allows to design the app UI layout in a device independent fashion using constraints
Constraints define how the size and position of controls / views behave within a view when the resolution or orientation of the device changes
Interface Builder provides corresponding tools to define the constraints for each view

Autolayout Tools in Xcode

center 50%

Size Classes

Introduced with iOS 8 to allow using one storyboard for universal apps
Two types: vertical and horizontal, each with the sizes Regular, Compact or Any
Size classes correspond to the device and orientation the app runs in
You can design individual layouts for each device class by selecting it in Interface Builder here

center 40%

Simulated Metrics & Stack View

To directly see the effects of the constraints on different devices, select the view controller and change to the corresponding device under „Simulated Metrics“
When you select multiple views (e.g. a label and a button) and then click on the „Stack“ icon, the views are added to a Stack View
Stack Views can be horizontally or vertically oriented
Views within a Stack View are similar to LinearLayouts on Android

Stack View

The layout of the views within a StackView (class UIStackView) varies depending on the axis (horizontal or vertical), distribution, alignment and spacing
You can set the properties in the attributes inspector

center 60% source

Pin

The „Pin“ function allows to define the spacing and size of views
For example the spacing to the nearest neighbor
When multiple views are selected, it is possible to set them, e.g. to equal width or height and to define their relative alignment
The size can be also defined in an aspect ratio (width:height)

50%

Alignment

The „Alignment“ function allows to define the alignment of views relative to each other Views can be aligned vertically or horizontally to their centers They can be aligned according their baselines Or horizontally or vertically in their superview

50%

Issue Solver

Constraint issues can be solved using the „issue solver“ button in the bottom right corner
They are either warnings (orange color)
Or errors (red color)
Xcode can try to automatically add missing constraints or ask you to remove contradictory constraints

center 20%

Autolayout Assignment

Conduct the Autolayout Assignment and use the interface builder to create a responsive app layout using AutoLayout constraints

iOS Human Interface Guidelines

Describes how an iOS app has to be designed in order to gain a good user experience
Contains hints and guidelines to for example:
- Platform-specific characteristics
- Human interface design principles
- App design strategies
- User experience guidelines
- Hints for creating graphics and icons
- Hints for how to use iOS GUI elements

Source

IOS Deployment

To install an application on your iOS device, only an Apple account is required (since Xcode 7 and iOS 9)
A developer license is needed ($99 (single) - $299 (enterprise) /year), only if you want to provide the app via the AppStore or distribute it directly within your company.
For more information see https://developer.apple.com/xcode/

Ad-Hoc App Provisioning

For testing purposes or in case of a enterprise deployment process apps can be distributed ad hoc, i.e. without using the Apple App Store
Examples for development ad-hoc provisioning tools are:
- iTunesConnect (incorporated former TestFlight)
  - Distribute Beta App to up to 1000 testers
- HockeyApp: http://hockeyapp.net
  - Stuttgart company, acquired by Microsoft
  - Professional service for app provisioning, analysis and debugging

App Store Deployment Process

Submit the app to the app store:
- Login using the developer account at iTunes-Connect (http://itunesconnect.apple.com)
- Register new app and provide meta information
  - Language, app-name, SKU number, bundle-ID
- Provide images and description for the app
- Upload the app
After the upload the app is verified by Apple
Verification process takes 1-2 weeks, then the app is available in the App Store

References

Stack View tutorial:
- http://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views
Stack View Class reference:
- https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/
AutoLayout tutorial by Brad Johnson:
- http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2
Human Interface Guidelines
- https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
App Distribution Guide
- https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html