auto layout

AUTO LAYOUT IN IOS 7

Steveice

WE TALK ABOUT XCODE 5 FIRST

New Feature in Xcode 5Source Control -> 隨時可以追蹤誰改的程式碼

Automatic Configuration -> Provision  

Capabilities -> iCloud, GameCenter, Map-kit 

Interface Design -> Auto Layout 

Asset Catalog -> Image Slicing 如果根據命名規則 Xcode會⾃自動幫你分類

Apple LLVM5 Compiler

New Feature in Xcode 5

Add Modules -> Webkit.h, MapKIt.h, UIKit.h Automatically link frameworks Faster Build

Build in CommandLineTool

AUTO LAYOUT IS ACONSTRAINT-BASED,

DESCRIPTIVE LAYOUT SYSTEM.

Auto Layout

Constraint-Based: 基於約束性

Descriptive Layout System: 敘述性佈局系統

A constraint is basically a statement of the form y = m*x + b

y and x are attributes of views.

An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline.

m and b are floating point values.

button1.right == button2.left - 12.0

Constrain

Constrain

[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeBottom

relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding]

item1.attribute = multiplier ⨉ item2.attribute + constant

Visual Format Language

Visual Format Language

[NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]" options:0 metrics:nil views:viewsDictionary];

UIButton *cancelButton = ... UIButton *acceptButton = ... viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton);

DEMO

More Information

WWDC 2012 Session 202 Introduction to Auto Layout for iOS and OS X

WWDC 2012 Session 232 AutoLayout By Example

WWDC 2012 Session 228 Best Practices for Mastering Auto Layout

More Information

WWDC 2013 Session 400 What’s new in Xcode 5

WWDC 2013 Session 406 Taking Control of Auto Layout in Xcode 5