In this tutorial you will learn how to set autolayout in your iOS application.
swift programming language
Swift is an innovative new programming language for Cocoa and Cocoa Touch. Writing code is interactive and fun, the syntax is concise yet expressive, and apps run lightning-fast. Swift is ready for your next iOS and OS X project — or for addition into your current app — because Swift code works side-by-side with Objective-C.
Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements. Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.
Open your xcode6 and create a new Xcode project.
Select Single View Application and click Next.
xcode6 – single view application
Enter your Product Name, Organization Name and Organization Identifier. We using swift language for this tutorial. Leave device and core data default. We didn’t use any core data feature in this tutorial. After fill out click Next. And Create the project.
After that you will get this page screen.
At your left sidebar you will see all the files included Main.storyboard. Click Main.storyboard to view your main storyboard.
We will create a simple form on this view controller. Drag and drop Text Field and Button inside the view controller. You grab it at bottom area right sidebar. Make sure your form will be like this one and don’t forget to put placeholder in textfield (for decoration purpose only, hehe).
Make sure you connect your iphone device and registered apple developer account here, https://developer.apple.com/.
If you not sure how to do it, you can refer here, http://codewithchris.com/deploy-your-app-on-an-iphone/.
For this tutorial I set Deployment Target from 8.0 to 7.1 because my iphone not upgraded with iOS 8 yet. You can change Deployment Target under Deployment Info.
By the way, don’t forget to migrate launch images to an asset catalog, if not your app will show a black screen. Click Use Asset Catalog under App Icons and Launch Images category. A dialog box will popup and click Migrate. After that click Play button at top left side.
Use Asset Catalog
But If you notice the form not really nice enough. It suppose to be fit inside the canvas. But don’t worry about it, we will fix it later.
Go back to Main.storyboard. Select or click on textfield. Now we need to add two constraints for each textfields, Trailing Space to Superview and Leading Space to Superview. Press and hold the control button then drag to the edge of the view controller until blue colour appear. Then release it. A popup menu will show up.
Choose Trailing Space to Container Margin from the popup.
Trailing Space to Container Margin
Then control drag again from inside texfield to left edge of the view controller.
Choose Leading Space to Container Margin from the popup.
Leading Space to Container Margin
Then repeat all steps for another each textfields. For buttons, you need Add New Alignment Constraints. Tick Horizontal Center in Container and click Add Constraints.
Add New Alignment Constraints
Then click Play button to see final result. Voila!! All your form attributes fit inside the app. Congrats!!