码迷,mamicode.com
首页 > 移动开发 > 详细

iOS原生自动布局NSLayoutConstraint

时间:2019-02-21 00:17:30      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:自动   介绍   等于   padding   nap   nsa   translate   实现   auto   

目前为止,实现自动布局技术选型方面也可以使用xib和storyboard。在开发过程中通常登录、注册等变动可能性较小的视图,我会采用xib开发,其他页面通常会采用Masonry布局。xib和手码各有优势,视情况而定。
 
关于NSLayoutAttributeLeading和NSLayoutAttributeTrailing,前边和后边并不是总是为左边和右边的,有些国家的前边是右边后边是左边所以这样设定是为了国际化考虑。还有视图基准线NSLayoutAttributeBaseline通常是指视图的底部放文字的地方。
 
使用NSLayoutConstraint之前,我们需要确定一点:为了防止constraint和view本身的autoresizing属性冲突,我们需要设置view的属性:
view.translatesAutoresizingMaskIntoConstraints = NO;

一、UIKit框架提供的自动布局的方法一,详细请看参数介绍:

技术图片
/**
 设置约束

 @param view1 指定需要添加约束的视图一
 @param attr1 指定视图一需要约束的属性
 @param relation 指定视图一和视图二添加约束的关系
 @param view2 指定视图一依赖关系的视图二;可为nil
 @param attr2 指定视图一所依赖的视图二的属性,若view2=nil,该属性设置 NSLayoutAttributeNotAnAttribute
 @param multiplier 系数   情况一和二为亲测
                 情况一:设置A视图的高度 = A视图高度 * multiplier + constant;此时才会起作用;
                 情况二:设置A视图和其他视图的关系或 toItem=nil,multiplier设置不等于0即可,若等于0会crash;
 @param c 常量
 @return 返回生成的约束对象
 */
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
技术图片

以上函数设置的约束等价于   view1.att1 =(以等号举栗子,relation可> < ≥≤)view2.attr2 * multiplier + c;

简单小需求:随意在控制器中添加一个红色view:

技术图片
// 设置 redView 的宽 = 100.f * 1.f
    NSLayoutConstraint *redViewWidthConstraint =
    [NSLayoutConstraint constraintWithItem:self.redView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.f
                                  constant:100.f];
    // 设置 redView 的高 = 100.f * 1.f
    NSLayoutConstraint *redViewHeightConstraint =
    [NSLayoutConstraint constraintWithItem:self.redView
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.f
                                  constant:100.f];
    // 设置 redView 的前面(左边) = self.view.leading + 20.f
    NSLayoutConstraint *redViewleadingConstraint =
    [NSLayoutConstraint constraintWithItem:self.redView
                                 attribute:NSLayoutAttributeLeading
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeLeading
                                multiplier:1.f
                                  constant:20.f];
    
    // 设置 redView 的顶部
    NSLayoutConstraint *redViewTopConstraint =
    [NSLayoutConstraint constraintWithItem:self.redView
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:self.view
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.f
                                  constant:30.f];
    [self.view addConstraint:redViewWidthConstraint];
    [self.view addConstraint:redViewHeightConstraint];
    [self.view addConstraint:redViewleadingConstraint];
    [self.view addConstraint:redViewTopConstraint];
技术图片

 

 

小注:
1、关于参数  multiplier 
技术图片
?举个栗子??:
     [NSLayoutConstraint constraintWithItem:aView
     attribute:NSLayoutAttributeHeight
     relatedBy:NSLayoutRelationEqual
     toItem:aView
     attribute:NSLayoutAttributeWidth
     multiplier:2.f
     constant:100.f];
     等价于  aView的高 = aView的宽 * 2.f + 100.f;
技术图片

 

2、?本来想逃懒,下面的写法,经过我实验是错误的

技术图片
     [NSLayoutConstraint constraintWithItem:self.redView
     attribute:NSLayoutAttributeWidth | NSLayoutAttributeHeight
     relatedBy:NSLayoutRelationEqual
     toItem:nil
     attribute:NSLayoutAttributeNotAnAttribute
     multiplier:1.f
     constant:100.f];
技术图片

 

二、UIKit框架提供的自动布局的方法二,VFL语言来实现自动布局:

技术图片
/**
 Description

 @param format VFL语句,举个栗子:@"H:|-[_redView]-padding-|"
 @param opts 枚举参数,默认写0
 @param metrics 字典,key值为VFL语句中的变量 padding,value为指定的值: @{@"padding" : @50}
 @param views VFL语句中使用到的视图
 */

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
技术图片
技术图片
举个栗子:
NSArray *constraints1 =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_redView]-padding-|"
                                            options:0
                                            metrics:@{@"padding" : @50}
                                              views:NSDictionaryOfVariableBindings(_redView)];
    NSArray *constraint2 =
    [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-height-[_redView(height)]"
                                            options:0
                                            metrics:@{@"height" : @20}
                                              views:NSDictionaryOfVariableBindings(_redView)];
    [self.view addConstraints:constraints1];
    [self.view addConstraints:constraint2];
技术图片

 

关于UILabel自动布局,需要注意的是若label多行显示,可通过设置numberOfLines:

技术图片
UILabel *label = [[UILabel alloc] init];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    label.text = @"Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~Label~~";
    label.textColor = [UIColor blackColor];
    label.backgroundColor = [UIColor redColor];
    label.numberOfLines = 0;
    [self.view addSubview:label];
    
    NSArray *labelConstraintsH =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[label]-20-|"
                                            options:0
                                            metrics:nil
                                              views:NSDictionaryOfVariableBindings(label)];
    NSArray *labelConstraintsV =
    [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[label]"
                                            options:0
                                            metrics:nil
                                              views:NSDictionaryOfVariableBindings(label)];
    [self.view addConstraints:labelConstraintsH];
    [self.view addConstraints:labelConstraintsV];
技术图片

 

注意:
     1、VFL语句中具体浮点型不可以使用 56.f 诸如此类,会crash;
     2、VFL语句中的视图,不要使用self.xxx属性,而要使用变量_xxx,会crash
     3、addConstraint之前,必须保证subView已拥有superView
     4、视图的 translatesAutoresizingMaskIntoConstraints 必须设置为NO,
   5、通常使用的是Masonry\SnapKit自动布局的三方库,简单高效。校之frame布局,自动布局更适合业务拓展。 

 

 
 

iOS原生自动布局NSLayoutConstraint

标签:自动   介绍   等于   padding   nap   nsa   translate   实现   auto   

原文地址:https://www.cnblogs.com/chenweb/p/10409758.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!