首页 > 代码库 > Autolayout代码实现举例-01使用线性公式
Autolayout代码实现举例-01使用线性公式
Autolayout代码实现举例-01使用线性公式
1.例子1
需求: 令一个宽高都为200的view永远显示在屏幕的中央。
1 // 1.创建蓝色view 2 UIView *blueView =[[UIView alloc] init]; 3 blueView.backgroundColor = [UIColor blueColor]; 4 // 使用Autolayout必须关闭下面这个属性, 意思是不要把AutoresizingMask应用到Contrainsts中 5 blueView.translatesAutoresizingMaskIntoConstraints = NO; 6 // 使用Autolayout之前必须把view加到父视图上 7 [self.view addSubview:blueView]; 8 9 10 // 2.对红色view添加约束11 // 2.1.约束宽度12 CGFloat width = 200;13 // 创建约束对象, 实际是就是在表述线性公式 y = ax + b;14 NSLayoutConstraint *widthConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:width];15 // 与其他view无关的约束只需加在自己的约束集合中16 [blueView addConstraint:widthConst];17 18 // 2.2.约束高度19 CGFloat height = 200;20 NSLayoutConstraint *heightConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];21 [blueView addConstraint:heightConst];22 23 // 2.3.约束中心位置24 NSLayoutConstraint *centerXConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];25 // 与其他view有关的约束加在离自己最近的父视图上26 [self.view addConstraint:centerXConst];27 28 NSLayoutConstraint *centerYConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];29 [self.view addConstraint:centerYConst];
结果: 竖屏 : 横屏:
2.例子2
需求: 创建两个View, 一个蓝色, 一个红色, 蓝色距离屏幕最上面、左边、右边的距离为20, 使红色view的顶部与蓝色view的底部的间距为20,且两者的右边缘对齐。
1 // 1.蓝色view 2 UIView *blueView =[[UIView alloc] init]; 3 blueView.backgroundColor = [UIColor blueColor]; 4 blueView.translatesAutoresizingMaskIntoConstraints = NO; 5 [self.view addSubview:blueView]; 6 7 // 2.红色view 8 UIView *redView =[[UIView alloc] init]; 9 redView.backgroundColor = [UIColor redColor];10 redView.translatesAutoresizingMaskIntoConstraints = NO;11 [self.view addSubview:redView];12 13 // 3.蓝色view的约束14 // 3.1.高度15 CGFloat height = 40;16 NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];17 [blueView addConstraint:blueHeight];18 19 // 3.2.左边间距20 CGFloat margin = 20;21 NSLayoutConstraint *leftMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];22 [self.view addConstraint:leftMargin];23 24 // 3.3.右边间距25 // 注意constant的正负26 NSLayoutConstraint *rightMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];27 [self.view addConstraint:rightMargin];28 29 // 3.4.顶部间距30 NSLayoutConstraint *topMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];31 [self.view addConstraint:topMargin];32 33 // 4.红色view的约束34 // 4.1.高度35 // 注意这里redView的高度关联到blueView, 所以此约束必须加到他们共同的(且为最近的)父视图上, 否则引发崩溃36 NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];37 [self.view addConstraint:redHeight];38 39 // 4.2.左边缘40 NSLayoutConstraint *leftEadge = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];41 [self.view addConstraint:leftEadge];42 43 // 4.3.右边间距 == blueView44 NSLayoutConstraint *rightMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];45 [self.view addConstraint:rightMarginRed];46 47 // 4.4.顶部间距 == blueView底部 + 2048 NSLayoutConstraint *topMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];49 [self.view addConstraint:topMarginRed];
结果: 竖屏 : 横屏:
Autolayout代码实现举例-01使用线性公式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。