Masonry是我们平时做开发中用的比较多的自动布局库，对于普通的视图布局，一般其都很容易实现，但对于ScrollView，UITableView以及UICollectionView这种滚动视图，则需要一些技巧
在UITableView自动（手动）混合计算高度这边文章中，介绍过如何对UITableView进行自动布局，其主要注意这么几点：
要求
- tableView外部设置：
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 44;
- 子View布局需要放置在Cell的contentView上面
- 子view负责支撑起contentView的大小
如代码：
[self.contentView addSubview:_contentLabel];
[self.contentView addSubview:_headerImage];
// 约束可以直接放在创建的地方
// 不要放在layoutSubviews 或 updateConstraints方法里
[_headerImage mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView).offset(10);
make.top.equalTo(self.contentView).offset(20);
make.height.width.equalTo(@50);
}];
[_contentLabel mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_headerImage.mas_bottom).offset(5);
make.left.right.equalTo(self.contentView);
// 这一步是关键 让cell知道最底部在哪儿, 然后算出自身高度
make.bottom.equalTo(self.contentView);
}];
比较关键的一步是垂直方向从上到下，最后一个视图的bottom要设置的和contentView的大小一致，这样才能达到自动布局的效果。
因为tableView的cell自带了contentView这个视图，其大小和cell的大小一样，所以我们只需要想办法支撑起contentView的高度即可达到自动布局的效果，但对于ScrollView，其并没有为我们提供contentView，那要如何自动布局呢？
我们平时在使用UIScrollView的时候， 必须得给一个固定的contentsize才能实现滚动效果，那是因为UIScrollview内部实现原理是依托于已知contentsize去实现的，具体可以文献3中的scrollView原理。在使用masonry为scrollview布局时，需要在其上自定义add一个contentView子容器视图，通过这个子视图的尺寸去撑起scrollview，这样scrollview就有了具体的contentsize。
//布局scrollview
UIScrollView *myScrollView = [[UIScrollView alloc] init];
[self.view addSubview:myScrollView];
myScrollView.backgroundColor = [UIColor whiteColor];
[myScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(strongSelf.view);
}];
//布局contentView
contentView = [[UIView alloc] init];
[myScrollView addSubview:contentView];
contentView.backgroundColor = [UIColor whiteColor];
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
//注意点1
make.edges.mas_equalTo(myScrollView);
//垂直方向，宽度必须指定
make.width.mas_equalTo(myScrollView);
}];
这里注意的点：
- contentView相对scrollView的布局设置必须给出明确的说明，如注意点1，这里设置的是和scrollView的大小一致
- 必须给出明确的宽度，且要大于0，否则不能展示。
- 子视图可以参照tableView自动布局，只要支撑起contentView的高度即可。
案例
利用Masonry来实现一个自动布局的滚动视图
效果如下：
滚动效果.gif
//创建ScrollView
self.mainScrollView = [[UIScrollView alloc] init];
[self.view addSubview:self.mainScrollView];
[self.mainScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
UIView *contentView = [[UIView alloc] init];
contentView.backgroundColor = [UIColor whiteColor];
[self.mainScrollView addSubview:contentView];
//创建子容器
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.mainScrollView).inset(15.f);
make.left.equalTo(self.mainScrollView).inset(15.f);
make.right.equalTo(self.mainScrollView).inset(15.f);
make.width.mas_equalTo(self.view.bounds.size.width - 30.f);
make.bottom.equalTo(self.mainScrollView).inset(15.f);
make.height.greaterThanOrEqualTo(@0);
}];
//生成View
NSMutableArray *labelViews = [NSMutableArray arrayWithCapacity:1];
for (int i = 0; i < 20; i++) {
UILabel *label = [[UILabel alloc] init];
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [self RandomColor];
label.backgroundColor = [self getRandomBackgroundColor];
label.text = [NSString stringWithFormat:@"我是Label,索引值为:%d",i+1];
label.font = [UIFont boldSystemFontOfSize:16.f];
[contentView addSubview:label];
[labelViews addObject:label];
}
//布局子视图
UILabel *prev = nil;
for (int i = 0; i < labelViews.count; i++) {
if (!prev) {
[labelViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.equalTo(contentView);
make.height.mas_equalTo(100);
}];
} else {
[labelViews[i] mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(prev.mas_bottom);
make.left.right.equalTo(prev);
make.height.mas_equalTo(100);
if (i == labelViews.count - 1) {
make.bottom.equalTo(contentView.mas_bottom);
}
}];
}
prev = labelViews[i];
}
demo地址：https://github.com/UCliwenbin/MasonryForScrollView.git
网友评论