OC和Swift纯代码进行Autolayout布局
2017-09-21 16:24
246 查看
OC中纯代码进行Autolayout布局
/*
利用 NSLayoutConstraint 类创建具体的约束对象;
添加约束对象到相应的 view 上,代码有这两种:
1)- (void)addConstraint:(NSLayoutConstraint *)constraint;
2)- (void)addConstraints:(NSArray *)constraints;
*/
/*
上面的NSLayoutConstraint的类方法是:
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
总共有7个参数:
view1:要约束的控件(redView)
attr1:约束的类型,就是要做什么样的约束
relation:与参照控件之间的关系,比如大于、等于。。。
view2:参照的控件
attr2:约束的类型,常量
multiplier: 乘数,就是多少倍
c:常量,做好了上面的约束后会加上这个常量
因此,上面的topConstraint代表着要约束的控件redView的上边距等于参照控件self.view的左边距的1.0倍加上100
添加约束的规则是
在创建约束了之后,需要将其添加到作用的控件上才能生效,注意在添加约束的时候目标控件需要遵循以下规则(这里控件就用 view 简单表示吧):
(1)对于两个同层级 view 之间的约束关系,添加到它们的父 view 上
(2)对于两个不同层级 view 之间的约束关系,添加到他们最近的共同父 view 上
(3)对于有层次关系的两个 view 之间的约束关系,添加到层次较高的父 view 上
(4)对于比如长宽之类的,只作用在该 view 自己身上的话,添加到该 view 自己上
使用代码实现Autolayout的要注意:
(1)要先禁止 autoresizing 功能,防止 AutoresizingMask 转换成 Constraints,避免造成冲突,需要设置 view 的translatesAutoresizingMaskIntoConstraints属性为 NO;
(2)添加约束之前,一定要保证相关控件都已经在各自的父控件上;
(3)不用再给 view 设置 frame;
看到Apple自带的Autolayout的实现总感觉很不好,这里推荐使用Masonry,里面用到了block,代码很优雅,
比如上面的约束的代码可以写成:
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
// 在这个 block 里面,利用 make 对象创建约束
make.size.mas_equalTo(CGSizeMake(150, 150));
make.top.equalTo(self.view).offset(100);
make.left.equalTo(self.view).offset(100);
}];
是不是很优雅、简洁
这里不做详解,要了解请自行Google。
*/
Swift中进行Autolayout布局
/* 可以看出和OC基本一致 */
/* 为了代码方便,Apple团队为开发者提供了另外一种创建约束对象的方法--VFL语言创建约束对象。VFL,全称Visual Format Language,可以理解为格式化约束语言,其使用象形的方式将复杂的约束关系转化为NSLayoutConstraint约束对象。
*/
// 要创建一个视图,将其上、左、右边距都设置60个单元,高度设置为200个单位。
/*
卧槽,看起来是不是很懵逼啊
,其实也很好理解
NSLayoutConstraint提供了constraints()方法来将VFL字符串翻译成约束对象。这个方法中的withVisualFormat参数为VFL字符串,views参数是要设置为VFL字符串中使用到的视图控件的名称与对应的视图控件的映射。在VFL语言中,H代表水平方向的约束,V代表竖直方向的约束,|符号表示父视图的边沿,-60-表示相距20个单位的距离,[]内是要摆放的视图控件名称,()内为约束值。总的来说,尽管VFL语句进行约束对象的创建可以减少一部分工作负担,但是其代码风格却与Swift显得格格不入,并且如果需要对约束进行修改更新,就不太适用了。这里推荐三方的SnapKit框架,其实SnapKit就是Masonry的Swift版本。
比如上面的cyanView的约束就可以写成
cyanView.snp.makeConstraints{(make) in
make.left.equalTo(100)
make.top.equalTo(100)
make.width.equalTo(150)
make.height.equalTo(150)
}
另外,SnapKit也支持链式编程,上面可简化为:
cyanView.snp.makeConstraints{(make) in
make.left.top.equalTo(100)
make.width.height.equalTo(150)
}
关于更新和移除的约束操作,在SnapKit中也很简单,调用:
cyanView.snp.makeConstraints{(make) in
将要更新的约束代码重新编写
}
//移除所有约束
cyanView.snp.removeConstraints()
*/
/*
利用 NSLayoutConstraint 类创建具体的约束对象;
添加约束对象到相应的 view 上,代码有这两种:
1)- (void)addConstraint:(NSLayoutConstraint *)constraint;
2)- (void)addConstraints:(NSArray *)constraints;
*/
// 创建一个红色的View UIView *redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; //禁止将AutoresizingMask转化为Constraints redView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:redView]; // 添加约束 NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150]; [self.view addConstraint:widthConstraint];//添加一个约束 NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150]; NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100]; NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100]; // 添加多个约束 [self.view addConstraints:@[heightConstraint,topConstraint,leftConstraint]];
/*
上面的NSLayoutConstraint的类方法是:
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
总共有7个参数:
view1:要约束的控件(redView)
attr1:约束的类型,就是要做什么样的约束
relation:与参照控件之间的关系,比如大于、等于。。。
view2:参照的控件
attr2:约束的类型,常量
multiplier: 乘数,就是多少倍
c:常量,做好了上面的约束后会加上这个常量
因此,上面的topConstraint代表着要约束的控件redView的上边距等于参照控件self.view的左边距的1.0倍加上100
添加约束的规则是
在创建约束了之后,需要将其添加到作用的控件上才能生效,注意在添加约束的时候目标控件需要遵循以下规则(这里控件就用 view 简单表示吧):
(1)对于两个同层级 view 之间的约束关系,添加到它们的父 view 上
(2)对于两个不同层级 view 之间的约束关系,添加到他们最近的共同父 view 上
(3)对于有层次关系的两个 view 之间的约束关系,添加到层次较高的父 view 上
(4)对于比如长宽之类的,只作用在该 view 自己身上的话,添加到该 view 自己上
使用代码实现Autolayout的要注意:
(1)要先禁止 autoresizing 功能,防止 AutoresizingMask 转换成 Constraints,避免造成冲突,需要设置 view 的translatesAutoresizingMaskIntoConstraints属性为 NO;
(2)添加约束之前,一定要保证相关控件都已经在各自的父控件上;
(3)不用再给 view 设置 frame;
看到Apple自带的Autolayout的实现总感觉很不好,这里推荐使用Masonry,里面用到了block,代码很优雅,
比如上面的约束的代码可以写成:
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
// 在这个 block 里面,利用 make 对象创建约束
make.size.mas_equalTo(CGSizeMake(150, 150));
make.top.equalTo(self.view).offset(100);
make.left.equalTo(self.view).offset(100);
}];
是不是很优雅、简洁
这里不做详解,要了解请自行Google。
*/
Swift中进行Autolayout布局
let redView = UIView() // 禁止将AutoresizingMask转化为Constraints redView.translatesAutoresizingMaskIntoConstraints = false redView.backgroundColor = UIColor.red view.addSubview(redView) // 创建约束 let widthConstraint = NSLayoutConstraint(item: redView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150) let heightConstraint = NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150) let topConstraint = NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 100) let letConstraint = NSLayoutConstraint(item: redView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1.0, constant: 100) //添加多个约束 view.addConstraints([widthConstraint,heightConstraint,letConstraint,topConstraint])
/* 可以看出和OC基本一致 */
/* 为了代码方便,Apple团队为开发者提供了另外一种创建约束对象的方法--VFL语言创建约束对象。VFL,全称Visual Format Language,可以理解为格式化约束语言,其使用象形的方式将复杂的约束关系转化为NSLayoutConstraint约束对象。
*/
// 要创建一个视图,将其上、左、右边距都设置60个单元,高度设置为200个单位。
let cyanView = UIView() cyanView.backgroundColor = UIColor.cyan cyanView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(cyanView) let stringH = "H:|-60-[cyanView]-60-|" let stringV = "V:|-60-[cyanView(200)]|" let constraintArrayH = NSLayoutConstraint.constraints(withVisualFormat: stringH, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView]) let constraintArrayV = NSLayoutConstraint.constraints(withVisualFormat: stringV, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView]) view.addConstraints(constraintArrayH) view.addConstraints(constraintArrayV)
/*
卧槽,看起来是不是很懵逼啊
,其实也很好理解
NSLayoutConstraint提供了constraints()方法来将VFL字符串翻译成约束对象。这个方法中的withVisualFormat参数为VFL字符串,views参数是要设置为VFL字符串中使用到的视图控件的名称与对应的视图控件的映射。在VFL语言中,H代表水平方向的约束,V代表竖直方向的约束,|符号表示父视图的边沿,-60-表示相距20个单位的距离,[]内是要摆放的视图控件名称,()内为约束值。总的来说,尽管VFL语句进行约束对象的创建可以减少一部分工作负担,但是其代码风格却与Swift显得格格不入,并且如果需要对约束进行修改更新,就不太适用了。这里推荐三方的SnapKit框架,其实SnapKit就是Masonry的Swift版本。
比如上面的cyanView的约束就可以写成
cyanView.snp.makeConstraints{(make) in
make.left.equalTo(100)
make.top.equalTo(100)
make.width.equalTo(150)
make.height.equalTo(150)
}
另外,SnapKit也支持链式编程,上面可简化为:
cyanView.snp.makeConstraints{(make) in
make.left.top.equalTo(100)
make.width.height.equalTo(150)
}
关于更新和移除的约束操作,在SnapKit中也很简单,调用:
cyanView.snp.makeConstraints{(make) in
将要更新的约束代码重新编写
}
//移除所有约束
cyanView.snp.removeConstraints()
*/
相关文章推荐
- 含有导航栏的视图里tableView的坐标问题(swift代码理论和OC相通)
- Swift和OC代码注释分析 #pragma mark, FIXME and TODO
- OC代码中使用Swift文件的实践
- 在OC代码中创建Swift编写的视图控制器
- iOS代码规范(OC和Swift)
- iOS:Swift桥接OC代码
- Swift用代码进行界面跳转
- 在OC代码中创建Swift编写的视图控制器
- oc中嵌入swift代码
- 【swift】 使用bmob后端云进行增删改查以及上传文件的部分代码
- iOS开发之swift与OC混编出现的坑,oc中不能对swift的代理进行调用,不能访问swift中的代理,swift中的回调方法
- Swift基础之OC文件调用Swift代码(在上次的基础上写的)
- OC代码转Swift代码
- IOS开发OC代码中创建Swift编写的视图控制器
- swift3.0中的自定义下拉刷新和模拟延时操作(同时和OC中的进行对比)
- oc和swift对代码的分组,方便代码查找和导航用
- 编写高质量代码-OC 第9章 Objective-C与Swift的兼容性
- 关于用OC创建的项目调用swift代码
- Swift基础之OC文件调用Swift代码(在上次的基础上写的)
- Swift使用代码进行约束