Nestia – Lifestyle Mobile Apps in Singapore

It has been more than 1 year since I last posted. I have been extremely busy with the projects of the new startup company (Singapore) that I joined more than 1 year ago. When I have free time, I just want to do things unrelated to work and have a good rest so that I can perform better when I am working. Thus, I haven’t update my website for quite a while.

For your information, I am currently working in the the startup company called Nestia as a Senior iOS Developer. Nestia is a startup company in Singapore. We started as a property rental startup company. But our business has grown to more than just the property sector. We are now a Home Living/Lifestyle startup company.

What is a Lifestyle Startup Company?

We are trying to provide all the needs/wants for the foreigners who come to Singapore to work or study.

They need to rent/buy an apartment, we develop the Property Rental and Sale listing web/apps for them. They need to know how to get around the Singapore, we develop the Interactive MRT map, the Bus Routes and Arrival Time, Direction from A to B and Get Off Alarm for them. They want to know what are the place of interest and also need help for cleaning their apartment. We have added the Home Services and Nearby in our app for their convenience.

Thus, If you are using the Nestia App. You will see some features such as the Property Rental/Sales, Transportations, Home Services, Nearby, Movies and more in our app.

If you are a iPhone user in Singapore. You may go to the iTunes Appstore on your mobile devices and go to Lifestyle category. You should see the Nestia iOS app rank within the Top 10 positions on the Lifestyle Category of Singapore App Store.

Nestia App Annie


From the App Annie, you can see that our app has been ranked consistently within the top 10 position in the Singapore Lifestyle on the iOS App store since early 2016.

My Responsibilities as the iOS Developer

Basically, there are 2 different apps that I developed in Nestia:-
1. Nestia Pro iOS App (Property publishing and management app for property agents)
2. Nestia User iOS App (The lifestyle app for common users)

Nestia Pro iOS App is the First app that I started to build because during that time, our web portal has just been launched. We have to develop an app for the property agents to manage the property listings. After the Nestia Pro app has the decent functionalities, we focus most of our time and energy on the Nestia user apps.

The initial stage of the Nestia user app contains only the messaging and the property listing functionality. Now, it has other additional features like Transportation and Home Services like I mentioned above.

In the First 10 months when I was working in Nestia, I was the only iOS developer for both the apps.

But now, there are 2 more iOS developers joining the iOS development team. It has been interesting to develop the apps in a team using Git version control. I have learned deeper into the Git by learning how to control the master branch in released stage, create new development branches, merge the branches, rebasing, solving the conflicts and etc. It has been a good learning experience.

I will only describe the features that I developed myself in the bottom post.

Nestia Pro (For Property Agents)

This is the app for the property agents. They use the app to add/edit/publish the property rental and sale listings. I will explain briefly on some of the features that I developed for this agent app:-

1. The property listing page (Rental and Sales)
2. The Property submissions page (Rental and Sales)
3. Co-broke (Rental)
4. Inbox (App messaging)

Nestia Pro
Nestia Pro
Nestia Pro


The property agent can register an account with us via our website or the app for Free. We have given the agents at least 6 months of free trial before they decide if they want to join us as paying members.

The agents can submit and view their listings via the app. The agent can even co-broke with other agents for any potential rental deals. In the co-broke feature, the agent can search for a property using place, condo or MRT station.

The agent can use our app to communicate with the potential tenants, buyers or other agents for the co-broking.

Nestia Pro
Nestia Pro
Nestia Pro


Nestia Lifestyle app – (For Common Users)

The early stage of the Nestia iOS app contains only the Property rental feature. Because the main targetted users of our app are the foreigners who are either working or studying in Singapore, as time passed by, we have added more features into the app to help them in their daily lifestyle.

We really care about the user experience of our products. Many of the touches, how and when to load info/photo, the navigation from 1 view to another view have been properly planned in a way to give the best experience for the users of our app.

NOTE: There are too many features on this app and I will only share the main features.

