自动布局NSLayoutConstraint

自动布局方法1

/**
 创建约束
 
 @param view1 被约束视图view1
 @param attr1 被约束视图的布局属性
 @param relation 关系属性
 @param view2 参照视图view2
 @param attr2 参照视图view2的布局属性
 @param multiplier 倍数
 @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.attr1 = view2.attr2 * multiplier + constant

NSLayoutAttribute(布局属性)

NSLayoutAttribute的类型 含义
NSLayoutAttributeLeft 视图的左边
NSLayoutAttributeRight 视图的右边
NSLayoutAttributeTop 视图的上边
NSLayoutAttributeBottom 视图的下边
NSLayoutAttributeLeading 视图的前边
NSLayoutAttributeTrailing 视图的后边
NSLayoutAttributeWidth 视图的宽度
NSLayoutAttributeHeight 视图的高度
NSLayoutAttributeCenterX 视图的中点的X值
NSLayoutAttributeCenterY 视图中点的Y值
NSLayoutAttributeBaseline 视图的基准线
NSLayoutAttributeNotAnAttribute 无属性

NSLayoutRelation(关系属性)

NSLayoutRelation的类型 含义
NSLayoutRelationLessThanOrEqual 视图关系小于或等于
NSLayoutRelationEqual 视图关系等于
NSLayoutRelationGreaterThanOrEqual 视图关系大于或等于

代码提示

<#被约束视图#>.translatesAutoresizingMaskIntoConstraints = NO;
    [<#view的父视图#> addConstraint:[NSLayoutConstraint constraintWithItem:<#被约束视图#> attribute:(NSLayoutAttribute<#被约束视图的布局属性#>) relatedBy:(NSLayoutRelation<#布局属性的布局关系#>) toItem:<#参照视图#> attribute:NSLayoutAttribute<#参照视图的布局属性#> multiplier:<#倍数#> constant:<#常数#>]];

代码示例

- (void)codeLayoutConstraint {
   
   //创建背景图
   UIView *backgroundView = [[UIView alloc] init];
   backgroundView.backgroundColor = [UIColor yellowColor];
   [self.view addSubview:backgroundView];
   backgroundView.translatesAutoresizingMaskIntoConstraints = NO;
   
   //和父视图等宽
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeWidth) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
   
   //二分之一高
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeHeight) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0]];
   
   //垂直对齐
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeCenterX) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
   
   //水平对齐
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeCenterY) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
   
   
   
   //创建橙色视图
   UIView *orangeView = [[UIView alloc] init];
   orangeView.backgroundColor = [UIColor orangeColor];
   [backgroundView addSubview:orangeView];
   orangeView.translatesAutoresizingMaskIntoConstraints = NO;

   //上边距离父视图上边20
   [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeTop) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTop multiplier:1 constant:20]];
   
   //下边距离父视图下边减20
   [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeBottom) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeBottom multiplier:1 constant:-20]];
   
   if (/* DISABLES CODE */ (YES)) {//if和else效果一样
       //前边距离父视图前边20
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeLeading) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];
       
       //后边距离父视图后边减100
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeTrailing) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTrailing multiplier:1 constant:-100]];
   } else {
       //左边距离父视图前边20
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeLeft) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeLeft multiplier:1 constant:20]];
       //右边距离父视图后边减100
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeRight) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeRight multiplier:1 constant:-100]];
   }
   
   
   
   
   
   //创建红色视图
   UIView *redView = [[UIView alloc] init];
   redView.backgroundColor = [UIColor redColor];
   [backgroundView addSubview:redView];
   redView.translatesAutoresizingMaskIntoConstraints = NO;
   
   //上边距离父视图上边20
   [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeTop) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTop multiplier:1 constant:20]];
   
   //高度44
   [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:44]];
   
   //自身宽高比1:1
   [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeHeight) relatedBy:(NSLayoutRelationEqual) toItem:redView attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
   
   if (/* DISABLES CODE */ (NO)) {//if和else效果一样
       //左边距离橙色视图右边20
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeLeft) relatedBy:(NSLayoutRelationEqual) toItem:orangeView attribute:NSLayoutAttributeRight multiplier:1 constant:20]];
   } else {
       //前边距离橙色视图后边20
       [backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeLeading) relatedBy:(NSLayoutRelationEqual) toItem:orangeView attribute:NSLayoutAttributeTrailing multiplier:1 constant:20]];
   }
}

自动布局方法2(了解即可)

     @param format 使用VFL格式化的字符串,可以参见官方的帮助文档;
     @param opts 指定VFL中所有对象的布局属性和方向。举例:有2个视图使用VFL进行布局,可以使用NSLayoutFormatAlignAllLeft,就让两个视图左对齐;
     @param metrics 度量或者指标的字典,字典里面有相关的键值对来控制相关的度量指标,通过key获取;
     @param views 指定约束的视图:一个或多个。
    + (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format
                                                                    options:(NSLayoutFormatOptions)opts
                                                                    metrics:(nullable NSDictionary<NSString *,id> *)metrics
                                                                      views:(NSDictionary<NSString *, id> *)views;

VFL字符串说明:

VFL字符串说明.png

代码示例

- (void)codeLayoutConstraint2 {
    
    UIView *yellowView = [[UIView alloc] init];
    yellowView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellowView];
    yellowView.translatesAutoresizingMaskIntoConstraints = NO;
    
    UIView *orangeView = [[UIView alloc] init];
    orangeView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:orangeView];
    orangeView.translatesAutoresizingMaskIntoConstraints = NO;
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    
    //创建VFL约束字符串
    
    //水平顺序:父视图,space个距离,黄色宽100,5个距离,橙色视图,space1个距离,父视图
    NSString *hVFL = @"H:|-space-[yellowView(100)]-5-[orangeView]-space1-|";
    
    //水平顺序:父视图,space个距离,红色视图宽和橙色视图相等
    NSString *hVFL1 = @"H:|-space-[redView(==orangeView)]";
    
    //垂直顺序:父视图,100个距离,橙色视图高100
    NSString *vVFL = @"V:|-100-[orangeView(==100)]";
    
    //垂直顺序:父视图,100个距离,黄色视图高100,5个距离,红色视图和橙色视图高相等
    NSString *vVFL1 = @"V:|-100-[yellowView(==100)]-5-[redView(==orangeView)]";
    
    
    //度量值
    NSDictionary *metircs = @{@"space":@15,@"space1":@30};
    //views
    NSDictionary *views = NSDictionaryOfVariableBindings(yellowView,orangeView,redView);
    
    //创建约束
    NSArray *hconstraint = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
    
    NSArray *hconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL1 options:NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllTop metrics:metircs views:views];
    
    NSArray *vconstraint = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
    
    NSArray *vconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL1 options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
    
    //添加约束
    [self.view addConstraints:hconstraint];
    
    [self.view addConstraints:hconstraint1];
    
    [self.view addConstraints:vconstraint];
    
    [self.view addConstraints:vconstraint1];
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容