0
点赞
收藏
分享

微信扫一扫

Autolayout代码编写基本使用

鲤鱼打个滚 2023-02-25 阅读 103
iOSObjective-CAutolayout边距HarmonyOS后端开发


第一种

Autolayout代码编写基本使用_边距


代码如下：

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];

第二种

Autolayout代码编写基本使用_Autolayout_02

UIView *redView = [[UIView alloc] init];
 redView.translatesAutoresizingMaskIntoConstraints = NO;
 redView.backgroundColor = UIColor.redColor;
 [self.view addSubview:redView];
 
 UIView *blueView = [[UIView alloc] init];
 blueView.translatesAutoresizingMaskIntoConstraints = NO;
 blueView.backgroundColor = UIColor.blueColor;
 [self.view addSubview:blueView];
 
//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//设定右边边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//创建blueView的约束
//设置redView和blueView高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的间距为20
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0]];

//让blueView和redView的右对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0]];

//blueView的宽度是redView宽度的一半
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0]];

第三种

Autolayout代码编写基本使用_Objective-C_03

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

UIView *blueView = [[UIView alloc] init];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.backgroundColor = UIColor.blueColor;
[self.view addSubview:blueView];

//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//创建blueView的约束
//设置redView和blueView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置blueView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-[blueView(==redView)]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[blueView(==redView)]" options:0 metrics:metrics views:views]];

第四种

Autolayout代码编写基本使用_Autolayout_04

UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
redView.backgroundColor = UIColor.redColor;
[self.view addSubview:redView];

UIView *blueView = [[UIView alloc] init];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.backgroundColor = UIColor.blueColor;
[self.view addSubview:blueView];

UIView *greenView = [[UIView alloc] init];
greenView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.backgroundColor = UIColor.greenColor;
[self.view addSubview:greenView];

//创建redView的约束
//设置高度
[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

//设定顶边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

//创建blueView的约束
//设置redView和blueView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和blueView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置blueView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];


//创建greenView的约束
//设置redView和greenView的高度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]];

//设置redView和greenView的宽度相等
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

//设置greenView的顶部与redView对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

//设置右边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

//设置左边距
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:greenView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-20.0]];

换做使用VFL的话，代码如下：

NSDictionary *views = NSDictionaryOfVariableBindings(redView, blueView, greenView);
CGFloat height = 40;
CGFloat margin = 20;
NSDictionary *metrics = @{ @"margin":@(margin), @"height":@(height) };

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[redView]-(margin)-[blueView(==redView)]-(margin)-[greenView(==redView)]-(margin)-|" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[redView(==height)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[blueView(==redView)]" options:0 metrics:metrics views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[greenView(==redView)]" options:0 metrics:metrics views:views]];

​


举报

相关推荐

AutoLayout进阶

优先级Linux系统/运维

AutoLayout自动布局

IOS 新技术约束条件优先级iosiOS移动开发

前端使用vue编写登录代码

用户名路由配置iosVue.js前端开发指尖人生

使用java的API编写代码

使用java的API编写代码枚举类System字段HarmonyOS后端开发

使用AutoLayout实现自动计算UITableView的cell高度

iOSiOS开发资料收集区ios实用开发技巧牛叉的demo恩美第二个APP项目征服iOS坚持写iOS学习

使用Emmet快速编写代码(持续更新)

vscode前端htmlcss

EasyUi的使用与代码编写(一)

EasyUi的使用与代码编写(一)jquerycss加载Python后端开发

【iOS开发】Mansory自动布局(autolayout)使用教程

iosmansoryautolayoutiOS基线Python后端开发

Masonry介绍与使用实践(快速上手Autolayout)

iosautolayoutmasonryiphoneci系统/运维

使用pycharm or vscode来编写python代码？

ci任务栏右键虚拟化云计算
0 条评论