The Property Listing View
We want to make the First page of property listing as simple as possible. The vertical loading of the property list. When a user is going to the homepage of the property rental/sales, we have limited the loading to only 10 properties at a time (using the paging logic). This is to prevent the long waiting time. As for the property photo for each property, we only load 2 photos at the same time. Each swipe of the photo will only load 2 photos as well.

This type of small logics of loading is not easy to implement. We have implemented it because we know that it will improve the user experience.

Nestia User
Nestia User
Nestia User


The Property Map View
The clustering technology. There are many clustering technology and we find out that most of the clustering technology out there will have random generated clusters that always have random numbers for every single scroll and zoom level. We believe that user might be confused and might not be able to find the property that the user has previously seen.

So, we have implemented a clustering technology that based on different zoom level. Within a certain zoom levels and without changing the property filters, the number of properties inside that cluster will be static. It will ensure that the user is able to find back the same property inside the same cluster at the same location inside the map view itself.

Yet again. this type of clustering is not easy to implement because we have removed the randomness of the clustering. We have implemented it because we believe the users would prefer this type of clustering property search inside a map view.

To further simplify the property search on the mapview, we only limited the cluster to only 3 layers. Users know exactly what to expect after using our app for the first time. Most of the time, you will not know how many layers are there for the clustering on other apps as there could be unlimited layers.

The Location Search Filter
When a user is searching a location, there could be 3 different types of results:-
– A Place
– A Condo
– A MRT/LRT station.

These search results are not randomly selected, we did that because we believe it will provide a lot of convenience to the users of our app. After the user has selected a search result. The coordinate of that result be will compared further with the coordinates of the property to let the user know the distance between them. If you go to the static map of the property listing page, it will let you know the fastest route between these 2 locations (either via walking only or MRT + walking). Here, we actually are using the Google static map technology to compare 2 different locations.

Nestia User
Nestia User
Nestia User


Transportation
Transportation is second biggest module after the Property Rental and the Sales. It is to provide the convenience of the users who want to know how to get around Singapore. The main modules for the transportations are:-
– The MRT Interactive System Map
– The MRT Map
– The Bus Arrival Time
– Direction
– Get-off Alarm

The MRT Interactive System Map
Most of the app/website only have static MRT graphic map which give very little information. Our app has this MRT Interactive map which allow the users to choose 2 different stations. After choosing 2 stations, the map will show the closest route between 2 stations, the cost and the estimated time.

The MRT Map
This MRT Map is a more detailed map compare with the graphic map. It shows all the route of the MRT system in Singapore.

The map has 3 layers:-
Layer 1: Show all the MRT routes
Layer 2: Show all routes + MRT station
Layer 3: Show the routes + MRT stations and the station Exits

The user of our app can do some filtering using the station and the map will navigate to that station. It will also show the MRT schedule of that station.

Nestia User
Nestia User
Nestia User


The Bus Arrival Time
Land Transport Authority has done a great job by providing the open API for the bus arrival time. Not only that, I personally have been a frequent user of this particular feature of the app. I can assure you that the bus arrival time is accurate to the seconds. It helps me to plan my travel time properly.

Nestia User
Nestia User
Nestia User


Direction (from A to B)
Direction is the module used by our app users to get around Singapore. The users can enter the location A and B, then we will shows:-
– The Best Recommended Routes
– The Less walking Routes
– The Bus Only Routes

It is up to the users to choose which route is the best for him/her. For each of the routes, the app will also show the cost and the estimated time.

On the Direction map view, it shows the the walking route, the MRT stations, the MRT station Exists and also the bus routes.

The map and the table view may look simple but it is not easy to implement. It is difficult because there are so many ways to get the the same location. To prevent misleading, we need to show the right information to the users. The height of the table view cells will have to be determined in real time based on the information returned from the server. For example, some cell might has only 1 row but other cells might have 3 rows.

Nestia User
Nestia User
Nestia User


Final Notes on the Nestia iOS Apps

I couldn’t cover all the features that I developed for the Nestia app in this post. Here are some other features that I have developed.

