NSLayoutConstraint 动态布局

    在iOS开发中,由于屏幕是变化的,所以有时候 布局是动态的,所以本期带来的就是NSLayoutConstraint动态布局。

    在用NSLayoutConstraint布局之前translatesAutoresizingMaskIntoConstraints属性一定要设为NO。

  先介绍一下用的一个方法。

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

参数view1:目标视图。

参数attr1:目标视图所要设置的属性。

参数relation:目标视图属性与参照视图的关系 有三种

    NSLayoutRelationLessThanOrEqual = -1,小于等于

    NSLayoutRelationEqual = 0,等于

    NSLayoutRelationGreaterThanOrEqual = 1,大于等于

参数view2:参照视图。

参数attr2:参照视图属性。

参数multiplier:乘数--目标视图与参照视图的属性的倍数关系。不可为0

参数c:常数--目标视图与参照视图的属性的加减关系。

属性NSLayoutAttribute:

    NSLayoutAttributeLeft       对象左边距

    NSLayoutAttributeRight,     对象右边距

    NSLayoutAttributeTop, 对象上边距

    NSLayoutAttributeBottom,    对象下边距

    NSLayoutAttributeLeading, 对象左边距

    NSLayoutAttributeTrailing, 对象右边距 这里特别将强调一下trailing和right代表的意思是一样的 但是实际应用的时候 不能混用 一定要统一

    NSLayoutAttributeWidth, 对象的宽

    NSLayoutAttributeHeight, 对象的高

    NSLayoutAttributeCenterX, 对象中心点的x

    NSLayoutAttributeCenterY,   对象中心的点y

    NSLayoutAttributeLastBaseline,文本下划线

    NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,文本下划线

    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),文本上划线

    对于下面的属性在上面的基础上加了边缘,也就是说上下左右距离实际边缘有8磅的距离。

    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 没有属性


    好了说了那么多废话,终于要应用了,这样吧随便举个例子:在屏幕中央并列横排放三个label,所有的宽与所有的高都相同,居左8,居右8,间距10。

    下面是实现代码:

    UILabel *label1 = [[UILabel alloc] init];

    UILabel *label2 = [[UILabel alloc] init];

    UILabel *label3 = [[UILabel alloc] init];

    [self.view addSubview:label1];

    [self.view addSubview:label2];

    [self.view addSubview:label3];

    label1.translatesAutoresizingMaskIntoConstraints = NO;

    label2.translatesAutoresizingMaskIntoConstraints = NO;

    label3.translatesAutoresizingMaskIntoConstraints = NO;

    label1.backgroundColor = [UIColor greenColor];

    label2.backgroundColor = [UIColor yellowColor];

    label3.backgroundColor = [UIColor redColor];

    label1.text = @"第一个";

    label2.text = @"第二个";

    label3.text = @"第三个";

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];//label1 高=宽

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label1 attribute:NSLayoutAttributeLeftMargin relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeftMargin multiplier:1 constant:0]];// label1 距左8

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];//label1 距上150

    

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:label2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];//label2 高=宽

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];//label2 宽=label1 的宽

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeTop multiplier:1 constant:0]];//label2 label1上边距

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeTrailing multiplier:1 constant:10]];//label2 左距laebl1右边10

    

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:label3 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];//label3 高=宽

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];//label3 宽=label1的宽

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:label1 attribute:NSLayoutAttributeTop multiplier:1 constant:0]];//label3 label1上边距

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:label2 attribute:NSLayoutAttributeTrailing multiplier:1 constant:10]];////label3 左距laebl2右边10

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeTrailingMargin relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailingMargin multiplier:1 constant:0]];//label3 距右边8


         下面是效果图:

NSLayoutConstraint 动态布局_第1张图片

  其实呢这个方法虽然好用,但是代码量略多,显得臃肿,下期给大家介绍一个第三方工具Masonry的使用。




你可能感兴趣的:(iOS开发)