首页 > 代码库 > 利用代码添加autolayout约束
利用代码添加autolayout约束
1.概述
- 通常我们通过storyboard能够完成的，代码也能够完成，所以这里介绍下代码实现约束的添加，通常我们不这么干（在不使用第三方框架的情况下，使用系统自带的类添加约束特别繁琐），所以这里仅仅简单介绍下代码实现原理
2.实现效果
- 实现效果
- 纯OC代码
- 在storyboard中的一条约束在代码中的体现就是一个约束对象，所以添加在storyboard上添加一条约束，相当于创建了一个约束对象并将该约束对象添加到对应的视图上
- 第一步：创建子控件视图
- 第二步：禁用子控件的autoresizing属性
- 第三步：创建约束对象
- 第四步：添加约束对象
- (void)viewDidLoad { [super viewDidLoad]; // 1.创建一个子视图，添加到父视图上面 UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView];#warning 注意点: 如果通过代码来设置Autolayout约束, 那么必须先禁用Autoresizing // 2.禁用autoresizing // 2.1给需要设置约束的视图禁用autoresizing，禁用父视图autoresizing对子控件无效 //self.view.translatesAutoresizingMaskIntoConstraints = NO;//错误写法 redView.translatesAutoresizingMaskIntoConstraints = NO; // 3.添加约束 // 3.1红色(红色距离顶部和左边以及右边的边距固定为20，高度固定为50) // 3.1.1顶部(基于父控件) /* constraintWithItem:需要设置约束的view attribute:需要设置约束的位置 relatedBy:约束的条件 toItem:约束依赖目标 attribute:依赖目标约束位置 multiplier:配置系数 constant:额外需要添加的长度 */ /* 计算公式:redView.attribute = self.view.attribute * multiplier + constant; 其中:＝符号取决于relatedBy:参数 typedef NS_ENUM(NSInteger, NSLayoutRelation) { NSLayoutRelationLessThanOrEqual = -1, 小于等于 NSLayoutRelationEqual = 0, 等于 NSLayoutRelationGreaterThanOrEqual = 1, 大于等于 }; */ // 3.1.1.1创建约束对象 NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20]; // 3.1.1.2判断约束条件的层级关系，并添加到对应的视图 [self.view addConstraint:redTopCos]; /* attribute:传入的是枚举参数 NSLayoutAttributeLeft = 1, 左边距 NSLayoutAttributeRight, 右边距 NSLayoutAttributeTop, 距离顶部边距 NSLayoutAttributeBottom, 距离底部边距 NSLayoutAttributeLeading, 左对齐 NSLayoutAttributeTrailing, 右对齐 NSLayoutAttributeWidth, 宽度 NSLayoutAttributeHeight, 高度 NSLayoutAttributeCenterX, 中点X NSLayoutAttributeCenterY, 中点Y NSLayoutAttributeBaseline, 文本底线对齐 */ // 3.1.2左边约束(基于父控件) NSLayoutConstraint *redLeftCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20]; // 3.1.2.2判断约束条件的层级关系，并添加到对应的视图 [self.view addConstraint:redLeftCos]; // 3.1.3右边约束(基于父控件) NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20]; // 3.1.3.2判断约束条件的层级关系，并添加到对应的视图 [self.view addConstraint:redRightCos]; // 3.1.4 高度约束(自身) NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:50]; // 3.1.3.2判断约束条件的层级关系，并添加到对应的视图 [redView addConstraint:redHeightCos];}
3.VFL语言实现约束的添加
苹果同时为我们提供了VisualFormat语言快速添加约束（使用起来比OC简便一些）
同样实现上述效果，代码如下：
- (void)viewDidLoad { [super viewDidLoad]; // 1.创建二个子视图，添加到父视图上面 UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView];#warning 注意点: 如果通过代码来设置Autolayout约束, 那么必须先禁用Autoresizing // 2.禁用autoresizing // 2.1给需要设置约束的视图禁用autoresizing，禁用父视图autoresizing对子控件无效 //self.view.translatesAutoresizingMaskIntoConstraints = NO;//错误写法 redView.translatesAutoresizingMaskIntoConstraints = NO; blueView.translatesAutoresizingMaskIntoConstraints = NO; // 3.添加约束 /* VisualFormat: VFL语句 options: 对齐方式等 metrics: VFL语句中使用到的一些变量 views: VFL语句中使用到的一些控件 */ // 3.1红色视图 // 水平方向 NSArray *hCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-20-|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(redView)]; [self.view addConstraints:hCos]; //竖直方向 NSArray *vCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView(==50)]" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(redView)]; [self.view addConstraints:vCos]; // 3.2蓝色视图 // 垂直方向 NSArray *vBlueCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-20-[blueView(==50)]" options:NSLayoutFormatAlignAllRight metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]; [self.view addConstraints:vBlueCos]; // 水平方向 NSLayoutConstraint *hBlueCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0]; [self.view addConstraint:hBlueCos]; /*VFL格式说明 功能 表达式 水平方向 H: 垂直方向 V: Views [view] SuperView | 关系 >=,==,<= 空间,间隙 - 优先级 @value */}NSDictionaryOfVariableBindings(redView,blueView) 也相当于：@{@"redView": redView , @"blueView": blueView}[self.contentView addSubview:self.headerImageViewBackgroundView]; [self.contentView addSubview:self.conversationTitle]; [self.contentView addSubview:self.messageCreatedTimeLabel]; [rightContentView addSubview:self.conversationStatusImageView]; [rightContentView addSubview:self.lastSendMessageStatusView]; [self.contentView addSubview:rightContentView]; [self.contentView addSubview:self.messageTypeLabel]; [self.contentView addSubview:self.messageContentLabel]; self.cellSubViews = NSDictionaryOfVariableBindings(_headerImageViewBackgroundView, _conversationTitle,_messageCreatedTimeLabel, _conversationStatusImageView,_lastSendMessageStatusView,rightContentView,_messageContentLabel,_messageTypeLabel);[self.contentView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-portrait_margin_left-[_headerImageViewBackgroundView(width)]-portrait_margin_right-[_" @"conversationTitle]-5-[_messageCreatedTimeLabel(==40)]-12-" @"|" options:0 metrics:@{ @"portrait_margin_left" :@(portrait_margin_left), @"portrait_margin_right" :@(portrait_margin_right), @"width" : @([RCIM sharedRCIM].globalConversationPortraitSize.width) } views:self.cellSubViews]];
利用代码添加autolayout约束
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。