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.
Screen shot above shows the Resizable iPhone and iPad Simulator.
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 InchesResolution: 828 x 1472 (Half: 414 x 736)
Resolution: 750 x 1334 (Half: 375 x 667)
iPhone 6 Plus
Screen Size: 5.5 InchesResolution: 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 theResizable 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:-
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 beUIScrollView 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.
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.
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.
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 Auto Layout in XCode 6 for iOS 7 and 8 Development的更多相关文章
- iOS6 自动布局 入门–Auto Layout(转)
iOS6 自动布局 入门–Auto Layout(转) 标签: 杂谈 目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会 ...
- iOS 7 - Auto Layout on iOS Versions prior to 6.0
链接地址:http://stackoverflow.com/questions/18735847/ios-7-auto-layout-on-ios-versions-prior-to-6-0 Stac ...
- iOS6 自动布局 入门–Auto Layout
目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会发生了-对于iPhone与iPad IOS6 带来了一个非常了不起的特征: ...
- iOS 开发实践之 Auto Layout
原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自 ...
- iOS屏幕适配方案-Auto Layout
市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己 ...
- WWDC2018 之 高性能 Auto Layout
1. 关于 Auto Layout 的历史渊源 上世纪 90 年代,名叫 Cassowary的布局算法,通过将布局问题抽象成线性不等式,并分解成多个位置间的约束,解决了用户界面的布局问题. Apple ...
- iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束
http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...
- WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性
目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...
- 【转 iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束
原文网址:http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式 ...
随机推荐
- 使用IDEA新建Maven项目没有完整的项目结构(src文件夹等等)
maven还没加载好,右下角还有进度条在从中央仓库读,所以在创建maven项目的时候,需要加archetypeCatalog=internal 右边新增一项 如下图: 此时就可以快速的建立maven项 ...
- RabbitMQ-Java客户端API指南-上
RabbitMQ-Java客户端API指南-上 客户端API严格按照AMQP 0-9-1协议规范进行建模,并提供了易于使用的附加抽象. RabbitMQ Java客户端使用com.rabbitmq.c ...
- 【bzoj1195】[HNOI2006]最短母串 AC自动机+状态压缩+BFS最短路
原文地址:http://www.cnblogs.com/GXZlegend/p/6825226.html 题目描述 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串 ...
- [洛谷P4841]城市规划
题目大意:求$n$个点的带标号的无向连通图的个数 题解:令$F(x)$为带标号无向连通图个数生成函数,$G(x)$为带标号无向图个数生成函数 那么$G(x) = \sum_{i=0}^{\infty} ...
- JZOJ 5280 膜法师
好啰嗦......还好作者给了一句话题意,不然光看题就很耗费时间. 样例输入: 1 6 3 1 78 69 55 102 233 666 样例输出: 1 2 3 4 5 6 11 数据范围: 思路: ...
- Codeforces 498D Traffic Jams in the Land | 线段树
题目大意: 给坐标轴1~n的点,每个点有一个权值,从一个点走到下一个点需要1s,如果当前时间是权值的倍数就要多花1s 给出q组操作,C表示单点修改权值,A表示询问0时刻x出发到y的时间 题解:因为权值 ...
- HTTP基础--cookie机制和session机制
1.介绍cookie和session的区别,怎么获取与使用?(这个问题比较开放,可深可浅,现在将这里涉及的主要问题总计如下答案) 答: 一.cookie机制和session机制的区别 cookie机制 ...
- eclipse 导出burpsuite插件包含第三方lib包
第一步:右键项目点击export: 2.选择Runable JAR file: 点击Finish后会爆出一个错误(Jar export finished with problems. See deta ...
- Instruments Tutorial for iOS: How To Debug Memory Leaks
http://www.raywenderlich.com/2696/instruments-tutorial-for-ios-how-to-debug-memory-leaks Update 4/12 ...
- Unicode与UTF-8互转(C语言实现) 基本原理
1. 基础 1.1 ASCII码 我们知道, 在计算机内部, 所有的信息最终都表示为一个二进制的字符串. 每一个二进制位(bit)有0和1两种状态, 因此八个二进制位就可以组合出 256种状态, 这被 ...