美文网首页
VFL小笔记

VFL小笔记

作者: Nedoloroso | 来源:发表于2016-06-20 21:28 被阅读27次

    首先可以确定的是Masonry肯定比VFL好用,因为写一份相同效果的代码,Masonry比VFL要少很多代码,如果各位公司没有对第三方有要求的话,Masonry肯定是各位的最佳选择。

    那么好的,如果各位公司也像博主的公司一样对第三方有严格的要求和漫长的审核制度的话,那么VFL就是各位最佳的选择了,理解起来也很通俗易懂。

    那么看下面这份demo

        UIButton *btnBackDefault = [UIButton buttonWithType:UIButtonTypeCustom];
        [btnBackDefault setTitle:@"哈哈" forState:UIControlStateNormal];
        [btnBackDefault setBackgroundColor:[UIColor redColor]];
        btnBackDefault.translatesAutoresizingMaskIntoConstraints = NO;
        
        UIButton *btnConfirm = [UIButton buttonWithType:UIButtonTypeCustom];
        [btnConfirm setTitle:@"呵呵" forState:UIControlStateNormal];
        [btnConfirm setBackgroundColor:[UIColor blueColor]];
        btnConfirm.translatesAutoresizingMaskIntoConstraints = NO;
        
        [self.view addSubview:btnBackDefault];
        [self.view addSubview:btnConfirm];
        
        NSArray *constraintsDefaultV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[btnBackDefault(==40)]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(btnBackDefault)];
        
        NSArray *constraintsConfirmV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[btnConfirm(==40)]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(btnConfirm)];
        
        NSArray *constraintsH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[btnBackDefault]-10-[btnConfirm(btnBackDefault)]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(btnBackDefault, btnConfirm)];
        
        [self.view addConstraints:constraintsDefaultV];
        [self.view addConstraints:constraintsConfirmV];
        [self.view addConstraints:constraintsH];
    

    实际效果如下:


    QQ20160620-0@2x.png

    (是不是特别麻烦!代码炒鸡多!是不是超想念Masonry!)
    首先第一点,千万别忘记将translatesAutoresizingMaskIntoConstraints设置为NO,要不然会报错的O.O

    解释下VFL语句吧,比如这一句@"V:[btnBackDefault(==40)]-10-|",V代表的就是竖直方向,然后btnBackDefault就是你要摆放的控件啦,(==40)可以写也可以不写,看自己需求,写上的意思是控件的高是40px,然后-10-|代表的意思就是控件与底部的间距是10,没错|就代表的手机的边框,-就相当于一个连接符。

    是不是很简单,那么稍稍加一点难度,@"H:|-10-[btnBackDefault]-10-[btnConfirm(btnBackDefault)]-10-|" 这句包含有两个控件,H的意思就是水平方向,btnConfirm(btnBackDefault)的意思就是两个控件水平方向上宽度相等。

    好了同志们,有了这两个诀窍相信大家对其他的情况也能轻而易举的干掉,无非就是代码多一点(TAT教练,我还是想用Masonry啊!!!)

    相关文章

      网友评论

          本文标题:VFL小笔记

          本文链接:https://www.haomeiwen.com/subject/ynxikttx.html