首页 > 其他分享 >Autolayout代码编写基本使用

Autolayout代码编写基本使用

时间：2023-02-25 14:01:58浏览次数：35  
标签：redView NSLayoutConstraint attribute 代码 blueView Autolayout 编写 self view


第一种

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


代码如下：

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代码编写基本使用_iOS_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代码编写基本使用_边距_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代码编写基本使用_边距_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]];

​


标签：redView,NSLayoutConstraint,attribute,代码,blueView,Autolayout,编写,self,view
From： https://blog.51cto.com/u_14062833/6085438

相关文章

  • Github首次上传代码测试
    1.首先到你要上传代码的文件夹下；2.点击gitbashhere，弹出git界面；3.要注意的是，第一次上传代码时，可能会出现为创建基础分支“branch”，所以要上传一个单独的测试文档；git......
  • python2代码转python3
    安装python337的参考：D:\Python3.5\Tools\scripts找到2to3.py文件执行命令转换单个文件或者目录D:\dev\python37\Tools\scripts>python2to3.py-wD:\dev\python37\To......
  • LQB04 定时器代码使用01，定时闪烁灯和定时框架。
    1、STC-ISP软件定时函数的生成，定时案例库的学习；2、定时器0，闪烁LED1；定时500ms，间隔定时器1，闪烁LED2，定时800ms，间隔。3、快速搭建框架。这里只讲解直接的使用，不讲解内部细节......
  • LQB04 蜂鸣器和继电器的操作。和代码
    硬件图编程实现图中，用Y5C控制ULN2003芯片。所以要选通Y5C;ULN2003芯片是个反相放大，IN口是1，OUT口出来是0；IN口是0，出来是1；蜂鸣器和继电器，都是0点亮，发声；那么对应的ULN2003......
  • vue.js代码030
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script><st......
  • vus.js代码029
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码028
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vus.js代码027
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码026
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......
  • vue.js代码022
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>事件绑定</title><scripttype="text/javascript"src="../js/vue.js"></script></head>......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99