LearnDesigning a User Interface in iOS 6 using Auto Layout


Amit Bijlani
writes on November 15, 2012

The most important design feature in iOS 6 has to be Auto Layout, which is a way to manage the sizing and positioning of your controls in your user interface. Auto Layout improves over Springs and Struts which provided similar functionality but were not nearly as robust or complete.

Here are some of the features of Auto Layout that can help you create better interfaces:


Constraints represent relationships between user interface elements giving you the ability to not only layout your user interface but also describing its intent. You can articulate relationships like “these two views should be the same size” or “this label and button should always stick together”. This is a really powerful way to design your UI because it reacts to the orientation and size of the device.

A constraint is simply an equation:

item1.attribute1 =  item2.attribute2 x multiplier + constant

This equation is merely a visual understanding of the actual API call to the class NSLayoutConstraint. Here is a diagram of how the equation maps to the method call:

Method constraintWithItem of class NSLayoutConstraint

You either define a constraint using Interface Builder or in code using the class NSLayoutConstraint. Constraints are not directional which means that the layout is neither top down or bottom up. However, constraints do have priorities which means constraints with higher priorites are satisified before constraints with lower priority.

ASCII-Art Based Constraints

If you want to use constraints programmatically and are weary of API calls due to the complexity of your constraint then fear not, you can represent your constraint using ASCII-Art. Confused? Don’t be. You already know what your constraint should look like so why not draw it out using characters?

Once again you define a constrain on the instance of NSLayoutConstraint and this time call the methodconstraintsWithVisualFormat:options:metrics:views:, where the visual format parameter is a string based on “Visual Format Language”

Let’s explore a simple example of two buttons within a container view. Both buttons are flushed to either side of the container view as shown belown:

Visual Format Language for iOS 6 Constraints

We define a visual format constraint which says we want the two buttons at a standard distance from each other. A hyphen denotes a standard Aqua space, which is usually 8 points.


This results in one button becoming larger than the other.

Visual Format Language for iOS 6 Constraints

To equally size both the buttons we could define the string as follows:


The result is as expected where both the buttons are equal in size.

Visual Format Language for iOS 6 Constraints

What if we wanted to have some space between the edges of the container and buttons? That can be easily defined too:


Resulting in neatly aligned and sized buttons.

Visual Format Language for iOS 6 Constraints

For more information be sure to check out Apple’s documentation on the “Visual Format Language”.

As for the code, this is how you would use the above language:

01 NSDictionary *viewsDictionary = 
                NSDictionaryOfVariableBindings(cancelButton, acceptButton);
03 NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat: 
04                                        options:0
05                                        metrics:nil
06                                          views:viewsDictionary];
07 [self.view addConstraints:constraints];

The first line creates a dictionary of all your controls with help of NSDictionaryOfVariableBindings macro. In the next line you create an array of constraints in case you have multiple constraints to be defined. And finally, you assign the constraints array to a view that contains the view hierarchy of all your controls defined in the dictionary.

Intrinsic Content Size

Creating complex views involves writing numerous lines of tedious code calculating the given geometry of the views and laying them out manually. This produces code that is difficult to maintain and increases the complexity of the controller logic, let alone allowing for a redesign. The Auto Layout architecture distributes responsibility for the layout between controllers and views. One such way is having controls define their Intrinsic Content Size.

The class UIView defines a method called intrinsicContentSize which by default does not do anything. However, views such as buttons typically know more about what size they should be than does the code that is positioning them. The layout system calls the method intrinsicContentSize when trying to size and position controls such as buttons, labels, textareas, etc. The layout system has no idea about the size of the content within these controls and hence needs to be instructed about their intrinsic size.

The layout system calls intrinsicContentSize, and will set up constraints that specify
1. Content Compression: whether content should be compressed or clipped
2. Content Hugging: a view prefers to hug tightly to its content.

Intrinsic Size Constraints

A view can implement intrinsicContentSize to return absolute values for its width and height, or NSViewNoInstrinsicMetric for either or both to indicate that it has no intrinsic metric for a given dimension.

The intrinsic size for a text button is dictated by its title text. A button’s intrinsicContentSize method should return a size with width and height that will ensure that the title text is not clipped.


Designing for an iOS device is more complex than ever given the various devices, resolutions and orientation. However, thanks to Auto Layouts a huge paradigm shift has occured. You can now have layouts that are responsive and maintainable.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

