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

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

1 2 3 4 5 6 7

[NSLayoutConstraint constraintWithItem:(id)item                               attribute:(NSLayoutAttribute)attribute                               relatedBy:(NSLayoutRelation)relation                                  toItem:(id)otherItem                               attribute:(NSLayoutAttribute)otherAttribute                              multiplier:(CGFloat)multiplier                                constant:(CGFloat)constant]

参数说明:

第一个参数:指定约束左边的视图view1

第二个参数:指定view1的属性attr1，具体属性见文末。

第三个参数:指定左右两边的视图的关系relation，具体关系见文末。

第四个参数:指定约束右边的视图view2

第五个参数:指定view2的属性attr2，具体属性见文末。

第六个参数:指定一个与view2属性相乘的乘数multiplier

第七个参数:指定一个与view2属性相加的浮点数constant

这个函数的对照公式为:

view1.attr1 <relation> view2.attr2 * multiplier + constant

注意:

1.如果你想设置的约束里不需要第二个view，要将第四个参数设为nil，第五个参数设为NSLayoutAttributeNotAnAttribute

举例:

1 2 3 4 5 6 7

[NSLayoutConstraint constraintWithItem:view1                               attribute:NSLayoutAttributeLeft                               relatedBy:NSLayoutRelationEqual                                  toItem:view2                               attribute:NSLayoutAttributeRight                              multiplier:1                                constant:10]

翻译过来就是:view1的左侧，在，view2的右侧，再多10个点，的地方。

附视图的属性和关系的值:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

NSLayoutAttributeLeft/NSLayoutAttributeRight 和NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右，而leading/trailing在某些从右至左习惯的地区会变成，leading是右边，trailing是左边。

屏幕兼容的问题

为了让我们的应用在不容尺寸的屏幕下都能 “正常”的表示，我们尽量不要把数据写死。

大多数可视元素都是一个矩形区域，当然这个矩形区域有坐标的，我们有了这个区域坐标就能确定可视元素的现实位置了。

但是iphone5 和以前的屏幕不一样了，在以前的设备中，我们可以添加一个 xx.@2x.png 来适应retina屏幕，但是iphoen5咋办呢？

ios 引入了 Auto Layout 的东东，这个要和UIViewAutoresizing 区分下。

看下面代码

- (void)viewDidLoad
{
    [super viewDidLoad];
        
    UIView *aView = [[UIView alloc] init];
    aView.backgroundColor = [UIColor redColor];

//为了不和autosizing冲突，我们设置No

    [aView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.view addSubview:aView];
    
    UIView *bView = [[UIView alloc] init];
    bView.backgroundColor = [UIColor blueColor];
    [bView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.view addSubview:bView];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(aView, bView);

//NSDictionaryOfVariableBindings  宏  其实 NSDictionaryOfVariableBindings(v1, v2, v3) 等效于 [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil];    
    [self.view addConstraints:
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(>=50)-[aView(100)]"
                                             options:0
                                             metrics:nil
                                               views:views]];
    
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[aView(50)]"
                                             options:0
                                             metrics:nil
                                               views:views]];
   
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView(==aView)]"
                                             options:0
                                             metrics:nil
                                               views:views]];
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:[bView(==aView)]"
                                             options:0
                                             metrics:nil
                                               views:views]];
    
    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:bView
                                  attribute:NSLayoutAttributeLeft
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:aView
                                  attribute:NSLayoutAttributeRight
                                 multiplier:1
                                   constant:10]];
    //添加一个限制  等效于 bView.frame.origin.x  = (aView.frame.origin.x +aView.frame.size.width)  * 1  + 10,好像是这样的！个人觉得！

  它是一种依赖关系，bView依赖aView，这样就算aView变了，bView也会跟着变换。
    [self.view addConstraint:
     [NSLayoutConstraint constraintWithItem:bView
                                  attribute:NSLayoutAttributeTop
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:aView
                                  attribute:NSLayoutAttributeTop
                                 multiplier:1
                                   constant:0]];
    
    [aView release];
    [bView release];
}

constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:

Create a constraint of the form "view1.attr1 <relation> view2.attr2 * multiplier + constant".

属性

最后的结果就是 “view1.attr1  <       >=    或者 ==   或者    <=       >  view2.attr2 * multiplier + constant”

[NSLayoutConstraint constraintsWithVisualFormat:<visual format string>options:<options>metrics:<metrics>views: <views dictionary> ]; 复制代码 constraintsWithVisualFormat:参数为NSString型，指定Contsraint的属性，是垂直方向的限定还是水平方向的限定，参数定义一般如下： V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离 若是要定义水平方向，则将V：改成H：即可 在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定； options：字典类型的值；这里的值一般在系统定义的一个enum里面选取 metrics：nil；一般为nil ，参数类型为NSDictionary，从外部传入 //衡量标准 views：就是上面所加入到NSDictionary中的绑定的View 在这里要注意的是 AddConstraints  和 AddConstraint 之间的区别，一个添加的参数是NSArray，一个是NSLayoutConstraint 使用规则 |: 表示父视图   -:表示距离   V:  :表示垂直   H:  :表示水平 >= :表示视图间距、宽度和高度必须大于或等于某个值     <= :表示视图间距、宽度和高度必须小宇或等于某个值     == :表示视图间距、宽度或者高度必须等于某个值 @  :>=、<=、==  限制   最大为  1000 1.|-[view]-|:  视图处在父视图的左右边缘内 2.|-[view]  :   视图处在父视图的左边缘 3.|[view]   :   视图和父视图左边对齐 4.-[view]-  :  设置视图的宽度高度 5.|-30.0-[view]-30.0-|:  表示离父视图 左右间距  30 6.[view(200.0)] : 表示视图宽度为 200.0 7.|-[view(view1)]-[view1]-| :表示视图宽度一样，并且在父视图左右边缘内 8. V:|-[view(50.0)] : 视图高度为  50 9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离 为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。 10:  [wideView(>=60@700)]  :视图的宽度为至少为60 不能超过  700 11: 如果没有声明方向默认为  水平  V: git@git.oschina.net:yangjw-kai7/autolayoutanduiviewtonib.git