iOS 代码自动布局
2020-06-11 本文已影响0人
清风_____
oc
1.注意 : 布局是设置在两个 view 间的一种约束，所以我们不能只设置一个 view 的约束，这样做没有什么意义，它必须是相对的。
2.所有的布局都遵循以下的公式
view1.property = (view.2property * multiplier) + constant
翻译过来就是 : view1 的某个属性的值 = （view2的某个属性的值 * 系数）+ 常量
// 参数 1 : 需要添加约束的 view
// 参数 2 : 需要填加的约束（左边、右边、宽度、高度等）
// 参数 3 : 约束关系（大于、小于、相等）
// 参数 4 : 参数 view（约束是相对于哪个 view 而言）
// 参数 5 : 参照 view 的哪一个参数（左边、右边、宽度、高度等）
// 参数 6 : 系数
// 参数 7 : 常量
/* Create constraints explicitly. Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
Use of this method is not recommended. Constraints should be created using anchor objects on views and layout guides.
*/
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c API_AVAILABLE(macos(10.7), ios(6.0), tvos(9.0));
NSLayoutAttribute 枚举如下
typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1, // 左边，永远指左边
NSLayoutAttributeRight, // 右边，永远指有伴
NSLayoutAttributeTop, // 顶部
NSLayoutAttributeBottom, // 底部
NSLayoutAttributeLeading, // 前面，在某些从右至左为习惯的的确会变成右边
NSLayoutAttributeTrailing, // 后面，在某些从右至左为习惯的的确会变成左边
NSLayoutAttributeWidth, // 宽度
NSLayoutAttributeHeight, // 高度
NSLayoutAttributeCenterX, // 中点的 X 值
NSLayoutAttributeCenterY, // 中点的 Y 值
NSLayoutAttributeLastBaseline, // 基准线:位于视图底部上方放置文字的地方
NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,
NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeNotAnAttribute = 0 // 没有属性
};
NSLayoutRelation枚举如下
typedef NS_ENUM(NSInteger, NSLayoutRelation) {
NSLayoutRelationLessThanOrEqual = -1, // 小于或等于（先使用等于，如果等于不满足再使用小于）
NSLayoutRelationEqual = 0, // 等于
NSLayoutRelationGreaterThanOrEqual = 1, // 大于或等于（先使用等于，如果等于不满足再使用大于）
};
假如设置某个 view的约束是大于等于50，那么首先会使用50，当视图被拉伸的时候，50就无法满足，此时就会使用大于50的值
实例一：设置子视图在父视图中，并且上下左右到父视图的上下左右都距离 50
self.view.backgroundColor = [UIColor yellowColor];
// 创建视图
UIView * view = [[UIView alloc] init];
// 设置背景色
view.backgroundColor = [UIColor greenColor];
// 添加
[self.view addSubview:view];
// 关闭系统自定义布局
view.translatesAutoresizingMaskIntoConstraints = NO;
// 设置 子视图左侧距离父视图左侧 50
NSLayoutConstraint * LC1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:50];
// 设置 子视图顶部距离 父视图顶部 50
NSLayoutConstraint * LC2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:50];
// 设置 子视图右侧距离 父视图右侧 50
NSLayoutConstraint * LC3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-50];
// 设置 子视图底部距离 父视图底部 50
NSLayoutConstraint * LC4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-50];
// 将子视图的约束添加到父视图上
[self.view addConstraints:@[LC1, LC2, LC3, LC4]];
实例二：子视图在父视图中间，且 width 为 300，height 为 200
// 创建 UIView 对象
UIView * view = [[UIView alloc] init];
view.backgroundColor = [UIColor blueColor];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
// 场景二 ：子视图在父视图中间，且width 300，height 200
NSLayoutConstraint * centerX = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
NSLayoutConstraint * centerY = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
NSLayoutConstraint * height = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200];
NSLayoutConstraint * width = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
[self.view addConstraints:@[centerX, centerY, height, width]];
场景一
20170410111216594.png
场景二
20170410111558943.png
swift
self.view.backgroundColor = UIColor.red
heartDynamicLineView = DynamicLineView.init()
self.view.addSubview(heartDynamicLineView)
layoutViewFunction(yView: self.view, zView: heartDynamicLineView)
heartDynamicLineView.backgroundColor = UIColor.orange
//代码布局
func layoutViewFunction(yView:UIView,zView:DynamicLineView) -> Void {
zView.translatesAutoresizingMaskIntoConstraints = false
let onThe:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1.0, constant: 100)
let Under:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.bottom, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1.0, constant: -100)
let left:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.left, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.left, multiplier: 1.0, constant: 20)
let right:NSLayoutConstraint = NSLayoutConstraint.init(item: zView, attribute: NSLayoutConstraint.Attribute.right, relatedBy: NSLayoutConstraint.Relation.equal, toItem: yView, attribute: NSLayoutConstraint.Attribute.right, multiplier: 1.0, constant: -20)
yView.addConstraints([onThe,Under,left,right])
}
Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-08 at 15.57.10.png
