Skip to content

Instantly share code, notes, and snippets.

@fjbelchi
Last active August 29, 2015 14:01
Show Gist options
  • Save fjbelchi/e806b043ac6cc0ee5aeb to your computer and use it in GitHub Desktop.
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.
// -- 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