BasicView
code
- (id)init {
self = [super init];
if (!self) return nil;
UIView *greenView = UIView.new;
greenView.backgroundColor = UIColor.greenColor;
greenView.layer.borderColor = UIColor.blackColor.CGColor;
greenView.layer.borderWidth = 2;
[self addSubview:greenView];
UIView *redView = UIView.new;
redView.backgroundColor = UIColor.redColor;
redView.layer.borderColor = UIColor.blackColor.CGColor;
redView.layer.borderWidth = 2;
[self addSubview:redView];
UIView *blueView = UIView.new;
blueView.backgroundColor = UIColor.blueColor;
blueView.layer.borderColor = UIColor.blackColor.CGColor;
blueView.layer.borderWidth = 2;
[self addSubview:blueView];
UIView *superview = self;
int padding = 10;
//if you want to use Masonry without the mas_ prefix
//define MAS_SHORTHAND before importing Masonry.h see Masonry iOS Examples-Prefix.pch
[greenView makeConstraints:^(MASConstraintMaker *make) {
make.top.greaterThanOrEqualTo(superview.top).offset(padding);
make.left.equalTo(superview.left).offset(padding);
make.bottom.equalTo(blueView.top).offset(-padding);
make.right.equalTo(redView.left).offset(-padding);
make.width.equalTo(redView.width);
make.height.equalTo(redView.height);
make.height.equalTo(blueView.height);
}];
//with is semantic and option
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding); //with with
make.left.equalTo(greenView.mas_right).offset(padding); //without with
make.bottom.equalTo(blueView.mas_top).offset(-padding);
make.right.equalTo(superview.mas_right).offset(-padding);
make.width.equalTo(greenView.mas_width);
make.height.equalTo(@[greenView, blueView]); //can pass array of views
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(greenView.mas_bottom).offset(padding);
make.left.equalTo(superview.mas_left).offset(padding);
make.bottom.equalTo(superview.mas_bottom).offset(-padding);
make.right.equalTo(superview.mas_right).offset(-padding);
make.height.equalTo(@[greenView.mas_height, redView.mas_height]); //can pass array of attributes
}];
return self;
}
ConstantsView
example1
code
- (id)init {
self = [super init];
if (!self) return nil;
UIView *purpleView = UIView.new;
purpleView.backgroundColor = UIColor.purpleColor;
purpleView.layer.borderColor = UIColor.blackColor.CGColor;
purpleView.layer.borderWidth = 2;
[self addSubview:purpleView];
UIView *orangeView = UIView.new;
orangeView.backgroundColor = UIColor.orangeColor;
orangeView.layer.borderColor = UIColor.blackColor.CGColor;
orangeView.layer.borderWidth = 2;
[self addSubview:orangeView];
//example of using constants
[purpleView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@20);
make.left.equalTo(@20);
make.bottom.equalTo(@-20);
make.right.equalTo(@-20);
}];
// auto-boxing macros allow you to simply use scalars and structs, they will be wrapped automatically
[orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
//center中心点指的是与super.view的中心点的距离，如（0,0）就是和开始的 view 的中心点重合
make.center.equalTo(CGPointMake(0, 0));
make.size.equalTo(CGSizeMake(200, 100));
}];
return self;
}
example2
code
- (id)init {
self = [super init];
if (!self) return nil;
UIView *purpleView = UIView.new;
purpleView.backgroundColor = UIColor.purpleColor;
purpleView.layer.borderColor = UIColor.blackColor.CGColor;
purpleView.layer.borderWidth = 2;
[self addSubview:purpleView];
UIView *orangeView = UIView.new;
orangeView.backgroundColor = UIColor.orangeColor;
orangeView.layer.borderColor = UIColor.blackColor.CGColor;
orangeView.layer.borderWidth = 2;
[self addSubview:orangeView];
//example of using constants
[purpleView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@20);
make.left.equalTo(@20);
make.bottom.equalTo(@-20);
make.right.equalTo(@-20);
}];
// auto-boxing macros allow you to simply use scalars and structs, they will be wrapped automatically
[orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
//center中心点指的是与super.view的中心点的距离，如（0,0）就是和开始的 view 的中心点重合
make.center.equalTo(CGPointMake(0, 50));
make.size.equalTo(CGSizeMake(200, 100));
}];
return self;
}
AspectFitView
code
// Designated initializer
- (instancetype)init
{
self = [super initWithFrame:CGRectZero];
if (self) {
// Create views
self.topView = [[UIView alloc] initWithFrame:CGRectZero];
self.topInnerView = [[UIView alloc] initWithFrame:CGRectZero];
self.bottomView = [[UIView alloc] initWithFrame:CGRectZero];
self.bottomInnerView = [[UIView alloc] initWithFrame:CGRectZero];
// Set background colors
UIColor *blueColor = [UIColor colorWithRed:0.663 green:0.796 blue:0.996 alpha:1];
[self.topView setBackgroundColor:blueColor];
UIColor *lightGreenColor = [UIColor colorWithRed:0.784 green:0.992 blue:0.851 alpha:1];
[self.topInnerView setBackgroundColor:lightGreenColor];
UIColor *pinkColor = [UIColor colorWithRed:0.992 green:0.804 blue:0.941 alpha:1];
[self.bottomView setBackgroundColor:pinkColor];
UIColor *darkGreenColor = [UIColor colorWithRed:0.443 green:0.780 blue:0.337 alpha:1];
[self.bottomInnerView setBackgroundColor:darkGreenColor];
// Layout top and bottom views to each take up half of the window
[self addSubview:self.topView];
[self.topView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.and.top.equalTo(self);
}];
[self addSubview:self.bottomView];
[self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.and.bottom.equalTo(self);
make.top.equalTo(self.topView.mas_bottom);
make.height.equalTo(self.topView);
}];
// Inner views are configured for aspect fit with ratio of 3:1
[self.topView addSubview:self.topInnerView];
[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);
make.width.and.height.lessThanOrEqualTo(self.topView);
make.width.and.height.equalTo(self.topView).with.priorityLow();
make.center.equalTo(self.topView);
}];
[self.bottomView addSubview:self.bottomInnerView];
[self.bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(self.bottomInnerView.mas_width).multipliedBy(3);
make.width.and.height.lessThanOrEqualTo(self.bottomView);
make.width.and.height.equalTo(self.bottomView).with.priorityLow();
make.center.equalTo(self.bottomView);
}];
}
return self;
}
LabelView
- (id)init {
self = [super init];
if (!self) return nil;
// text courtesy of http://baconipsum.com/
self.shortLabel = UILabel.new;
self.shortLabel.numberOfLines = 1;
self.shortLabel.textColor = [UIColor purpleColor];
self.shortLabel.lineBreakMode = NSLineBreakByTruncatingTail;
self.shortLabel.text = @"Bacon";
[self addSubview:self.shortLabel];
self.longLabel = UILabel.new;
self.longLabel.numberOfLines = 8;
self.longLabel.textColor = [UIColor darkGrayColor];
self.longLabel.lineBreakMode = NSLineBreakByTruncatingTail;
self.longLabel.text = @"Bacon ipsum dolor sit amet spare ribs fatback kielbasa salami, tri-tip jowl pastrami flank short loin rump sirloin. Tenderloin frankfurter chicken biltong rump chuck filet mignon pork t-bone flank ham hock.";
[self addSubview:self.longLabel];
[self.longLabel makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.left).insets(kPadding);
make.top.equalTo(self.top).insets(kPadding);
}];
[self.shortLabel makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.longLabel.centerY);
make.right.equalTo(self.right).insets(kPadding);
}];
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
// for multiline UILabel's you need set the preferredMaxLayoutWidth
// you need to do this after [super layoutSubviews] as the frames will have a value from Auto Layout at this point
// stay tuned for new easier way todo this coming soon to Masonry
CGFloat width = CGRectGetMinX(self.shortLabel.frame) - kPadding.left;
width -= CGRectGetMinX(self.longLabel.frame);
self.longLabel.preferredMaxLayoutWidth = width;
// need to layoutSubviews again as frames need to recalculated with preferredLayoutWidth
[super layoutSubviews];
}