AutoLayout 之NSLayoutConstraint

2023-08-28 20:36:58

这次主要讲的用代码来设置AutoLayout，为实现添加autoLayout视图主要介绍使用如下该方法,调用方法：- (void)awakeFromNib {}

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

参数说明：

view1：指定约束左边的视图view1

attr1：指定view1的属性attr1，具体属性见文末。

relation：指定左右两边的视图的关系relation，具体关系见文末。

view2：指定约束右边的视图view2

attr2：指定view2的属性attr2，具体属性见文末。

multiplier：指定一个与view2属性相乘的乘数multiplier

c：指定一个与view2属性相加的浮点数constant

关系的值:

typedef NS_ENUM(NSInteger, NSLayoutRelation) {

NSLayoutRelationLessThanOrEqual = -1, //小于等于

NSLayoutRelationEqual = 0, //等于

NSLayoutRelationGreaterThanOrEqual = 1, //大于等于

};

属性:

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {

NSLayoutAttributeLeft = 1, //左侧

NSLayoutAttributeRight, //右侧

NSLayoutAttributeTop, //上方

NSLayoutAttributeBottom, //下方

NSLayoutAttributeLeading, //首部

NSLayoutAttributeTrailing, //尾部

NSLayoutAttributeWidth, //宽度

NSLayoutAttributeHeight, //高度

NSLayoutAttributeCenterX, //X轴中心

NSLayoutAttributeCenterY, //Y轴中心

NSLayoutAttributeBaseline, //文本底标线

NSLayoutAttributeNotAnAttribute = 0 //没有属性

};

接下我们一起来看一个demo

　　我们想让两个视图Y方向居中，第一个视图距离左边缘20，第一个视图以第二个视图等大并且X方向距离为100。

UIView *view1 = [[UIView alloc] init];
    UIView *view2 = [[UIView alloc] init];
    [self.view addSubview:view1];
    [self.view addSubview:view2];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor blueColor];
    view2.backgroundColor = [UIColor grayColor];
    //set view1 height and width
    [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
    [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
    //set view2 height and width
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
    //set relationship between view1 and view2
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeRight multiplier:1 constant:100]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    //set relationship between topView and view1
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

下面我们一起来看一下这段代码

注意 5、6行设置view的 translatesAutoresizingMaskIntoConstraints 属性为NO，意思就是遵循autoLayout抛弃原有设置的高度宽度等，使用autolayout的视图必须要设置该属性。

10、11行设置view1的宽和高，大家可能已经发现item2为nil并且attrbute为attribute:NSLayoutAttributeNotAnAttribute，这样做我们带入公式就会明白

item1 = m * 0 + constant。也就是直接设置本视图的宽和高。

13、14行是设置view2的宽高和view1相同，这里细心的同学可能会发现添加约束的对象并不是像上面设置宽高时的view1，而是它们共同的父视图self.view。因为在autolayout中有这样的规定，如果是一元约束，即只针对自己的约束，那么就直接添加在该视图上。如果是二元约束，那么就必须要添加在它们的共同最近的父视图上面。

15、16行是设置view1和view2的关系，设置view1和view2具有相同的Y，并且view2在view1右边距离100的位置。

18、19行最后我们设置了view1左边距离父视图左边20的距离，并且view1的Y等于父视图Y的中点值。

通过以上的设置，我们运行的结果就是：

如图，视图1在距左边20的位置，视图1视图2都Y方向居中并且相距100的距离。