The Get-off Alarm – When the user is riding a bus, he/she can set a bus stop to get off. The user can do other stuff, put the app in the background. When the bus is approaching the destination, it will sound the alarm to alert the user to get off from the bus. We are using the GPS and the background location technology.

Home Services – The current apps has 10 different home services: Aircon, Cleaning, Moving, Plumbing, Laundry, Electrical, Paint, Wallpaper, Locksmith and Pest-control.

Favourites – Users can add Property Rental, Sales, Home Services to the Favourites so that they can access the listing easier in the future.

Inbox – The user can communicate with the property agents or owner via the Nestia app. We are using Push Notification technology to notify the users when they have new messages. The current messaging system support the normal text message, the picture message and the property card message. In the future, there will be more message type when we allow the user to use the in-app messaging to communicate with the service provider.

Nearby – The user can use Nearby to find out the Place of Interest from his/her current location. For example, if a user is trying to find the nearest petrol station, with a few taps on the app, the petrol stations info will be available on the screen.

Property Details Page – On the property detail page itself not only has the info related to the property, we also include feature like Transport, Direction and Nearby. The user knows all the available transportations and place of interest near that particular property.

Nestia User
Nestia User
Nestia User


The above post is a summary of the apps that I developed when working in Nestia as a senior iOS developer, if you are interested to find out more about the apps, please download the apps and give them a try!

Download the apps from the Apple iTunes App Store:-
Nestia Pro iOS (For Property Agents)
Nestia iOS (For Users)

Watch Over Me Version 6.0

To wrap up the First month of 2015, I am going to share the continuous development for the Watch Over Me app.

The last update that I wrote related to my company’s mobile app was back on March 2014. The version was Watch Over Me (WOM) 3.0. It seems to be a long time ago. There has been a lot of changes and we have gone through many new iterations. We have skipped the version 4.0 in order to synch version between the Android and also the iOS app. We have introduced new features in both Version 5.0 and 6.0. In this article, I will make a quick share on my experience on developing the WOM app from Version 3.0 to Version 6.0.

WOM6.0
WOM2.0
WOM2.0


Watch Over Me (WOM) Version 5.0 – 5.1

Before WOM 5.0, I don’t have too much experience and knowledge in Auto Layout. During the time I was developing some cool new features in WOM 5, Apple has announced the new XCode 6 Beta with a new programming language – Swift during the WWDC 2014. In addition to that, Apple actually gave some hints that the future iPhones will have new screen sizes (which turned out to be iPhone 6 and 6 plus).

The new XCode 6 also has a lot of improvements related to the Auto Layout on Storyboard. The improvement is necessary to make sure that the iOS developers can easily optimize for the new iPhone/iPad screen sizes in the future.

I was actually quite excited that Apple has made the AutoLayout so much easy to use. We had our internal discussion in our company and I convinced my boss that we need to spend time in converting the existing non-autolayout supported project to become a fully auto layout supported project. After gaining his permission and I used about 3 weeks of time to complete the AutoLayout conversion (It was not an easy task!).

It turned out that our decision was right. When Apple released the new iPhone 6 and 6 Plus, for me to optimise for the new screen sizes was almost effortlessly. šŸ™‚

WOM6.0
WOM2.0
WOM2.0


Supporting the autolayout on Watch Over Me 5.0 – 5.1 was the major improvement. We also have added a couple more features on the mobile app such as :-

– The Network Contact
The main contact and the emergency contacts are able to know the status event running for each other. Eg: When the main contact is running an event and he/she shares his/her event to the emergency contacts, the emergency contacts are able to see the whereabouts (the map) of the main contact.

– Split Testing on the Sign Up Screen
There are 2 different designs on the Sign Up Screen. Each of the user will only see 1 design. We split test the design to know which design actually will convert the download to become a sign up user. We have been using Mixpanel and also the Google Analytics for the data analytics. This Split Testing was added into the tracking as well.

– Optimisation for iOS 8.0
Without a doubt, optimising the code to support the iOS 8.0 was important as well. There are some new permissions needed in iOS in order to gain the device’s location in the background for iOS 8.

