iOS Masonry 一些日常使用方法
2018-09-20 本文已影响1426人
勤劳的小码
本人喜欢用纯代码写布局,那么用的最多的肯定是Masonry,那么现在就把我的一些使用的心得分享给大家.
首先是Masonry基本用法:使用它必须要先把控件对象添加到父视图上,然后再对它进行布局,不然编译会报错.
首先你要包含头文件才能使用它
#import <Masonry/Masonry.h>
如在self.view上添加一个UILabel
下面是错误的例子
- (void)xn_initSomeSubViews {
UILabel *firstLabel = [UILabel new];
[firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);
make.top.equalTo(self.view).offset(100);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
[self.view addSubview:firstLabel];//这样写实错误的,控件必须先添加,把这个放到布局前面
firstLabel.backgroundColor = [UIColor greenColor];
}
这个是正确的例子
- (void)xn_initSomeSubViews {
UILabel *firstLabel = [UILabel new];
[self.view addSubview:firstLabel];//必须先添加
[firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);
make.top.equalTo(self.view).offset(100);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
firstLabel.backgroundColor = [UIColor greenColor];
}
image.png
这样一个控件的布局就写好了!
Masonry的常用方法除了mas_makeConstraints是初始化布局,还有mas_updateConstraints(更新约束),一般是更新已经存在的约束,注意已经存在的基础对象不变,只是更新距离尺寸,如果需要重新写约束可以用mas_remakeConstraints方法,它是把你之前设置的约束移除后重新进行新的约束.
- (void)xn_initSomeSubViews {
UILabel *firstLabel = [UILabel new];
UIButton *changgeButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:firstLabel];//必须先添加
[self.view addSubview:changgeButton];
[firstLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);
make.top.equalTo(self.view).offset(100);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
[changgeButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(firstLabel);
make.top.equalTo(firstLabel.mas_bottom).offset(100);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
[changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
changgeButton.backgroundColor = [UIColor yellowColor];
[changgeButton setTitle:@"更新约束" forState:UIControlStateNormal];
[changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];
firstLabel.backgroundColor = [UIColor greenColor];
}
- (void)clickAction_change:(UIButton *)sender {
//更新约束
[sender mas_updateConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
//其实之前写的两条约束还是在的就相当于以下代码
/**
[sender mas_remakeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(firstLabel);
make.top.equalTo(firstLabel.mas_bottom).offset(100);
make.size.mas_equalTo(CGSizeMake(100, 100));;//只是更新了这个约束
}];
但是由于在这里拿不到firstLabel这个对象,所以不能用这个方法
*/
}
初始布局约束
点击更新后的布局
如果需要重新设置changgeButton约束,可以使用mas_remakeConstraints方法:
- (void)clickAction_change:(UIButton *)sender {
[sender mas_remakeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self.view);
make.top.equalTo(self.view).offset(200);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
}
重新设置约束后
说这些简单的基础的应用后,咱们再说一些比较复杂的应用,我们日常使用中也会使用到scrollView,对scrollView使用Masonry就需要注意一些东西了,我们使用frame布局scrollView时要设置scrollView的frame和contentSize,那么Masonry布局scrollView时我们通常要给他加一个相当于contentView的子视图,然后在这个子视图上布局其他的子视图.
在这里要介绍一个不怎么使用的方法,但是偶尔也会用它,多个视图(最少三个)需要等比布局时可以将需要布局的视图加入到数组中进行统一布局
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
- (void)xn_initScorllViewSubViews {
UIButton *changgeButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIView *contentView = [UIView new];//加个子视图作为内容视图
UIView *firstView = [UIView new];
UIView *secondView = [UIView new];
UIView *ThirdView = [UIView new];
UIView *forthView = [UIView new];
UIView *fifthView = [UIView new];
NSArray *array = [NSArray arrayWithObjects:ThirdView, forthView, fifthView, nil];//加入到数组中
[self.view addSubview:self.scrollView];
[self.scrollView addSubview:contentView];
[contentView addSubview:firstView];
[contentView addSubview:secondView];
[contentView addSubview:ThirdView];
[contentView addSubview:forthView];
[contentView addSubview:fifthView];
[contentView addSubview:changgeButton];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView);
make.height.equalTo(self.scrollView);
}];
[firstView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(contentView);
make.top.equalTo(contentView).offset(100);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
[secondView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(contentView);
make.top.equalTo(contentView).offset(200);
make.width.equalTo(firstView).multipliedBy(0.33);
make.height.equalTo(firstView).multipliedBy(0.88);
}];
[changgeButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(contentView);
make.top.equalTo(contentView).offset(740);
make.size.mas_equalTo(CGSizeMake(200, 50));
}];
/**
* 多个控件固定间隔的等间隔排列，变化的是控件的长度或者宽度值
*
* @param axisType 轴线方向
* @param fixedSpacing 间隔大小
* @param leadSpacing 头部间隔
* @param tailSpacing 尾部间隔
*/
//横向排列 间隔距离固定 array中的元素必须最少要三个
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
//横向排列 控件长度固定
// [array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:100 leadSpacing:5 tailSpacing:5];
[array mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(contentView).offset(300);
make.height.mas_equalTo(50);
}];
//纵向排列
// [array mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:50 leadSpacing:280 tailSpacing:200];
// [array mas_makeConstraints:^(MASConstraintMaker *make) {
// make.centerX.equalTo(contentView);
// make.width.mas_equalTo(100);
// }];
contentView.backgroundColor = [UIColor lightGrayColor];
firstView.backgroundColor = [UIColor greenColor];
secondView.backgroundColor = [UIColor orangeColor];
ThirdView.backgroundColor = [UIColor redColor];
forthView.backgroundColor = [UIColor cyanColor];
fifthView.backgroundColor = [UIColor blueColor];
[changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
changgeButton.backgroundColor = [UIColor yellowColor];
[changgeButton setTitle:@"更新约束" forState:UIControlStateNormal];
[changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];
}
- (UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [[UIScrollView alloc]init];
_scrollView.pagingEnabled = YES;
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
}
return _scrollView;
}
横向排列 控件长度固定
横向排列 控件长度固定
[横向排列 间隔距离固定
横向排列 间隔距离固定
纵向排列 间隔距离固定
纵向排列 间隔距离固定
有必要说下这一段代码
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView);
make.height.equalTo(self.scrollView);
}];
如果你想要self.scrollView的contentsize显示的内容与子视图内容多少有关比如你想以最后一个视图的底部距离一些距离
那么就要这么写了,不要设置高度,等到最后一个子视图设置完后再设一遍距离底部的约束
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView);
}];
..........
//最后设置底部距离第五个视图的底部100距离
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(fifthView.mas_bottom).offset(100);
}];
contentView.backgroundColor = [UIColor lightGrayColor];
firstView.backgroundColor = [UIColor greenColor];
secondView.backgroundColor = [UIColor orangeColor];
ThirdView.backgroundColor = [UIColor redColor];
forthView.backgroundColor = [UIColor cyanColor];
fifthView.backgroundColor = [UIColor blueColor];
[changgeButton addTarget:self action:@selector(clickAction_change:) forControlEvents:UIControlEventTouchUpInside];
changgeButton.backgroundColor = [UIColor yellowColor];
[changgeButton setTitle:@"更新约束" forState:UIControlStateNormal];
[changgeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
changgeButton.titleLabel.font = [UIFont systemFontOfSize:16];
灰色部分是self.scrollView的内容部分
不设置高度布局
好了,这次关于Masonry的日常使用分享就到这,喜欢的小伙伴点个赞哦!
