iOS--VFL--autolayout--自动布局

------------ VFL API介绍 ------------

 1.NSLayoutConstraint API
 
 + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts
 metrics:(NSDictionary *)metrics
 views:(NSDictionary *)views;
 参数介绍:
 
 format:此参数为你的vfl语句,比如:@"H:|-[button]-|"
 
 opts:枚举参数,默认写0,具体跟据你所实现的需求去选择你想要的枚举
 
 metrics:这里是一个字典,当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢?就是在这个字典里面找到key对就的值,如果没有找到这个值,app就会crash.
 
 views:顾名思义,这是传所有你在vfl中使用到的view,那在上面这句例子中的应该怎么传呢?结果是这样的:NSDictionaryOfVariableBindings(button).如果你使用到了多个view,就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应,缺一不可.注意这一点,否则会crash
 
 2.UIView API
 
 - (void)addConstraints:(NSArray *)constraints;
 在上面1中返回值类型是NSArray,而现在这个方法的参数也刚好是一个NSArray类型。那么直接把上一个方法的返回值当作这个方法的参数就可以了。如果你有多个VFL,你也可以利用可变数组( NSMutableArray)把这多个VFL返回的数据拼在一起,然后再调用addConstraints:方法。

1:单控件的使用

///第一个aButton
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setTitle:@"点击一下" forState:UIControlStateNormal];
aButton.backgroundColor = [UIColor blackColor];

///PS:值得注意的是,在用代码创建的UIView时,一定要加上下面这句代码,如果没有上面这一行,你的约束将不生效,控制台会输出一连串的错误.
aButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:aButton];

/**
这里的意思是:aButton在水平方向上距离它的superView,左右各20px,比如在这里他的大小就是 屏幕宽-20*2=280.在@"H:|-[aButton]-|"这个语句中,其中"H:"是表示这是水平方向上的约束,"|"是表示superView,"-"表示一个间隔空间,这个间隔如果是如superView之间的,那么就是20px,如果是两个同级别的view,比如@"[aButton]-[bButton]",那么这里表示的是8px.
上面说的都是默认值,如果不想要默认,想紧贴着边,可以这样写:@"H:|-(0)-[aButton]-(0)-|" ;这样就是紧贴着了。
*/

NSArray *contraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[aButton]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton)];

/**
跟上面有点不同,@"V:|-20-[button(==30)]",其中"V:"中代表这是垂直方向上的约束,"|-20-"这里的意思就是距离头部为20px,相当于y坐标为20。后面的"[aButton(==30)]",是指定这个aButton的高度为30px.y坐标固定了,高度固定了,那这个view的约束就完成了。如果你有需要,你的高度值(或者其他同类型的)可以使用>=,==,<=来表示,甚至你可以组合来用,像上面的30,你可以指定一个区别,比如:(>=30,<=40),这同样也是可以的。如果你想表达他的优先级别,可以使用@"V:|-20-[aButton(==30@1000)]",这个@1000,就是他的级别了。你可以适配XIB或者SB对它的优先级做更多的处理.
*/

NSArray *contraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[aButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton)];

[self.view addConstraints:contraints1];
[self.view addConstraints:contraints2];

2:多控件之间关联使用

///第二个bButton
UIButton *bButton = [UIButton buttonWithType:UIButtonTypeCustom];
[bButton setTitle:@"我是第二个bButton" forState:UIControlStateNormal];
bButton.backgroundColor = [UIColor blueColor];

bButton.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:bButton];

///添加H水平约束

NSArray *contraints3 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[bButton]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bButton)];

/**
VFL语句为:@"V:[aButton]-[bButton(==30)]",这里用到了两个view在VFL语句里面。刚才我们也说到,"-"在同一级别的View上使用的时候表示的间距为8个像素点,整一句的意思就是bButton的y坐标离aButton有8个像素点.在不使用auto layout的时候,可以这样表达CGRectGetMaxY(aButton.frame)+8.
当然,如果想距离50像素可以这样写:@"V:[aButton]-50-[bButton(==30)]";

添加V垂直约束 (最后面字典views后的参数跟 format 中出现的要一一对应,缺一不可.否则会报aButton is not a key in the views dictionary)比如 VFL 出现了两个button,那么后面也要有这两个button
*/

NSArray *contraints4 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

[self.view addConstraints:contraints3];
[self.view addConstraints:contraints4];

///注释了上面的 添加contraints4 , 再改一下上面这一句VFL

NSArray *contrainst5 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(==height)]" options:0 metrics:@{@"height":@30} views:NSDictionaryOfVariableBindings(aButton,bButton)];

[self.view addConstraints:contrainst5];

//再次运行,你会发现,效果是一样的。这样你就知道怎么动态去给view加上高度或者宽度,或是其他间距了吧?

/**
那么,如何做到两个View,或是多个View之间等高,或者等宽呢?能用VFL可以做到吗?除了通过上面的直接赋值宽高的数值外,VFL还提供了另外一种写法用于等宽等高上。

接着上面,我们改一下代码
*/

NSArray *contrainst6 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[bButton(aButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

NSArray *contrainst7 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[aButton]-[bButton(aButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aButton,bButton)];

//通过@"H:|-[button1(button)]",@"V:[button]-[button1(button)]",这两句就可以轻松实现等宽等高了!

[self.view addConstraints:contrainst6];
[self.view addConstraints:contrainst7];

pragma 3:最后对格式的字符串作一个总结介绍

/**
 
 功能        表达式
 
 水平方向          H:  Horizontal
 
 垂直方向          V:  Vertical
 
 Views         [view]
 
 SuperView      |
 
 关系         >=,==,<=
 
 空间,间隙       -
 
 优先级        @value
 
 */

///例子

UIView *aView = [[UIView alloc]init];
aView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:aView];

//没有这句的话,而又加了下面两句 addConstrainsts 则 aView 都不会显示在self.view上,即使上一句写了 addSubview。
aView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-40-[aView(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[aView(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView,bButton)]];


UIView *bView = [[UIView alloc]init];
bView.backgroundColor = [UIColor purpleColor];
[self.view addSubview:bView];

bView.translatesAutoresizingMaskIntoConstraints = NO;

///实现与aView等大小
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[aView]-50-[bView(aView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(aView,bView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[bView(aView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bButton,bView,aView)]]; //注意后面字典中出现的views一定要与FLV里出现的一致,不能少,多了可以,如写上aButton也没关系。


///这样就可以根据(如果有一个装文字的label,算出其rect)大小设置view的大小了
CGFloat fload = 100;
NSDictionary *dic = @{@"width":@(fload),@"height":@50};

UIView *cView = [[UIView alloc]init];
cView.backgroundColor = [UIColor grayColor];
[self.view addSubview:cView];

cView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView]-50-[cView(==width)]" options:0 metrics:dic views:NSDictionaryOfVariableBindings(bView,cView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bButton]-30-[cView(==height)]" options:0 metrics:dic views:NSDictionaryOfVariableBindings(bButton,cView)]];



///根据文字大小来决定view的长度
UILabel *label1 = [[UILabel alloc]init];
label1.backgroundColor = [UIColor yellowColor];
label1.text = @"abcdefghijklmnddsafksajfkjwiojfaj";
label1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:label1];

///计算文字长度
float width = [label1 textRectForBounds:CGRectMake(0, 0, CGFLOAT_MAX, 30) limitedToNumberOfLines:1].size.width;
NSDictionary *dic2 = @{@"width2":@(width)};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-40-[label1(==width2)]" options:0 metrics:dic2 views:NSDictionaryOfVariableBindings(label1)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[cView]-50-[label1(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(cView,label1)]];

//另一种计算文字长度的方法
//CGRect rect = [label.text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, high) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:label.font.pointSize]} context:nil];
//float width = rect.size.width;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容