UIScrollView如何使用Masonry做自动适配
2019-01-08 本文已影响3人
朝阳小麦
适用人群：iOS开发人员。
本文内容：一般用UIScrollView的时候，需要设置contentSize来告诉UIScrollView该如何滚动，但是如果UIScrollView的子视图是Masonry布局，则无法获取内容的高度，从而无法设置contentSize。那么，该如何告诉UIScrollView滚动方向呢？
目录：
1.效果展示
2.代码粘贴
3.代码讲解
1.效果展示
效果如下图所示，分别为，1.内容比较少无需UIScrollView滚动；2.内容比较多，需要UIScrollView滚动，显示全部内容。
效果1：内容比较少，无需滚动
效果2：内容多，需要滚动展示
2.代码粘贴
整个界面代码如下：
#import "FYContactRecordingDeatilViewController.h"
@interface FYContactRecordingDeatilViewController ()
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIView *contentView;
@property (nonatomic, strong) UILabel *nameTLbl;
@property (nonatomic, strong) UILabel *nameLbl;
@property (nonatomic, strong) UILabel *timeTLbl;
@property (nonatomic, strong) UILabel *timeLbl;
@property (nonatomic, strong) UILabel *wayTLbl;
@property (nonatomic, strong) UILabel *wayLbl;
@property (nonatomic, strong) UILabel *descLbl;
@end
@implementation FYContactRecordingDeatilViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"查看接触记录";
[self setupSubviews];
self.nameTLbl.text = @"姓名";
self.timeTLbl.text = @"接触时间";
self.wayTLbl.text = @"接触方式";
self.nameLbl.text = @"2000";
self.timeLbl.text = @"2018-12-24 13:14";
self.wayLbl.text = @"微信";
self.descLbl.text = @"银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。银行是金融机构之一，银行按类型分为：中央银行， 政策性银行，商业银行，投资银行，世界银行，它们 的职责各不相同。";
}
#pragma mark - views
- (void)setupSubviews {
[self.view addSubview:self.scrollView];
[_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsZero);
}];
[_scrollView addSubview:self.contentView];
[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.scrollView);
make.width.mas_equalTo(self.scrollView);
make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
}];
[self.contentView addSubview:self.nameLbl];
[self.contentView addSubview:self.nameTLbl];
[self.contentView addSubview:self.timeTLbl];
[self.contentView addSubview:self.timeLbl];
[self.contentView addSubview:self.wayLbl];
[self.contentView addSubview:self.wayTLbl];
[self.contentView addSubview:self.descLbl];
[_nameTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(15);
make.top.mas_equalTo(0);
make.height.mas_equalTo(43);
}];
[_nameLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(-30);
make.centerY.mas_equalTo(self.nameTLbl);
}];
[_timeTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.height.mas_equalTo(self.nameTLbl);
make.top.mas_equalTo(self.nameTLbl.mas_bottom).mas_offset(1);
}];
[_timeLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(self.nameLbl);
make.centerY.mas_equalTo(self.timeTLbl);
}];
[_wayTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.height.mas_equalTo(self.nameTLbl);
make.top.mas_equalTo(self.timeTLbl.mas_bottom).mas_offset(1);
}];
[_wayLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(self.nameLbl);
make.centerY.mas_equalTo(self.wayTLbl);
}];
[_descLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.nameTLbl);
make.top.mas_equalTo(self.wayTLbl.mas_bottom).mas_offset(15);
make.right.mas_equalTo(-15);
make.bottom.mas_lessThanOrEqualTo(-15);
}];
//划分隔线 箭头icon
__block NSArray *arr = @[self.nameTLbl, self.timeTLbl, self.wayTLbl];
for (int i=0; i<3; i++) {
UIView *line = [UIView new];
line.backgroundColor = [UIColor colorWithHexString:@"#F5F5F5"];
[self.contentView addSubview:line];
__block CGFloat left = i==2?0:15;
__block CGFloat top = 43*(i+1)+i;
[line mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(left);
make.right.mas_equalTo(0);
make.top.mas_equalTo(top);
make.height.mas_equalTo(1);
}];
UIImageView *icon = [UIImageView new];
icon.image = [UIImage imageNamed:@"arrow_gray"];
[self.contentView addSubview:icon];
[icon mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(arr[i]);
make.right.mas_equalTo(-15);
}];
}
}
#pragma mark -- Getter
- (UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
_scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
_scrollView.backgroundColor = [UIColor clearColor];
}
return _scrollView;
}
- (UIView *)contentView {
if (!_contentView) {
_contentView = [UIView new];
_contentView.backgroundColor = [UIColor whiteColor];
}
return _contentView;
}
- (UILabel *)nameTLbl {
if (!_nameTLbl) {
_nameTLbl = [UILabel new];
_nameTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
_nameTLbl.font = FONT_REGULAR(15);
}
return _nameTLbl;
}
- (UILabel *)wayTLbl {
if (!_wayTLbl) {
_wayTLbl = [UILabel new];
_wayTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
_wayTLbl.font = FONT_REGULAR(15);
}
return _wayTLbl;
}
- (UILabel *)timeTLbl {
if (!_timeTLbl) {
_timeTLbl = [UILabel new];
_timeTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
_timeTLbl.font = FONT_REGULAR(15);
}
return _timeTLbl;
}
- (UILabel *)nameLbl {
if (!_nameLbl) {
_nameLbl = [UILabel new];
_nameLbl.textColor = [UIColor colorWithHexString:@"#666666"];
_nameLbl.font = FONT_REGULAR(15);
}
return _nameLbl;
}
- (UILabel *)timeLbl {
if (!_timeLbl) {
_timeLbl = [UILabel new];
_timeLbl.textColor = [UIColor colorWithHexString:@"#666666"];
_timeLbl.font = FONT_REGULAR(15);
}
return _timeLbl;
}
- (UILabel *)wayLbl {
if (!_wayLbl) {
_wayLbl = [UILabel new];
_wayLbl.textColor = [UIColor colorWithHexString:@"#666666"];
_wayLbl.font = FONT_REGULAR(15);
}
return _wayLbl;
}
- (UILabel *)descLbl {
if (!_descLbl) {
_descLbl = [UILabel new];
_descLbl.textColor = [UIColor colorWithHexString:@"#666666"];
_descLbl.font = FONT_REGULAR(15);
_descLbl.numberOfLines = 0;
}
return _descLbl;
}
@end
3.代码讲解
（1）上述代码可以看到，全部过程并不需要设置UIScrollView的contentSize。
（2）把UIScrollView的大小设置为和self.view一样大：
[_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsZero);
}];
（3）UIScrollView只有一个子视图contentView(UIView)，其他的视图都被添加到这个contentView上。contentView的大小是：
[_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.scrollView);
make.width.mas_equalTo(self.scrollView);
make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
}];
注意：
make.edges.mas_equalTo(self.scrollView);
make.width.mas_equalTo(self.scrollView);
这两句是重点，width和scrollView相同，则告诉了scrollView如何只能竖直方向滚动。
make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));这一句，是因为我这个界面希望contentView这个白色的底部局能有个最小高度，这里根据自己界面需求来。
（4）contentView的子视图，最下面一个view要有一个bottom约束，声明和contentView的底部关系，这样才能依靠所有子视图内容，来把contentView的高度撑开。
[_descLbl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.nameTLbl);
make.top.mas_equalTo(self.wayTLbl.mas_bottom).mas_offset(15);
make.right.mas_equalTo(-15);
make.bottom.mas_lessThanOrEqualTo(-15);/////////把contentView的高度撑开
}];
注意：
make.bottom.mas_lessThanOrEqualTo(-15);
这里是因为承接上面：make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
因为我要给contentView一个最小高度，所以bottom要为mas_lessThanOrEqualTo，如果设置为mas_equalTo的话，UIlabel默认文本居中，显示效果就不太好了。
如果你的界面没这个需求，设置为make.bottom.mas_equalTo(-15);即可。