WOM6.0
WOM2.0
WOM2.0


Watch Over Me Version 6.0

The major thing for WOM 6.0 was a total new design on the User Interface. The designer has made the design so much cleaner. I actually love this clean design in WOM 6 way more than any other version of WOM.

We also introduced a new feature calls “The Safety Level“. Safety Level is a feature that encourages the users to make the full use of Watch Over Me app. The user can keep track on his/her progress of using the WOM. Eg: If a user has added 1 contact, then the Safety level is at 20%.

If the user wants to achieve the 100% safety level, the user has to add more contacts, invite the emergency contacts to download the app so that they can watch over each other, add some places (safe zones). With the 100% Safety Level, the user will feel more safe when he/she is using the app.

To encourage users to use Watch Over Me more often, we have simplified the user categories and also removed a lot of restrictions. Eg: Before WOM 6, the Lite user could only launch an event with at most 20 minutes. We have removed this limitation. The only difference between the normal users (Free) and the paid user (Premium) is the SMS. Since SMS notification will cost quite a bit of money, only the Premium users can get unlimited SMS and the free user will get 7 SMS.

There were some further optimisations for iOS 8, iPhone 6 and 6 Plus for this version. On this version, CocoaPods is being used more often now. I have added some of the third party libraries/frameworks on XCode using Cocoapod rather than manually adding them. It is to make sure that any new iOS developer (who wants to continue my project in the future) is able to get the initial configuration on getting the project up and running at the shortest time.

WOM6.0
WOM2.0
WOM2.0


Watch Over Me – Future Version

We will be launching a new feature calls the Safer Streets soon. Moving forward, the Watch Over Me Team will be focusing on the Big Data.

Watch Over Me is a safety app, especially for women. The app will let the users know that which streets are safe based on the statistics from the local government. When a user is nearby a crime prone area, the app will notify the user. The user might want to use Watch Over me when he/she is nearby that area.

There are some challenges to implement the Safer Streets. First of all, the app has to get the user’s location all the time (No matter if the app is active, in the background or in the suspended state). Secondly, when a user is launching the Watch Over Me event, the GPS coordinates of the user has to be sending to the Watch Over Me server every 1 minute.

In order for the Location Manager to support these 2 different functions on the same app, the only way that I can think of is to use 2 different Location Manager instances.

Location Manager #1: Get the Location update even when the app is terminated/killed.
Location Manager #2: Get the GPS coordinates from the user every 1 minute continuously even when the app is in the background.

Here is the demonstration of the WOM 6 with XCode and Simulator

Chan Wu – Audio and Video Freelance iOS App Project

In the last few months, I have been busy with a few iOS freelance projects. Chan Wu – The Audio and Video iOS App Project is just one of them.

Here are the requirements from my client:-
– Have Sign Up and Login.
– Able to Reset and Change Password
– Able to download and play Audio files.
– Able to download and play Video files.
– Support In App Purchase for purchasing the Audio and the Video.

The requirements seem to be quite simple at First. But, I did face some challenges after starting to develop this mobile app. But, I am glad that I am able to solve all the challenges so far.

The Design of the App

A friend of mine has designed the app using Sketch for Mac. I have been using Sketch for more than 1 year and I really love this design tool. Even someone like me, who is not designer, also know how to use the tool. The tool is simple and really easy to use. Here is the screen shot for the simple design:-
ChanWuSketch

Technologies used in this Audio and Video iOS App

For Sign Up and Login API, I am using Parse.com. I have been using Parse for a few mobile applications that I developed. It is very simple to use and it saves a lot of my time – the time that is needed for hosting the server, programming and deploying the server end coding.

Most simple mobile apps do not really need a server. Using the mobile backend as a service provider like Parse.com is already good enough for most simple apps.

The client also does not have to pay extra for hosting a server and also the fee for the extra backend programming work. How cool can that be?

Other than the Sign Up and the Login, I also use Parse API to Reset Password, Change Password and update the In App Purchase content. Parse is able to send an email on your app behalf to the user who forgets his/her password.

For downloading the Audio and Video, I am using the latest AFNetworking 2.5 Framework.

For playing the Audio, I am using AVAudioPlayer. For playing the sample videos on Youtube, I am using XCDYouTubeKit. For playing the videos locally, I am using MPMoviePlayerController.

I am using AutoLayout for this app. In fact, I have been using Autolayout since the release of the XCode 6 beta and I will be using Auto Layout for all the iOS apps that I will develop in the future.

You may check out the auto layout articles that I wrote here:-
1. Basic Auto Layout Tutorial in XCode 6 for iOS 7 and 8
2. Advance Auto Layout Tutorial in XCode 6 for iOS 7 and 8

ChanWu1
ChanWu2
ChanWu3



The screen shots above are taken from both the 3.5 inches and 4 inches iOS devices. The screens are adjusted nicely based on the Auto Layout constraints.

Challenges for this Audio and Video iOS App

One of the First challenges that I encountered was related to downloading the audio/video in the background. If the background task is not keeping active in the background, the downloading process might be suspended by the iOS and the downloaded file will be corrupted.

Luckily, I have done a lot of programming works related to making the background location services active in iOS 7 and 8. With some tweaks of the solution, I actually can make the background downloading of the Audio and Video work perfectly!

Challenge #2: Sometimes when the downloading process could be terminated half way because the user kills the app. So, the file will be corrupted and the user has to download again. To solve this problem, the exact size of each of the audio and video files have to be stored in Parse. Before playing the audio/video, the size of the file has to be checked. If the size does not match, then the file must be corrupted and the user will have to re-download the file again.

Challenge #3: Only one audio is able to play at the same time. I will have to support the function to stop and play the audio file and also change from one audio file to another. There are some small User Interface (touches) like Play Icon and Stop Icon are quite important. They have to be there in order to have the best user experience.

ChanWu4
ChanWu5
ChanWu6



The screen shots above are taken from both the 3.5 inches and 4 inches iOS devices. The screens are adjusted nicely based on the Auto Layout constraints.

Final Words on this Chan Wu – Audio and Video Freelance iOS App Project

I feel happy that I am able to complete this project in less than 3 weeks (part time basis). I learned some new things. This app will be available on the app store soon in both the iOS and Android App store. I will update with the app store links once they are available on the app store.

Getting Location Updates for iOS 7 and 8 when the App is Killed/Terminated/Suspended

This is a long awaited article that I promised to write. A couple months ago, I found a way to get the location update from iOS 7 and 8 even when the app is not active on foreground and not in the background. Yes, you may get the GPS coordinates from the iOS devices even when the app is killed/terminated either by the user or the iOS itself.

Apple does not communicate much with the developers on the ways to do that. If you remember this post from early 2014: Appleā€™s iOS 7.1 will fix a geolocation bug ā€” after developer sends letter to Tim Cook. In iOS 7.0, Apple prevents the location update when the app is killed/terminated/suspended. But, Apple has fixed the “bug” starting from iOS 7.1 by allowing the app to get the location coordinates.

I have read the release notes for iOS 7.1 but I couldn’t find any information related to location updates and also the way to get the location when the mobile application is terminated/killed/suspended. The iOS 7.0 to iOS 7.1 API Differences for CoreLocation is stated as “No changes“. What?!

But, I didn’t give up in finding the solution. So for a few months, I used my free time to play a bit of the iOS APIs including the CoreLocation APIs. After many months of trials and errors, I finally found the solution.

I will provide the full solution, upload to the Github and write the detailed information on this post.

How to get Location Update for iOS 7 and 8 even When the App is Killed/Terminated

I have written an old article related to getting the continuous Background Location Updates for iOS 7 and iOS 8.

The method to get the location in the background continuously for iOS 7 and 8 is using the method “startUpdatingLocation

and then the next trick would be on the delegate method “didUpdateLocations“. You will have to use a timer and handle the Background Task appropriately. Any missing steps and the location will not be updated continuously.

