Last active
August 29, 2015 14:01
-
-
Save fjbelchi/e806b043ac6cc0ee5aeb to your computer and use it in GitHub Desktop.
This is an example UIViewController of how I like to build the views using auto layout by code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// -- Import ConstraintPack, by Erica https://github.com/erica/Auto-Layout-Demystified great book to learn about auto layout. | |
// In the Pack, I've added more cases I've been needing to build the UI | |
// Example in the constraick pack: | |
// #define CONSTRAINT_ALIGNING_PAIR_LEFT(VIEW1, VIEW2, INDENT) [NSLayoutConstraint constraintWithItem: VIEW2 attribute: NSLayoutAttributeLeft relatedBy: NSLayoutRelationEqual toItem:VIEW1 attribute: NSLayoutAttributeLeft multiplier: 1.0f constant: INDENT] | |
#import "ConstraintPack.h" | |
@interface FJBViewController () | |
// -- In the NSMutableArray is where I save all the constraints I want to add. | |
@property (nonatomic, strong) NSMutableArray *autolayoutConstraints; | |
// -- Views | |
@property (nonatomic, strong) UIImageView *firstImageView; // -- Examples of Views... | |
@property (nonatomic, strong) UIImageView *secondImageView; | |
@property (nonatomic, strong) UILabel *introductionLabel; | |
@end | |
... | |
- (void)viewDidLoad | |
{ | |
[super viewDidLoad]; | |
_autolayoutConstraints = [[NSMutableArray alloc] init]; | |
[self.view addSubview:self.firstImageView]; | |
[self.view addSubview:self.secondImageView]; | |
[self.view addSubview:self.descriptionLabel]; | |
// -- After subviews added, I add the constraints. | |
InstallConstraints(self.autolayoutConstraints, LayoutPriorityRequired, NSStringFromClass([self class])); | |
} | |
#pragma mark - Properties | |
- (UIImageView *)firstImageView | |
{ | |
if (_firstImageView) { | |
return _firstImageView; | |
} | |
_firstImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"..."]]; | |
//-- In this part I define all the properties of the view | |
PREPCONSTRAINTS(_firstImageView); // -- Now I start adding the constraints. | |
//-- I want to center the imageView in the self.view horizontal axis | |
[self.autolayoutConstraints addObject:CONSTRAINT_CENTERING_PAIR_H(self.view, _firstImageView)]; //x | |
//-- With this constraint I want to align at the bottom self.view and _firstImageView | |
[self.autolayoutConstraints addObject:CONSTRAINT_ALIGNING_PAIR_BOTTOM(self.view, _firstImageView, 0)]; //y | |
//-- Here I've added the constraints always in the same order when you define a frame, x,y,width and height. | |
// In this case I don't need to add the width or height because I want to use the intrinsic content size | |
return _firstImageView; | |
} | |
- (UILabel *)introductionLabel | |
{ | |
if (_introductionLabel) { | |
return _introductionLabel; | |
} | |
_introductionLabel = [[UILabel alloc] initWithFrame:CGRectZero]; | |
_introductionLabel.numberOfLines = 2; | |
_introductionLabel.backgroundColor = self.view.backgroundColor; | |
_introductionLabel.textAlignment = NSTextAlignmentCenter; | |
_introductionLabel.text = NSLocalizedString(@"ViewControllerIntroductionLabelTitle", @"ViewControllerIntroductionLabelTitle"); | |
[_introductionLabel setContentMode:UIViewContentModeCenter]; | |
PREPCONSTRAINTS(_introductionLabel); | |
//-- Align to the left self.view + 20px | |
[self.autolayoutConstraints addObject:CONSTRAINT_ALIGNING_PAIR_LEFT(self.view, _introductionLabel, 20)]; //x | |
// -- In the next constraints I want to have the introductionLabel 32px underneath secondImageView. | |
[self.autolayoutConstraints addObject:CONSTRAINT_STACKING_V(self.secondImageView, _introductionLabel, 32)]; //y | |
[self.autolayoutConstraints addObject:CONSTRAINT_ALIGNING_PAIR_RIGHT(self.view, _introductionLabel, 20)]; //width | |
return _introductionLabel; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment