Objectiv-C UIKit基础 NSLayoutConstraint的使用(VFL实现)

写在前面 弄了下个人站...防止内容再次被锁定...所有东西都在这里面 welcome~ 个人博客

利用VFL可视化语言 (简单的抛砖引玉) 构建3个View 橙色和绿色左中右间隔20 上间隔40 高为200 蓝色在橙色内(0,0)处 宽高为橙色的一半 实现效果如下

view.png

由于atutosize和autolayout不兼容 首先构建3个view 将设atutosize为不可用

UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];

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

UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[orangeView addSubview:blueView];

//设置atutosize属性为不可用
self.view.translatesAutoresizingMaskIntoConstraints = NO;
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.translatesAutoresizingMaskIntoConstraints = NO;
  • 设置约束
//设置orangeView,greenView水平方向约束
   NSArray *conH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1]-20-[view2(==view1)]-20-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":orangeView,@"view2":greenView}];
   [self.view addConstraints:conH];
   
   //设置orangeView,greenView垂直方向约束
   NSArray *conV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(200)]" options:0 metrics:nil views:@{@"view1":orangeView}];
   [self.view addConstraints:conV];

   
   
   //设置blueView水平方向约束
   NSArray *conH2 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conH2];
   
   //设置blueView垂直方向约束
   NSArray *conV2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conV2];
   
   //设置宽高约束
   NSLayoutConstraint *conWidth = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:orangeView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
   [orangeView addConstraint:conWidth];
   NSLayoutConstraint *conHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:orangeView attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0];
   [orangeView addConstraint:conHeight];

下面来解释下VFL的使用

使用NSLayoutConstraint类方法

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString> *)metrics views:(NSDictionary<NSString> *)views;
  • 几个参数:

format可视化语言 opts NSLayoutFormatOptions枚举 用来设置对齐 metrics 以字典的形式设置距离变量 比如 "H:|-[dis1]-[view1]-[dis2]-[view2(==view1)]-20-|"这句中的[dis1] [dis2]为视图变量,将字典的view1 view2即为key 对应相应的视图 views 以字典的形式设置视图变量 比如 "H:|-20-[view1]-20-[view2(==view1)]-20-|"这句中的[view1] [view2]为视图变量,将字典的view1 view2即为key 对应相应的视图

约束关系(与父类的关系)用到另一个类方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

几个参数: view1 view2约束对象 attr1 attr2属性包括 上下左右宽高中点等 relation 约束关系包括 相等 大于 小于 multiplier 需要修正的值 c 偏移量

在添加约束时 一定要记得是在父类上添加约束 比如 为 orangeView 和 greenView添加约束需要在其父类self.view上添加约束 blueView的父类是orangeView 所以给blueView添加约束时 在orangeView上添加

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

28090
来自专栏進无尽的文章

动画| 金币抛入红包动画详解

这个动画效果很早就出来了,也是一个比较经典的关键帧动画和组合动画的运用,通过剖析源码,可以发现实际上这个酷炫的动画实现起来很简单。

39550
来自专栏黒之染开发日记

【easeljs】矢量形状 Shape类

一个Shape(形状)允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的Graphics(图形)实例。Graphics实例可以在多个Shape...

14130
来自专栏ShaoYL

iOS---UICollectionView自定义流布局实现瀑布流效果

488100
来自专栏落影的专栏

Metal图像处理——颜色查找表(Color Lookup Table)

一张1024x1024的普通图片,是由1024 * 1024=1048576个像素点组成,每个像素点包括RGBA共32bit,常见的图像处理是对相邻像素点颜色、...

48960
来自专栏陈满iOS

iOS动画专题·UIView二维形变动画与CAAnimation核心动画(transform动画,基础,关键帧,组动画,路径动画,贝塞尔曲线)

总的来说,从涉及类的形式来看,iOS动画有:基于UIView的仿射形变动画,基于CAAnimation及其子类的动画,基于CG的动画。这篇文章着重总结前两种动画...

60210
来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

1.2K20
来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

55250
来自专栏老司机的简书

老司机带你走进Core Animation 之图层的透视、渐变及复制

老司机的想法就是要把CoreAnimation头文件中的类大概都说一遍,毕竟一开始把系列名定成了《老司机带你走进CoreAnimation》(深切的觉得自己给自...

19840
来自专栏ShaoYL

iOS-UI控件之UITableView(二)- 自定义不等高的cell

393110

扫码关注云+社区

领取腾讯云代金券