7 Responses to “Designing a User Interface in iOS 6 using Auto Layout”

  1. 高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.msnbrand.com/brand-copy-IP-20.html

  2. エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.wtobrand.com/gcc1.html

  3. ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー,フェラーリコピー時計,パネライコピー時計,パテックフィリップコピー時計,ヴァシュロン.コンスタンタンコピー時計,エルメスコピー時計,カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ&ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服,ブランドバッグコピー,ブランド時計,ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.newkakaku.com/ldb1.htm

  4. 人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに 取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。海外直営店直接買い付け!★ 2015年注文割引開催中,全部の商品割引10% ★ 在庫情報随時更新! ★ 実物写真、付属品を完備する。 ★ 100%を厳守する。 ★ 送料は無料です(日本全国)!★ お客さんたちも大好評です★ 経営方針: 品質を重視、納期も厳守、信用第一!税関の没収する商品は再度無料にして発送します http://www.gowatchs.com/brand-243.html

  5. 最も美しいスーパーコピー,超格安ブランド時計コピー激安通販専門店!ブランド品に憧れて、予算オーバーし、諦めなければならないことがありましたか。スーパーコピー品が一番いいチョイスだ思います。少しのお金でも、世界中一番人気を持つブランド品、貴族しか買えない贅沢品がゲットできます。素敵な外観と実用性に優れたブランド コピー バッグ,,スーパーコピー財布,スーパーコピー 代引き,エルメス コピー,ルイヴィトン 財布、ルイヴィトン バッグ、ベルトなどの逸品はお客様に提供します。誰でもブランド品を手に入れられるのは弊社の経営理念です。当店の最大目標はお客様が安心してお買い物が出来き、お客様の頼りになるお店を目指す事ことです。お洒落な貴方はきっとこのチャンスを見逃しなくよ! http://www.wtobrand.com/he1.html

  6. ブランドコピーの専門店スーパーコピー豊富に揃えております、最も手頃ず価格だお気に入りの商品を購入。弊社フクショー(FUKUSHOW)ブランド腕時計、雑貨、小物最新作!エルメス バーキンスーパーコピー時計N品のみ取り扱っていまずのて、2年品質保証。エルメス食器,スーパーコピーブランド激安販売シャネル 財布スーパーコピー,スーパーコピーブランド 財布激安販売エルメス スーパーコピー,スーパーコピーブランド激安販売売スーパーコピーロレックス スーパーコピー,スーパーコピーROLEX激安販売IWC スーパーコピー,スーパーコピーIWC時計激安販売エルメス時計スーパーコピー,スーパーコピーhermes時計激安販売ボッテガ ヴェネタスーパーコピー,スーパーコピーブランド財布激安販売スーパーコピー時計スーパーコピーブランドバッグ時計コピー激安販売 http://www.gowatchs.com/brand-237.html

  7. 日本最高級スーパーコピーブランド時計激安通販専門店,高品質時計コピー,2015最新作、国際ブランド腕時計コピー、業界唯一無二.世界一流の高品質ブランドコピー時計,当店はスーパーコピー時計専門店,販売以下世界一流ブランドコピー時計:ロレックスコピー、ウブロコピー、オメガコピー、シャネルコピー…ンプルに見えて目を奪われてしまう独創的なブルガリのラインアップです。1884年ブルガリの創始者ソティリオ?ブルガリが銀細工師の一族としてイタリ アにオープン。ブルガリ?ブルガリシリーズ。古代ローマの円形競技場をモチーフにした時計「アンフィテアトロ」、若い世代向けの腕時計「ソロテンポ」を発 表。2000年には新会社ダニエル?ロード&ジェラルド?ジェンダ オート?オルロジュリー社を設立しました。本物ブランド時計に間違える程のスーパーコピー時計通販!スーパーコピーは業界n級品最高品質に挑戦!ロレックスコピー,パネライコピー,ウブロコピー,オメガコピー,ルイ?ヴィトンコピー,エルメスコピーを初め世界中有名なスーパーコピーブランドを激安で通販しております!HERMES(バッグ、時計) CHANEL(バッグ、時計)LOUIS VUITTON(バッグ、時計) BVLGARI時計Christian Dior(バッグ、小物) COACH(バッグ)GUCCI(バッグ、小物) ROLEX(時計)OMEGA(時計) IWC(時計) http://www.msnbrand.com/brand-copy-IP-12.html

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop