How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development

The Auto Layout is available on the Storyboard for iOS or OS X development since XCode 5. But, I didn’t adopt the Auto Layout technology for the projects that I developed because there are only 2 different iPhone screen sizes (3.5 inches and 4 inches). During that time, adjusting some views to position them inside 2 different screen sizes using codes seem to be easier than learning how to use the Autolayout Constraints inside the storyboard.

I believe all the iOS developers will have to use Auto Layout for future iOS apps development projects because there are rumours that Apple will release iPhone 6 with 2 new screen sizes (4.7 inches and 5.5 inches). Although Apple has yet to confirm on the validity of the rumours, from my research on various resources/websites, I can confirm that the rumours have very high chances to be the accurate.

Even from the new XCode 6 Beta itself, Apple has released 2 new iOS simulators (Resizable iPhone and Resizable iPad) for the iOS Developer to work with. There is also a new Storyboard preview function for different iPhone screen sizes at the same time.

Update on September 2014: The rumour is true and Apple will release iPhone 6 (4.7 inches screen) and iPhone 6+ (5.5 inches) soon. The latest XCode 6 Golden Master contains iPhone 6 and iPhone 6 Plus simulator as well.

Resizable iPhone Simulators
Screen shot above shows the Resizable iPhone and iPad Simulator.

XCode 6 Beta Preview Function
Screen shot above shows the XCode 6 Beta Storyboard Preview Function with different iPhone screen sizes at the same time (Only 3.5 and 4 inches iPhone screen preview available for now).

Potential iPhone 6 Screen Sizes and Resolutions

Before iPhone 6, there are 2 standard screen resolution sizes that most iOS app developers use as a guidelines when developing iOS mobile app. These 2 screen sizes are 320 x 480 (3.5 inches) and 320 x 568 (4 inches). Here are a list of iPhone screen Resolutions (including iPhone 6):-

iPhone 4S
Screen Size: 3.5 Inches
Resolution: 640 x 960 (Half: 320 x 480)

iPhone 5
Screen Size: 4.0 Inches
Resolution: 640 × 1136 (Half: 320 x 568)

iPhone 5S/5C
Screen Size: 4.0 Inches
Resolution: 640 x 1136 (Half: 320 x 568)

iPhone 6
Screen Size: 4.7 Inches
Resolution: 828 x 1472 (Half: 414 x 736)
Resolution: 750 x 1334 (Half: 375 x 667)

iPhone 6 Plus
Screen Size: 5.5 Inches
Resolution: 906 x 1704 (Half: 453 x 852)
Resolution: 1242 x 2208 (1/3: 414 x 736)
The size of iPhone 6 Plus is @3x scaling. So, it is divided by 3.

So, other than 320 x 480 and 320 x 568, we have to use 375 x 667 and 414 x 736 at the Resizable iPhone Simulator.

After you build and run your project with the Resizable iPhone Simulator, you may set Width as 414, Compact and Height as 736, Regular and remember to click “Apply” like screen shot below:-

Resizable iPhone Simulator in Xcode 6

Update on September 2014: It is best to use the iPhone 6 and iPhone 6 Plus simulator provided on the XCode 6 Golden Master (GM) to test and run, rather than using resizable iPhone simulator because the resizable simulator is quite unstable as of now.

How about iPhone 4? I believe iPhone 4 will be dropped from the support for iOS 8. So, it is not worth to mention here.

The Basic 15 Auto Layout Position Guides on XCode 6

When I tried to use auto layout with many different objects within a view controller, I always messed up the entire view controller. Almost every single time, the connected constraints for the objects are not correct which caused the objects to position in awkward positions.

Out of frustration on one fine day, I decided to come out with the most basic positions that one single object can be positioned inside a view controller. Using these basic guides/rules, I will slowly connect the constraints with other objects inside the same view controller.

First of all, you will have to determine the Size of the Object inside the View Controller.

An object can have 4 different sizes:-
– The Object has fixed Height and fixed Width
– The Object has fixed Width but with flexible Height
– The Object has fixed Height but with flexible Width
– The Object has flexible Height and flexible Width

But we may ignore flexible Height and flexible Width for most objects because the only potential objects using the flexible Width and flexible Height could be UIScrollView and UIView. We can safely assume that most objects have only 3 potential sizes.

The object can be located in 5 different positions:-
– Always at the Center of the SuperView
– Always stick to the Top Layout Guide
– Always stick to the Bottom Layout Guide
– Always stick to the Left side of the SuperView
– Always stick to the Right side of the SuperView

So by doing the math, we will have an object with 3 potential sizes in 5 potential positions. So, we will have a total of 3 x 5 = 15 different potential auto layout guides for one single object in a single view.

I have developed a simple XCode Project to shows all these 15 different auto layout guides for my personal reference. I have also uploaded this project to Github and hope that other iOS developers who are learning Auto Layout will find it useful.

The Basic 15 Auto Layout Position Guides on XCode 6

You may download this simple project from the Github to see how I set the different constraints for all these 15 different scenarios: 15 Auto layout Scenarios for iOS 7 and 8 Development

How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development

It is still possible to use codes to adjust the views based on different screen sizes. But, when there are too many different iPhone screen sizes, adopting the autolayout technology will actually ease our development work by having us to code less.

Height and Width on XCode 6 Storyboard

When you start to develop the iOS app from XCode 6 using the storyboard, the First thing that you find would be a new strange square 600 x 600 layout. It is quite different compare with the previous version of XCode which the storyboard only offers the tall and the short layout (for 3.5 vs 4.0 inches screen).

When you click at the bottom of the Storyboard screen, you will see a pop up view indicating Any Width | Any Height as the base value for the layouts. You can select any of the value (eg: Compact Width | Any Height) and the layout of the storyboard will change based on what you choose.

Here are some important steps to Use Auto Layout in XCode 6 for iOS 7 and 8 Development:-

Step 1: Make sure that you understand The Basic 15 Auto Layout Position Guides above.

Step 2: Always start to develop the app from Any Width | Any Height.
– Any constraints that are added on Any Width | Any Height layout will be auto converted to other screen layouts.

Step 3: Try to satisfy all the constraints in Any Width | Any Height layout, adjust the constraints on other layouts Only when necessary.
– Most of the constraints relationship should be constructed on Any Width | Any Height layout. You will have to use the Storyboard preview and also the different sizes of iPhone simulators to see if the constraints position all the Objects correctly or otherwise.
– If you find out that the position is not correct for a certain screen sizes (eg: incorrect position for screen above 4 inches), then only you try to adjust the constraints for other layouts like (Compact Width | Any Height or Compact Width | Regular Height)

Step 4: Learn to group different elements together to have the best result.
– Sometimes you will have to group different UI objects together inside a view in order for them to sit next to each other. Without Grouping, the objects might not be positioned at the right place. An example scenario would be: 2 Buttons sit next to each other at a constant width. These 2 buttons will be position at the bottom center of the screen.

Here are the steps to group the objects inside a view:-
1. Select all the elements that you want to group
2. Go to Editor -> Embed In – > View
3. Then you may centralise the newly created superview of the objects on the center of the view controller.

Group the objects inside a view on Xcode Storyboard
Screen shot above shows the way to group 2 different buttons using a view on Storyboard in XCode.

I hope this simple post can help some iOS developers to learn the basic of Auto Layout. There are still many different strategies/techniques to use constraints in the view controller such as using Priority to avoid the constraint conflict. You could have potentially seen some warnings/errors such as “ScrollView has ambiguous scrollable content height” when using Autolayout.

I will share more advance auto layout techniques for iOS 7 and 8, the potential warnings/errors and the way to solve them in another blog post. Meanwhile, you may download and check this simple project from the Github to see how I set the different constraints for all these 15 different scenarios.

Github Project: 15 Auto layout Scenarios for iOS 7 and 8 Development

Update on 10 Oct 2014: I have written an Autolayout Tutorial with more advance techniques/tips here: Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard

How to Use Container View Controller

Container View Controller is one of the interesting View Controllers that I used recently in XCode. Apple has provided many standard view controllers for iOS Developer in XCode such as Table View Controller, Tab Bar Controller, Navigation View Controller for most common standard projects for iOS developers. But for a certain projects with unique design, we have to use container view controller.

I have been using container view controller for a while and I love it. Here is a simple guide on how to use it. I will create a simple mobile app with 3 different view controllers:-

Simple Container View Controller Programming Example

1. MainVC
2. ProfileVC
3. Menu VC

Description
– Contain a navigation with 2 buttons.
– When the Profile button is clicked, the MainVC will slide to left and the ProfileVC will appear.
– When the Menu button is clicked, the Main VC will slide to right and the MenuVC will appear.

Profile View controller
Main View controller style=
Menu View controller


Container View Controller Project Setup

Update: I have been busy for the last few months, just updated this post on February 2014.

Step 1: Create a new project and delete the existing .h and .m file that was created by the XCode

