iOS编程(双语版)-视图-Autolayout代码初步
来源:互联网 发布:大数据的机遇与挑战 编辑:程序博客网 时间:2024/06/09 20:18
一谈到Autolayout,初学者肯定想到的是IB中使用拖拽啊,pin啊各种鼠标操作来进行添加各种约束。
今天我们要聊得是如何利用代码来添加视图间的约束。
我们来看一个例子:
(Objective-C代码)
UIView* v1 = [[UIView alloc] initWithFrame:CGRectMake(100, 111, 132, 194)];v1.backgroundColor = [UIColor colorWithRed:1 green:.4 blue:1 alpha:1];UIView* v2 = [UIView new];v2.backgroundColor = [UIColor colorWithRed:.5 green:1 blue:0 alpha:1];UIView* v3 = [UIView new];v3.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];[mainview addSubview: v1];[v1 addSubview: v2];[v1 addSubview: v3];v2.translatesAutoresizingMaskIntoConstraints = NO;v3.translatesAutoresizingMaskIntoConstraints = NO;[v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeLeft relatedBy:0 toItem:v1 attribute:NSLayoutAttributeLeft multiplier:1 constant:0]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeRight relatedBy:0 toItem:v1 attribute:NSLayoutAttributeRight multiplier:1 constant:0]]; [v1 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeTop relatedBy:0 toItem:v1 attribute:NSLayoutAttributeTop multiplier:1 constant:0]];[v2 addConstraint: [NSLayoutConstraint constraintWithItem:v2 attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:10]];[v3 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeWidth relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:20]];[v3 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeHeight relatedBy:0 toItem:nil attribute:0 multiplier:1 constant:20]];[v1 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeRight relatedBy:0 toItem:v1 attribute:NSLayoutAttributeRight multiplier:1 constant:0]];[v1 addConstraint: [NSLayoutConstraint constraintWithItem:v3 attribute:NSLayoutAttributeBottom relatedBy:0 toItem:v1 attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];
(Swift代码 iOS9)
let v1 = UIView(frame:CGRectMake(100, 111, 132, 194))v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)let v2 = UIView()v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)let v3 = UIView()v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)mainview.addSubview(v1)v1.addSubview(v2)v1.addSubview(v3)v2.translatesAutoresizingMaskIntoConstraints = falsev3.translatesAutoresizingMaskIntoConstraints = falsev1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Leading, relatedBy: .Equal, toItem: v1, attribute: .Leading, multiplier: 1, constant: 0))v1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Trailing, relatedBy: .Equal, toItem: v1, attribute: .Trailing, multiplier: 1, constant: 0))v1.addConstraint( NSLayoutConstraint(item: v2, attribute: .Top, relatedBy: .Equal, toItem: v1, attribute: .Top, multiplier: 1, constant: 0))v2.addConstraint( NSLayoutConstraint(item: v2, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 10))v3.addConstraint( NSLayoutConstraint(item: v3, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20))v3.addConstraint( NSLayoutConstraint(item: v3, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20))v1.addConstraint( NSLayoutConstraint(item: v3, attribute: .Trailing, relatedBy: .Equal, toItem: v1, attribute: .Trailing, multiplier: 1, constant: 0))v1.addConstraint( NSLayoutConstraint(item: v3, attribute: .Bottom, relatedBy: .Equal, toItem: v1, attribute: .Bottom, multiplier: 1, constant: 0))
运行效果:
(竖屏)
(横屏)
看了以上代码后,你肯定要疯了,那么多约束。。。
下面,我们就来逐一分析:
我们先来看一下这段代码
OC
v3 = [[UIView alloc] initWithFrame:CGRectMake(v1.bounds.size.width-20, v1.bounds.size.height-20, 20, 20)];
Swift
let v3 = UIView(frame:CGRectMake( v1.bounds.width-20, v1.bounds.height-20, 20, 20))
这段代码很清楚地表达了:v3是宽高各20,并且位置在v1的右下角,其原点距离v1的右下角
坐标x,y各偏移20,也就是我们上图中看到的大红色矩形。
约束的API语句有时候是很冗长的,看上去很难懂。
为此,Apple发明了可视化格式(Visual Format)来便于理解。
看看下面的这个例子:
@"V:|[v2(10)]"
上面的表达式中,V:表示是垂直方向上的约束,同理,H:表示水平方向上约束。
管道符|代表父视图。
中括号内是要添加约束的视图变量名。
所以,这里的约束清晰地表达: v2和父视图顶端对齐,并且v2的高度是10。
0 0
- iOS编程(双语版)-视图-Autolayout代码初步
- iOS编程(双语版)-视图-Frame/Bounds/Center
- iOS编程(双语版) - 视图 - Transform(转换)
- IOS autoLayout 让视图居中
- iOS 代码 AutoLayout
- iOS AutoLayout代码版
- ios autolayout代码布局
- ios autolayout 代码设置
- ios-代码实现autolayout
- IOS Autolayout(VFL) 处理子视图居中
- IOS Autolayout(VFL) 处理子视图居中
- iOS中代码使用Autolayout
- iOS AutoLayout 代码布局自动化
- ios开发autolayout之代码实现Autolayout使用总结
- 关于IOS的Autolayout代码编写使用
- 关于IOS的Autolayout代码编写使用
- iOS 代码添加约束—VFL (AutoLayout)
- iOS 代码添加约束—VFL (AutoLayout)
- 转 展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告
- UITableViewCell - 右滑、左滑等操作
- DNS域名解析
- mysql卸载后服务中还存在问题
- HNOI 2012 射箭 半平面交
- iOS编程(双语版)-视图-Autolayout代码初步
- hdu 2063(二分图最大匹配,匈牙利算法,水题)
- iOS UITextField 输入含小数的数字(位数限制)
- Sql -- 练习3 递归查询
- spring引用另一xml文件中的bean
- 通过广播启动另一个应用的Activity
- 图的深度优先搜索和广度优先搜索
- Machine Learning Week 2 ex1
- 关联表查询