Auto Layout sans Interface Builder

Sometimes we need to build iOS screens without the help of Interface Builder. This presentation introduces Auto Layout and walks through an example using the open source project Masonry.

Transcript

1. Auto Layout sans Interface Builder Philly CocoaHeads September 11, 2014 ! @MichaelRaber @BoxlyApp
2. Apple’s Definition of Auto Layout “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.”
3. • layout your app’s user interface • mathematical relationship between UI elements • layout responds appropriately to screen sizes, device orientations, and localization
4. http://bgr.com/2014/09/10/iphone-6-vs-galaxy-note-4-vs-galaxy-s5/
5. Absolute positioning! your views
6. http://www.tvacres.com/admascots_koolaid.htm
7. Auto Layout Relies on Constraints • constraints define • top, left, bottom, right • width, height
8. http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
9. Layout FU http://scm.ulster.ac.uk/~B00585007/des311corr/desresearch.html http://en.wikipedia.org/wiki/Po_(Kung_Fu_Panda)
10. Defining constraints • visual format langage (ASCII Art) • quirks, hard to animate • instantiating NSLayoutConstraint objects • very verbose, lots of code, hard to animate • open source • my favorite is Masonry (https://github.com/Masonry/Masonry)

12. constraint = [NSLayoutConstraint constraintWithItem:self.topLeft attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
13. [self.topLeft mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top); make.left.equalTo(self.view.mas_left); make.width.equalTo(self.view.mas_width).multipliedBy(.50); make.height.equalTo(self.view.mas_height).multipliedBy(.50); }]; [self.topRight mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top); make.left.equalTo(self.topLeft.mas_right); make.width.equalTo(self.view.mas_width).multipliedBy(.50); make.height.equalTo(self.view.mas_height).multipliedBy(.50); }]; [self.topBottom mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.topLeft.mas_bottom); make.left.equalTo(self.view.mas_left); make.width.equalTo(self.view.mas_width); make.height.equalTo(self.view.mas_height).multipliedBy(.50); }];
15. [self.topLeft mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).offset(10); make.left.equalTo(self.view.mas_left).offset(10); make.width.equalTo(self.view.mas_width).multipliedBy(.50).offset(-15); make.height.equalTo(self.view.mas_height).multipliedBy(.50).offset(-15); }]; [self.topRight mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).offset(10); make.right.equalTo(self.view.mas_right).offset(-10); make.width.equalTo(self.view.mas_width).multipliedBy(.50).offset(-15); make.height.equalTo(self.view.mas_height).multipliedBy(.50).offset(-15); }]; [self.topBottom mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.topLeft.mas_bottom).offset(10); make.left.equalTo(self.view.mas_left).offset(10); make.width.equalTo(self.view.mas_width).offset(-20); make.height.equalTo(self.view.mas_height).multipliedBy(.50).offset(-15); }];
18. Thanks