首页 > 代码库 > 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使用线性公式