2020年10月13日13:26:37「复习」
控制器中布局一般基础都是以UIscrollview为底部视图进行绘制的,方便我们进行屏幕适配。
在使用masonry布局的时候如何让UIscrollview自动计算内容高度,实现contentsize自适应。
第一步,添加UIscrollview到self.view上,并设置约束等于父视图,设置宽度。
self.scrollView = [UIScrollView new];
self.scrollView.backgroundColor = [UIColor grayColor];
[self.view addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(100);
make.left.right.equalTo(self.view);
make.bottom.equalTo(self.view);
}];
第二步,使用容器视图添加到UIscrollview上,所有的子视图布局在这个容器视图上。
self.contentView = [UIView new];
[self.scrollView addSubview:self.contentView];
[self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView);
}];
第三部,设置布局的最底部的视图,容器视图的bottom等于最后一个视图的bottom
[self.contentView addSubview:self.labTitle01];
[self.contentView addSubview:self.labTitle02];
[self.contentView addSubview:self.labTitle03];
[self.labTitle01 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentView.mas_top).offset(10);
make.width.mas_equalTo(kScreenWidth-20);
make.centerX.equalTo(self.contentView);
}];
[self.labTitle02 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.labTitle01.mas_bottom).offset(10);
make.width.mas_equalTo(kScreenWidth-20);
make.centerX.equalTo(self.contentView);
}];
[self.labTitle03 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.labTitle02.mas_bottom).offset(10);
make.width.mas_equalTo(kScreenWidth-20);
make.centerX.equalTo(self.contentView);
}];
//第三部,设置布局的最底部的视图,容器视图的bottom等于最后一个视图的bottom
[self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.labTitle03.mas_bottom).offset(30);
}];
UIScrollView使用Masonry布局最大的难点在于如何让子视图追随ScrollView滑动。
目前使用最广泛的解决方式是为滑动视图添加一个过渡视图,之后将所有的子视图添加到过渡视图上,然后分别设置过渡视图与滑动视图约束(注:竖向滑动时,需将过渡视图的宽度固定;横向滑动时,需将过渡视图的高度固定)、过渡视图与第一个子视图边缘约束、过渡视图与最后一个子视图边缘约束。
本示例以垂直滑动为例:
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.showsVerticalScrollIndicator = NO;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.backgroundColor = [UIColor redColor];
UIView *containerView = [[UIView alloc] init];
containerView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:scrollView];
[scrollView addSubview:containerView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
make.width.equalTo(scrollView.mas_width);
}];
UIView *lastView;
NSInteger viewsNumber = 20;
for (int i = 0; i<viewsNumber; i++) {
UIView *view= [[UIView alloc] init];
view.backgroundColor = [UIColor colorWithRed:(arc4random()%255)/255.0 green:(arc4random()%255)/255.0 blue:(arc4random()%255)/255.0 alpha:1.f];
[containerView addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
if (0 == i) {
//第一个视图
make.top.equalTo(containerView.mas_top);
}else {
make.top.equalTo(lastView.mas_bottom);
}
make.left.equalTo(containerView.mas_left);
make.right.equalTo(containerView.mas_right);
make.height.mas_equalTo(66.f);
if (viewsNumber == i+1) {
//最后一个视图
make.bottom.equalTo(containerView.mas_bottom);
}
}];
lastView = view;
}
效果图: