Masonry使用心得(自用)
2017-11-22 本文已影响14人
冰land
设置内边距
CGFloat padding = 10;
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, padding, padding));
}];
大于等于和小于等于某个值的约束
- 用此约束,可动态的改变label的宽高,使label自动的根据文本改变自身宽高。
- 注意的是,需要设置self.textLabel.numberOfLines = 0
[self.textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
// 设置宽度小于等于200
make.width.lessThanOrEqualTo(@200);
// 设置高度大于等于10
make.height.greaterThanOrEqualTo(@(10));
}];
设置约束比例
// 设置当前约束值乘以多少,例如这个例子是redView的宽度是self.view宽度的0.2倍。
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.height.mas_equalTo(30);
make.width.equalTo(self.view).multipliedBy(0.2);
}];
子视图等高
/**
下面的例子是通过给equalTo()方法传入一个数组,设置数组中子视图及当前make对应的视图之间等高。
需要注意的是,下面block中设置边距的时候,应该用insets来设置,而不是用offset。
因为用offset设置right和bottom的边距时,这两个值应该是负数,所以如果通过offset来统一设置值会有问题。
*/
self.greenView = [[UIView alloc] init];
self.greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.greenView];
self.redView = [[UIView alloc] init];
self.redView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.redView];
self.yellowView = [[UIView alloc] init];
self.yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.yellowView];
CGFloat padding = 10;
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.top.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, 0, padding));
make.bottom.equalTo(self.greenView.mas_top).offset(-padding);
}];
[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, 0, padding));
make.bottom.equalTo(self.yellowView.mas_top).offset(-padding);
}];
/**
下面设置make.height的数组是关键,通过这个数组可以设置这三个视图高度相等。其他例如宽度之类的,也是类似的方式。
*/
[self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, padding, padding));
make.height.equalTo(@[self.greenView, self.redView]);
}];
子视图垂直居中
/**
要求:(这个例子是在其他人博客里看到的,然后按照要求自己写了下面这段代码)
两个视图相对于父视图垂直居中,并且两个视图以及父视图之间的边距均为10,高度为150,两个视图宽度相等。
*/
CGFloat padding = 10.f;
[self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.view);
make.left.equalTo(self.view).mas_offset(padding);
make.right.equalTo(self.redView.mas_left).mas_offset(-padding);
make.width.equalTo(self.redView);
make.height.mas_equalTo(150);
}];
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.view);
make.right.equalTo(self.view).mas_offset(-padding);
make.width.equalTo(self.blueView);
make.height.mas_equalTo(150);
}];
UIScrollView自动布局
- 自动contentSize
这个例子中将会展示动态改变contentSize的大小,内部视图有多少contentSize就自动扩充到多大。
这种方式的实现,主要是依赖于创建一个containerView内容视图,并添加到UIScrollView上作为子视图。UIScrollView原来的子视图都添加到containerView上,并且和这个视图设置约束。
因为对UIScrollView进行addSubview操作的时候,本质上是往其contentView上添加。也就是containerView的父视图是contentView,通过containerView撑起contentView视图的大小,以此来实现动态改变contentSize。
self.scrollView = [[UIScrollView alloc] init];
[self.view addSubview:self.scrollView];
self.containerView = [[UIView alloc] init];
[self.scrollView addSubview:self.containerView];
self.greenView = [[UIView alloc] init];
self.greenView.backgroundColor = [UIColor greenColor];
[self.containerView addSubview:self.greenView];
self.redView = [[UIView alloc] init];
self.redView.backgroundColor = [UIColor redColor];
[self.containerView addSubview:self.redView];
self.yellowView = [[UIView alloc] init];
self.yellowView.backgroundColor = [UIColor yellowColor];
[self.containerView addSubview:self.yellowView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
CGFloat padding = 10;
[self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView).insets(UIEdgeInsetsMake(padding, padding, padding, padding));
}];
[self.containerView addSubview:self.greenView];
[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.equalTo(self.containerView).offset(padding);
make.size.mas_equalTo(CGSizeMake(250, 250));
}];
[self.containerView addSubview:self.redView];
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.containerView).offset(padding);
make.left.equalTo(self.greenView.mas_right).offset(padding);
make.size.equalTo(self.greenView);
make.right.equalTo(self.containerView).offset(-padding);
}];
[self.containerView addSubview:self.yellowView];
[self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.containerView).offset(padding);
make.top.equalTo(self.greenView.mas_bottom).offset(padding);
make.size.equalTo(self.greenView);
make.bottom.equalTo(self.containerView).offset(-padding);
}];