Step 2: Create the subclasses below:-
MainVC, MenuVC, ContainerVC and ProfileVC subclass of UIViewController
ShareSetting subclass of NSObject

Step 3: Link the existing view controller objects on storyboard with ContainerVC.

Step 4: Drag and drop the Container View in storyboard into the ContainerVC View Controller object. Rename this Container View as “MenuVC”. The position and side for this container view should be X: -260 Y: 20 Width: 320 Height: 548. Attach the MenuVC subsclass to the view controller comes with the Container View.

Step 5: Drag and drop another Container View into the same view controller and name it as “ProfileVC”. X: 260 Y: 20 Width: 320 Height: 548. Remember to attach ProfileVC subclass to the created view controller.

Step 6: Drag and drop the last Container View and name it as “MainVC”. X: 0 Y: 20 Width: 320 Height: 548. Attach the subclass to the view controller.

Step 7: Change background for each view controller object (MainVC, MenuVC and ProfileVC) to different colors.

Step 8: Add a title to MenuVC and ProfileVC

Step 9: Add a simple navigation bar and 2 buttons to MainVC.

If you are doing correctly, you should see a screen shot similar to below:
Simple Container View Controller Programming Setup

Container View Controller Coding

1. ShareSetting
– This class is basically used to share actions/behavior for the same buttons across a few different view controllers. Although in this simple project, we only have 1 view controller that uses the buttons. In more complex projects, we usually need this ShareSetting. Add the following codes to the class.

In ShareSettings.h

In ShareSettings.m

2. ContainerVC
– This is the main class that control the animation behavior for 3 different view controllers (MainVC, MenuVC and ProfileVC)

In ContainerVC.m

3. MainVC
– This is the Main View Controller which contains the navigation bar, the Menu Button and Profile Button.
– The 2 buttons that were created on the storyboard should be “Control + Drag” into the subclass. So that there will be 2 functions created in the subclass and every time the button is tapped, we will receive the action in the functions.

Last Step: You are done! For your information, the MenuVC and ProfileVC subclasses are created but there is no function for this simple example. You may add tableview to MenuVC and create a real profile for ProfileVC by adding some text field, photo and etc.

For more information, you can check Out: View Controller Programming Guide for iOS

Should We Optimize for Older Version of iOS?

When we are programming for a new mobile application, we come definitely come to this question: “Should we optimize for older version of iOS like 5.1, 5.0 or even 4.3?” This is an important question that I believe most of the Mobile Application development company have. Especially, there are some special requirements requested by the customers to optimize for all different versions of iOS.

Before we decide on whether we should optimize for older iOS versions or before we convince our clients on what iOS version that their apps should support, I believe we should know the current market share of the different iOS versions. From there, we will understand if we should invest our time to optimize for older iOS versions. From understand the market share trend, we are able to estimate the potential future trend.

Market Share of Different iOS Versions

From my research, Apple itself never releases the statistics and market share of its products. But, I found a few reliable sample statistics from some trustworthy mobile applications developers who released the statistics using their own apps or platform.

The First statistics is by David Smith from his own iOS App (Audiobooks). This app is one of the most popular iOS Application under the Book Genre. You can see the ranking statistics from App Data and App Annie: AudioBooks App Data and AudioBooks App Annie. This app is within the top 50 app in Book Genre for both iPhone and iPad version in all (Top Free, Top Grossing and Top Paid) categories in many different countries. I can’t find the download statistics by David, but I believe it is at least 100,000 downloads per week.

So, this 100,000 downloads per week is a good sample to know the marketshare of the iOS versions. The Last Update for the statistics was 23 July 2013 (About a week ago from this post):.

All Platforms:
iOS 6.X (6.0, 6.1): 91.2%
iOS 5.X (5.0, 5.1): 7.5%
iOS 4.X: 1.4%

iPhone Only:
iOS 6.X: 95.5%
iOS 5.X: 3.5%
iOS 4.X: 1.0%

iPad Only:
iOS 6.X: 86.6%
iOS 5.X: 12.2%
iOS 4.X: 1.6%

iPod Touch Only:
iOS 6.X: 81.8%
iOS 5.X: 15.6%
iOS 4.X: 2.6%

As you can see, people who own Apple gadgets update to the latest Operating System (OS) fairly fast. Over 90% of the users have the latest iOS version.

More details on iOS version marketshare by David Smith: iOS Version Stats

Another Statistics is from Unity3D, a 3D game engine that is able to deploy to multiple mobile platforms including iOS. Unity3D is quite a big company and there are many games are released under this game engine. I believe there are millions of devices running this game engine. The last updated date for the statistics was April 2013.

iOS 6.X (6.0, 6.1): 89.1%
iOS 5.X (5.0, 5.1): 9.5%
iOS 4.X: 1.4%

As you can see, we have close to 90% of the gadgets are running on the latest iOS version. Remember that this statistics is over 3 months old. I believe that the real statistics as of today (late July 2013) will definitely pass 90%.

You can see more details of the statistics here:-
Unity3D Mobile Hardware Statistics
iOS Version Stats by Unity3D

Decision to Optimize for Older iOS Version?

Based on the above statistics, I believe this decision is not hard to make. If your company has a lot of resources and time for a project, you might be able to optimize for all the older versions of iOS. But, it might not be worth it as the market share of the older iOS versions is not much (less than 10%). From my experience, gadgets that are still using older iOS versions might not be able to get the most out of your mobile apps even if they can download it. It is due to low memory storage and slower CPU speed. I have seen applications crashed due to low memory issue.

Personally, I believe that the time spent to optimize for older iOS version is not worth it. I would prefer to spend time to optimize for the best user experience for the gadgets with the latest version of iOS.

Apple Updates the iOS versions and Xcode Frequently

One thing that you have to know is that Apple updates the iOS versions and Xcode quite frequently. We can see the new version of iOS every year. Same with the Xcode. There are a few subversions updates for the same year.

Here are some examples of the different technologies in Xcode for different iOS versions:-
Only iOS 5 and above supports Storyboard (a technology inside the Xcode). If you are trying to optimize your application for older version (iOS 4.X), then you are not able to use this technology. Or you have to use your Application Delegate to use different technology when detecting different iOS versions.

Only iOS 6 and above supports Auto-Layout on the storyboard. And again, the app with auto layout will not be running on iOS 5.1 and below. So, if you want to optimize for both iOS 6.X and 5.X, you might need to have 2 different storyboards to do so.

Apple is a forward looking company. They will phrase out the support of the old version of iPhone/iPad when the time is right. So, I believe that we (as iOS Mobile Developer) should be forward looking as well. We should use the latest technologies provided by the Apple.

Simple Calculator iOS Application

The First assignment that I did when following the Stanford iPhone / iPad Development course was the Simple Calculator iOS Application. In this post, I am going to share every step in making this mobile application.

Create a New Project

First of all, launch the Xcode and create a new project using “Single View Application“.
null

Under Product Name, you may put “Calculator”. Put your name or your company’s name under organization name.

As for Company Identifier, it is usually the reverse characters of a web domain that you own. For example, if you own “abc.com” then you put it as “com.abc”. If you do not own any web domain, you can just put any domain such as “com.example”. It is not important for now if you just want to run the application on simulator. But, when you want to run the application on your mobile device, you should get your own domain. You will also need to do some provisioning settings on the Apple Developer Portal, attach the provisioning certificates on your Xcode before you can run it on your device and also submit the application to Apple. I will do tutorial on that in a later post)

Under the Class prefix, you can put it as “Calculator”. Choose “Universal” under Devices as we will build both iPhone and iPad app. Tick “Use Storyboards” and “Use Automatic Reference Counting (ARC)“. We want to use Storyboard as it is an important technology that simplifies the implementation of MVC in iOS. Before iOS 5, the developers have to take care of every object creation and destruction to manage the memory. But, Apple has released a new technology calls ARC which simplifies the memory management in Xcode.

After you click “Next”, you will be asking to choose a place that you want to create this project. I normally put it under a “Developer” folder just to keep everything organized. After you click “Create”, you will see a screen like the below screen shot:-

Your project will have 2 AppDelegate files (.h, .m), 2 storyboards (for iPhone and iPad) and 2 ViewController files (.h, .m). .H is a header file which can be accessed by public while .M is a implementation file which can only be accessed by the class itself (private).

The storyboards will contain all the views for our controllers. So, the initial project creation has given us both the view and also controller. We will create our own model later.

Creating Our Views

We will leave iPad storyboard for now until the end of the tutorial. So, let’s start with the iPhone storyboard. From the storyboard, you will see an iPhone size view controller object on the screen. When you click the “view” inside the view controller object, you may see the height for the view is 548. It is actually the iPhone 5 size. We can click a small screen toggle button on the bottom of the page to toggle it to normal iPhone height which is 460. We will optimize for iPhone 5 later. But for now, we just want to keep it simple and start with normal iPhone size.