您的位置:首页 > 产品设计 > UI/UE

iOS编程——简单的UI自动适配解决方案:Masonry

2015-08-04 15:13 555 查看
现在比较方便常用的UI适配方案大约以下两种了:

1.StoryBorad的话用Autolayout+SizeClass,可以适配各种屏幕尺寸和横竖屏。 刚开始可能比较慢,熟悉了以后还是挺快的。

2.纯代码的话就是用Masonry了,除了动画上可能有一些复杂,普通的UI适配还是很简单的。下面就通过代码了解下Masonry的常用方法:

Masonry的简介可以看这里:http://www.cocoachina.com/ios/20141219/10702.html

做项目时最经常遇到的情况:在UIViewController里通过Masonry来实现自动布局,当最后一个子视图超过controller.View高度时可以上下滚动。

1)导入Masonry的.h和.m文件,然后初始化一个UIViewController,在view上添加一个ScrollView

UIScrollView *scrollView = [UIScrollView new];
scrollView.showsVerticalScrollIndicator = NO;
[self.view addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
make.bottom.equalTo(self.view);
}];


2)scrollView上添加一个容器View,把子视图都加到这个容器View上,通过它的高度来使ScrollView实现超出高度自动滚动。

UIView *containerView = [UIView new];
containerView.backgroundColor = [UIColor clearColor];
[scrollView addSubview:containerView];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
make.width.equalTo(scrollView);
}];


3.向containerView添加各种子视图,比如添加一个label

UILabel *label1 = [UILabel new];
[self.containerView addSubview:label1];
[label1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.containerView.mas_top).offset(15);
make.height.equalTo(30);
make.left.equalTo(self.containerView).offset(15);
make.right.equalTo(self.containerView).offset(-15);
}];


再添加一个很高的label

UILabel *label2 = [UILabel new];
[self.containerView addSubview:label2];
[label2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(label1.mas_bottom).offset(10);
make.height.equalTo(1000);//超过当前view controller的高度
make.left.equalTo(label1);
make.right.equalTo(label1);
}];


4.设置containerView的mas_bottom

[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(label2.mas_bottom);
}];


通过最后一步就可以使scrollView上下滚动了,比较简单的实现了布局。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: