通过代码添加约束之NSLayoutConstraint

原创 2015年11月20日 16:37:27

什么是NSLayoutConstraint?

在xib中,我们可以用拖拽约束的方式来给空间添加约束条件,但是如果控件过多,则整个xib文件中的线条会变得混乱不堪,虽然苹果在极力推荐可视化的加约束方式,但是还是给我们提供了代码的方式来添加约束:NSLayoutConstraint。

如何使用NSLayoutConstraint?

在使用NSLayoutConstraint前,我们需要知道一个小的知识点:Autoresizing Mask。在使用 Auto Layout 时,首先需要将视图的 setTranslatesAutoresizingMaskIntoConstraints属性设置为 NO。这个属性默认为 YES。当它为 YES 时,运行时系统会自动将 Autoresizing Mask 转换为 Auto Layout 的约束,这些约束很有可能会和我们自己添加的产生冲突。 我们常常会忘了做这一步,然后引起的约束报错就是这样的:


没有关闭setTranslatesAutoresizingMaskIntoConstraints属性报的问题

在xib中,如果我们勾选了use auto layout,则编译器会自动帮我们关闭Autoresizing Mask,如果是使用代码添加约束,则需要手动关闭Autoresizing Mask。

setTranslatesAutoresizingMaskIntoConstraints这个方法是交给被添加约束的视图来执行的,关闭该视图的Autoresizing Mask。在添加约束前,就应该关闭该属性。

使用NSLayoutConstraint为视图添加约束

Auto Layout 中约束对应的类为 NSLayoutConstraint,一个 NSLayoutConstraint 实例代表一条约束。

NSLayoutConstraint有两个方法,我们主要介绍 constraintWithItem:也是最常用的:

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

该方法有7个参数,不过不用但心,这七个参数的联系是很紧密的,前三个和被约束的视图有关,后四个和他的父视图有关。这个方法连起来可以翻译如下:view1的某个属性(attr1)等于view2的某个属性(attr2)的值的多少倍(multiplier)加上某个常量(constant)。描述的是一个view与另外一个view的位置和大小约束关系。其中属性attribute有上、下、左、右、宽、高等,关系relation有小于等于、等于、大于等于。需要注意的是,小于等于 或 大于等于 优先会使用 等于 关系,如果 等于 不能满足,才会使用 小于 或 大于。例如设置一个 大于等于100 的关系,默认会是 100,当视图被拉伸时,100 无法被满足,尺寸才会变得更大。

下边我们上代码,看看如何使用这个类来给视图添加约束。

假如我们设计一个简单的页面。一个子view在父view中,其中子view的上下左右边缘都离父view的边缘40个像素。这个我们该如何写呢?如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor yellowColor];


    UIView *subView = [[UIView alloc] init];
    subView.backgroundColor = [UIColor redColor];
    // 在设置约束前,先将子视图添加进来
    [self.view addSubview:subView];

    // 使用autoLayout约束,禁止将AutoresizingMask转换为约束
    [subView setTranslatesAutoresizingMaskIntoConstraints:NO];

    // 设置subView相对于VIEW的上左下右各40像素
    NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:40];
    NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:40];
    // 由于iOS坐标系的原点在左上角,所以设置右边距使用负值
    NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-40];

    // 由于iOS坐标系的原点在左上角,所以设置下边距使用负值
    NSLayoutConstraint *constraint4 = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-40];

    // 将四条约束加进数组中
    NSArray *array = [NSArray arrayWithObjects:constraint1, constraint2, constraint3, constraint4 ,nil];
    // 把约束条件设置到父视图的Contraints中
    [self.view addConstraints:array];
}

然后我们看运行效果:


添加约束后的效果

这里有几个注意点

  1. 添加约束前确定已经把需要布局的子view添加到父view上了
  2. 一定要禁止将Autoresizing Mask转换为约束
  3. 要把子view的约束加在父view上
  4. 因为iOS中原点在左上角所以使用offset时注意right和bottom用负数

我们再添加一个需求:
子view在父view的中间,且子view长200,高100。

    // ssubView在subView中间,宽高200,100
    UIView *ssubView = [[UIView alloc] init];
    ssubView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:ssubView];
    [ssubView setTranslatesAutoresizingMaskIntoConstraints:NO];

    // 加约束
    NSLayoutConstraint *sContraint1 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    NSLayoutConstraint *sContraint2 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
    NSLayoutConstraint *sConstraint3 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
    NSLayoutConstraint *sConstraint4 = [NSLayoutConstraint constraintWithItem:ssubView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200];

    NSArray *array2 = [NSArray arrayWithObjects:sContraint1, sContraint2,sConstraint3,sConstraint4, nil];
    [self.view addConstraints: array2];

查看运行效果:


添加新需求后的效果

这里有几个注意点

  1. 如果是设置view自身的属性,不涉及到与其他view的位置约束关系。比如view自身的宽、高等约束时,方法constraintWithItem:的第四个参数view2(secondItem)应设为nil;且第五个参数attire(secondAttribute)应设为NSLayoutAttributeNotAnAttribute 。
  2. 在设置宽和高这两个约束时,relatedBy参数使用的是 NSLayoutRelationGreaterThanOrEqual,而不是 NSLayoutRelationEqual。因为 Auto Layout 是相对布局,所以通常你不应该直接设置宽度和高度这种固定不变的值,除非你很确定视图的宽度或高度需要保持不变。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

自定义NSLayoutConstraint约束库

自定义NSLayoutConstraint了,妈妈再也不用担心我开发SDK时打包静态库要移除第三方库文件了。

77.代码中添加约束(NSLayoutConstraint)

方式一介绍代码约束是通过NSLayoutConstraint类进行约束的两种方法, 及VisualFormt 的书写格式

iOS-NSLayoutConstraint(代码约束)

随着StoryBoard 和 XIB 的普及,屏幕适配变的很快很直观也很简洁,但是它也是有缺点的。代码适配虽然很复杂,但对于简单视图的约束,还是可以的,各有利弊。 一、StoreBoard 优点:...

NSLayoutConstraint 的系统约束纯代码模式swift

//之前用storyboard拉过约束觉得特别好用,但是并没有改变我纯代码开发的梦想所以简单的写了个例子  //推荐看官方文档详细全面  //一般约束为4个或者以上(label比较特殊最少2个就够...

iOS 10 Auto Layout界面自动布局系列3-使用原生NSLayoutConstraint添加布局约束

本系列的第一篇文章介绍了自动布局的基本原理,第二篇文章通过一个简单的例子演示了如何使用Xcode的Interface Builder(简称IB)以可视化方式添加约束。本篇为该系列的第三篇文章,主要介绍...
  • pucker
  • pucker
  • 2015-04-16 16:05
  • 30774

自动布局:AutoLayout代码实现:NSLayoutConstraint、VFL、Mansony

一、注意事项 1、使用AutoLayout自动布局,全程都不要出现和frame相关的代码了。 2、设置 AutoLayout 约束,之前先禁用AutoResizing ,在代码里只需要针对某一个视图决...

NSLayoutConstraint-代码实现自动布局的函数用法说明

NSLayoutConstraint-代码实现自动布局的函数用法说明 来源:互联网 作者:佚名 时间:2013-10-30 09:28 [NSLayoutConstraintconstra...

iOS开发代码自动布局NSLayoutConstraint

AutoLayout是从iOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下。 在说三种设置方式前,我们先简单的说一下autola...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)