But in the case of getting the location when the app is terminated/suspended, I can not use [myLocationManager startUpdatingLocation]; The only way to make it work is to use:-

Surprised. Surprised. Yes, I only figured that out after many trials and errors.

Another important trick is, you will have to know how to handle the key “UIApplicationLaunchOptionsLocationKey” on the app delegate “didFinishLaunchingWithOptions“. Here is the sample code:-

In addition to the didFinishLaunchingWithOptions method, I have created a locationManager Instance when the app is active. Here are some code examples:

What exactly is the LaunchOptions Key “UIApplicationLaunchOptionsLocationKey”?

UIApplicationLaunchOptionsLocationKey is very important to get the location update even when the app is neither active nor in the background.

If you read its description from the XCode, it says: “The presence of this key indicates that the app was launched in response to an incoming location event”. What does it mean?

You may realize that when your app is launched for the First time, the App Delegate method “didFinishLaunchingWithOptions” will run once. If you put your app into the background and then launch the app again from the background. This app delegate method will not run again.

The method will only run again after you killed/terminated the app by swiping up from the App Preview Screen and then relaunch from where your app is located.

If your app is a location based mobile application and you need the user’s location even the app is terminated/suspended, then there is another way to launch the app without the user interaction. The iOS will launch the app for you.

When your app delegate methods LaunchOptions contains the key UIApplicationLaunchOptionsLocationKey, it means that your app is launched by the iOS because there is a significant location changes. So, you will have to do something with the new location GPS coordinates return from the location manager.

If order to do so, you will have to create a new instance of location manager and you shall get the location coordinates from the method “didUpdateLocations“.

How Frequent is the Location Updates?

As per Developer Documentation: Core Location Documentation.

Apps can expect a notification as soon as the device moves 500 meters or more from its previous notification. It should not expect notifications more frequently than once every five minutes. If the device is able to retrieve data from the network, the location manager is much more likely to deliver notifications in a timely manner.

So, you could only expect the location update if the device moves over 500 meters and at most once in every 5 minutes.

From my own testing (I am driving around a lot! To test the Core Locaton API), I only get the location update about every 10 minutes.

Full Source Code for the Location Updates Even when the iOS mobile apps is Suspended/Terminated/Killed

In this source code, I have included the methods to save the location GPS coordinates into a PList file. The purpose of saving into a PList is to record the location coordinates, the iOS Application States and the way locationManager is created (Add From Resume or otherwise).

Here are some simple instructions on how to test this solution:-

1. Download the project from Git Hub.
2. Change to your own Bundle Identifier (If need to)
3. Connect your iPhone with your mac.
4. Launch the app into your iPhone.
5. Killed the app. (Double tap and remove the app from the App Preview)
6. Travel around with your iPhone for a few days.
7. Download iFunBox for Mac or any alternative that allows you to open the app and Read the PList from the “Documents” folder.
8. From the PLIst, you will see something like the screen shot below:-
Getting Location Even When the App is Suspended/Killed/Terminated

When you see the key “UIApplicationLaunchOptionsLocationKey” under “Resume“, it means that the iOS has relaunched the app after the devices has moving significantly from the last known location. If you create a new location Manager instance, you will get new location from delegate method “didUpdateLocations“.

Source Code: GitHub Source Code for Getting Location Updates for iOS 7 and 8 when the App is Killed/Terminated/Suspended

Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard

As promised from a previous post (How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development) that I will write another article related to more advanced techniques in AutoLayout to develop iOS mobile apps for iOS 7 and iOS 8.

In this article, I am going to share a few common layouts, scenarios and problems that I am facing when I am developing the iOS app using the Auto Layout. I am going to show the techniques to link different objects together using constraints inside the same view controller.

Auto Layout for iOS 8 versus iOS 7

I believe most iOS developers will still include iOS 7 under their development plan. So before getting started, it is good to know the differences between Autolayout in iOS 7 compare with iOS 8.

