IOS界面开发 masonry的应用

 记录使用masonry时，好用的功能。

文章中记录的功能都是在网上查找到并且实践的功能，文章中是展示关键代码，附上来源网址

父元素根据子元素的高度自适应高度

// 假设父元素boxView_有infoView_和footerView_boxView_ = [[UIView alloc] init];
[self.view addSubview:boxView_];infoView_ =[ [UIView alloc] init];
[boxView_ addSubview:infoView_];footerView_ =[ [UIView alloc] init];
[boxView_ addSubview:footerView_];// 父元素boxView_不设置高度
[boxView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.top.offset(20);make.left.offset(10);make.right.offset(-10);
}];[infoView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.height.mas_equalTo(300);make.top.offset(20);make.left.offset(10);make.right.offset(-10);
}];[footerView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.height.mas_equalTo(28); // 高度make.top.equalTo(infoView_.mas_bottom).offset(30); // 与infoView_间隔 30make.left.offset(10); // 与父元素左边间隔 10make.right.offset(-10); // 与父元素右边间隔 10make.bottom.mas_offset(-20); // 与父元素底部间隔 20 关键代码！！
}];

 上面代码中，最关键的一句是【make.bottom.mas_offset(-20);】，假设没有这句话，footerView_的布局已经完成了。这句话约束了父元素的底部与footerView的底部关系，实现了父元素的高度自适应

参考文章：https://www.cnblogs.com/lovemargin/p/12208521.html

拓展：UIScroll根据内容自适应滑动高度

scrollView_  = [[UIScrollView alloc] init ];
[self.view addSubview:scrollView_];
[scrollView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.top.left.right.equalTo(self.view);make.bottom.equalTo(self.view).offset(-80);
}];containerView_ = [[UIView alloc] init ];
[scrollView_ addSubview:containerView_];[containerView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.equalTo(scrollView_);make.width.equalTo(scrollView_);
}];// containerView_ 添加子元素
// ...// 假设containerView_最后一个元素是footerView_
UIView* lastView = footerView_;
[containerView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.bottom.equalTo(lastView.mas_bottom); // 关键代码 ！！！
}];

 上面代码中，最关键是对containerView_再次设置约束。参考了下面文章中提到的垂直方向的写法。

参考文章：https://www.cnblogs.com/lurenq/p/10567098.html

延伸思考

第一个代码中，在最后一个元素中设置与父元素的约束，实现父元素自适应高度；

这个代码中，设置完所有约束后，再设置父元素与最后一个子元素的约束，实现滑动范围。

尝试用第一个代码实现滑动功能，没有成功，不知道是什么原理。

仿纵向float布局

// 子元素的创建和布局，不需要特殊处理，按照正常的实现；父元素不要设置高度即可// 假设父元素boxView_有infoView_、likesView_、friendsView_、familyView_
// 其中，likesView_、friendsView_、familyView_根据数据的情况显示或隐藏
// 此时，已经设置完显示/隐藏状态了
UIView* lastView = infoView_;
if(!likesView_.hidden){[likesView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(lastView.mas_bottom).offset(10);}];lastView = likesView_;
}
if(!friendsView_.hidden){[friendsView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(lastView.mas_bottom).offset(10);}];lastView = friendsView_;
}
if(!familyView_.hidden){[familyView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(lastView.mas_bottom).offset(10);}];lastView = familyView_;
}
[boxView_ mas_makeConstraints:^(MASConstraintMaker *make) {make.bottom.equalTo(lastView.mas_bottom);
}];

 上面代码，使用的是临时视图的方法。下面文章中，介绍了MasonryFloatLayout的使用，可以学习一下。

参考文章：MasonryFloatLayout : 基于Masonry的浮动布局 - 掘金

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！