One of new things in iOS 8 is the Layout Margin. Layout Margin is a new property available in UIView for iOS 8. So, any objects inherit from UIView will have this property. If you are developing the app for both iOS 7 and iOS 8, you should not use Layout Margin (or use layout margin in a smart way).

So, if you have any constraints related to layout margin and you didn’t do a proper check before launching the app on iOS 7 devices, the app might crash or the arrangement of the objects might be out of order.

Whenever you are trying to add new constraints from the storyboard in XCode 6, “Constrain to Margins” is ticked by default as show as the screen shot below. The meaning of this selection is to add constraints with the new property in iOS 8.

Constrain to Margins iOS 8

If the deployment target of your app is iOS 7 and above and any of your constraints have this layout margin, the XCode will complain with the warning “Layout attributes relative to the layout margin on iOS prior to 8.0”.

Layout attributes relative to the layout margin on iOS prior to 8.0 warning

If you are developing the app for both iOS 7 and 8, it is best to “Untick” the Constrain to Margins.

How to use Auto Layout with more than One Object

Using the autolayout constraints with more than one object inside the same view controller can be tricky.

You may ask yourself some questions when you are deciding the design before trying to link the objects together inside the view controller:-
1. How many objects are inside the view controller?
2. Is the object fixed in height or have flexible height?
3. Is the object fixed in width or have flexible width?
4. How would the object be positioned inside the view controller. (Eg: Stick on the top of the view controller)
5. What is the relationship between Object A and object B? (eg: The Object B is positioned on the Right of the Object A)

Example:-
Let’s say I have a view controller with 2 Text Fields (Email and Password) and one Login Button.

Here is my decision:-
1. Both the Text Fields have fixed height (50 px) but with flexible width.
2. There will be a Navigation Controller on the top of the View Controller.

Decision on EmailTextField
– The Top of the First Text Field (EmailTextField) will stick to the Top Layout Guide of the Navigation Controller
– The Left of the EmailTextField will stick to the Left Side of the Superview (Leading Space)
– The Right of the EmailTextField will stick to the Right Side of the Superview (Trailing Space)

So, there are 4 constraints that I will have to associate with this EmailTextField object. The below screen shot shows the 4 constraints:-

Auto Layout with more than One Object1

If you do it correctly, You will see 4 constraints on the Size Inspector and also the Document Outline like the screen shot below.

Auto Layout with more than One Object2

Next, I want to add the PasswordTextField onto the screen. I will position it on the bottom of the EmailTextField.

Decision on PasswordTextField
– The Top of the First Text Field (EmailTextField) will stick to the Bottom of the EmailTextField.
– The Left of the PasswordTextField will stick to the Left Side of the Superview.
– The Right of the PasswordTextField will stick to the Right Side of the Superview.

Here is screen shot for adding the constraints for the PasswordTextField.
Auto Layout with more than One Object3

If you do it correctly, you will see that the Top Space of the PasswordTextField is Linked to the Bottom Space of the EmailTextField like the screen shot below:-
Auto Layout with more than One Object4

IMPORTANT TIP: Double Click on the constraint on the Size Inspector to view the detailed relationship of the constraint.

Finally, let’s link the constraints for the last object – the login button.

Decision on the Login Button
– The button has fixed height: 60 px
– It will stick on the bottom of the view controller with constant: 20 px (distance)
– There will be constant 16 px on the Left and Right of the superview
Auto Layout with more than One Object5

The above auto layout guide for multiple objects inside the same view controller is very straight forward because the top objects (EmailTextField,PasswordTextField) does not have any relationship with the bottom object (Login Button).

The autolayout will become more complicated when you want to add a UIScrollView and links all the objects together.

How to use UIScrollView with Auto Layout

Using the Auto Layout with UIScrollView can be tricky. I personally having a tough time with ScrollView when I first started learning Auto Layout. After some trials and errors for a few weeks, I almost got it right.

The most basic rule of using ScrollView with Auto Layout is you will have to set up the constraints from the top of the ScrollView to the bottom of the Scrollview and from the left to the Right. You can not have any missing link neither the horizontal nor the vertical layout. Or else the XCode will complaint!

Let’s just use the same example as the above and we will add all the 3 objects inside the UIScrollView.

First of all, we will have to add the scrollview onto the empty View Controller inside the Storyboard. For my personal preference, I would stick the top of the ScrollView on the top layout guide and not under the UINavigationBar. Remember, the Scrollview will always have flexible height and flexible width.

Autolayout with Scrollview1

If you do it correctly, you will see that the leading and the trailing space to the super view will be 0, the bottom space to the bottom layout guide is 0 and also the top space to the top layout guide would be 0 as well like screen shot below:-
Autolayout with Scrollview2

Next, putting the 2 text fields and also the login button inside the scrollview. If I connect the constraints exactly like the first example that I showed above. The XCode will complaint. The reason is adding a scrollview will change the behaviour of the Autolayout.

The common complaints:

1. Frame for “XXX” will be different during run time.
To Solve it: Add another constraint to align the object to the center of the superview (ScrollView)

Autolayout with Scrollview3

Autolayout with Scrollview4

2. The Views are vertically ambiguous or (Scroll View has Ambiguous scrollable content height)
To solve it: Link the objects from the top to the Bottom of the Scrollview (No missing relationship in the middle)

For the above case, I will make another constraint (Horizontal Center in Contrainer) to centrelize the EmailTextField. And then “Control Drag” to link up PasswordTextField with LoginButton with a vertical space.

Autolayout with Scrollview5

The XCode will love you by adding the 2 extra constraints and stop complaining.

How to Resolve Conflict Constraints and Other Autolayout Errors/Warning

Here are some of the common AutoLayout Errors/Warnings:-

Warning #1: Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0

Description: This only happens when your app has to support iOS 7 and the app have UILabel on one of your View Controller Objects inside the storyboard. And you didn’t tick “Explicit” on the “Preferred Width”.

How to Resolve this issue?
A. If you know where to locate the specific UILabel, just select the UILabel Object on the Storyboard. Then, Make sure that “Explicit” is ticked. If you do not want to have a fixed width, just assign the value as 0 (zero). The width for the UILabel will be based on the other connected constraints for this UILabel.
Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0

B. When your storyboard has many view controllers objects and also many UILabel, you may find it hard to locate the specific UILabel object. So, you will have to use the following steps in order to location the UILabel.

Resolve the Automatic Preferred Max Layout Width Warning From SourceCode

1. Right Click the Storyboard and “Open As” -> “Source Code”

2. Use the keyboard Key (Command + F) or Click “Find” -> “Find” on the Navigation bar of the XCode to launch the Search Window. Paste the code

into the Find Window.
3. Click the Search Icon then Select “Edit Find Options”.

4. Then, Choose “Regular Expression”.

5. The Find Window will show you all the UILabel does not have preferred Layout Width. You will have to paste

into all the UILabel like below screen shot until the count for the Find Window is 0.

6. Lastly, you will have to Open the Storyboard again. This time choose “Interface Builder – Storyboard”.

The above steps will solve all the Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0 warnings.

Warning #2: Frame for “xxx” will be different at run time.
Description: This warning is letting you know that the frame for the object inside the storyboard does not match with the constraints that you connected on that object.

How to Resolve this issue?
Most of the time, this issue can be solved easily by going to the “Resolve Auto Layout Issue” tab and choose either “Update Frames” or “Update Constraints”.
Update Constraints

Sometimes, you may face a situation where the view controller has multiple Auto Layout Warnings. You may have already spend some time to fix the issue but the issue is too complicated that you might not be able to fix easily.

From my own experience in a situation like this, it is better to clear all the constraints for all the views inside the view controller. And then reconnect the constraints all over again for all the views. The chance is that after you reconnecting the constraints, you would not see the issue again.
Clear Constraints for all the views

More Auto Layout examples for iOS 7 and 8

On going…. Need some time to complete the tutorial under this section

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