简单使用VFL添加约束布局

原创 2015年07月06日 17:53:50

学习笔记   

  

由于好奇今天我就捣鼓了一下午,感觉VFL挺直观的。废话不多说了,贴代码。

- (void)viewDidLoad {

    [superviewDidLoad];

    

    [selfsetupViews];

    

   int index = [self.numberintValue];

   switch (index) {

       case 0:{

            [self.viewaddSubview:cyanView];

            [self.viewaddSubview:redView];

            [self.viewaddSubview:orangeView];

            [selfexample_1];

        }break;

       case 1:{

            [self.viewaddSubview:cyanView];

            [cyanViewaddSubview:redView];

            [redViewaddSubview:orangeView];

            [redViewaddSubview:view1];

            [redViewaddSubview:button];

            [selfexample_2];

        }break;

       case 2:

            [self.viewaddSubview:cyanView];

            [self.viewaddSubview:redView];

            [self.viewaddSubview:orangeView];

            [self.viewaddSubview:button];

            [self.viewaddSubview:view1];

            [selfexample_3];

           break;

       case 3:

            [self.viewaddSubview:cyanView];

            [self.viewaddSubview:redView];

            [self.viewaddSubview:orangeView];

            [self.viewaddSubview:button];

            [self.viewaddSubview:view1];

            [self.viewaddSubview:view2];

            [selfexample_4];

           break;

            

       default:

           break;

    }

    

}


- (void)setupViews {

   cyanView = [[UIViewalloc] init];

    [cyanViewsetTranslatesAutoresizingMaskIntoConstraints:NO];

    cyanView.backgroundColor = [UIColorcolorWithRed:168 /255.0f green:217 /255.0f blue:1alpha:1];

    

   redView = [[UIViewalloc] init];

    [redViewsetTranslatesAutoresizingMaskIntoConstraints:NO];

    redView.backgroundColor = [UIColorcolorWithRed:1green:189 /255.0f blue:197 /255.0f alpha:1];

    

   orangeView = [[UIViewalloc] init];

    orangeView.translatesAutoresizingMaskIntoConstraints =NO;

    orangeView.backgroundColor = [UIColorcolorWithRed:1green:232 /255.0f blue:197 /255.0f alpha:1];


    button = [UIButtonbuttonWithType:UIButtonTypeCustom];

    [buttonsetTitle:@"back"forState:UIControlStateNormal];

    button.translatesAutoresizingMaskIntoConstraints =NO;

   button.backgroundColor = [UIColorcolorWithRed:178 /255.0f green:243 /255.0f blue:249 /255.0f alpha:1];

    [buttonaddTarget:selfaction:@selector(btnAction)forControlEvents:UIControlEventTouchUpInside];

    

   view1 = [[UIViewalloc] init];

    view1.translatesAutoresizingMaskIntoConstraints =NO;

    view1.backgroundColor = [UIColorcolorWithRed:203 /255.0f green:1blue:173 /255.0f alpha:1];

    

   view2 = [[UIViewalloc] init];

    view2.translatesAutoresizingMaskIntoConstraints =NO;

   view2.backgroundColor = [UIColorcolorWithRed:168 /255.0f green:122 /255.0f blue:173 /255.0f alpha:1];

    

    

    //通过宏映射成[NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", nil];

    dic =NSDictionaryOfVariableBindings(cyanView,redView,orangeView,view1,view2,button);

    

}


- (void)example_1 {

    // redView在父视图的上边缘,距离15

    [selfsuperView:self.view :@"V:|-15-[redView]" :0];

    // redView在父视图的左边缘,距离15,redView的右侧cyanView相距15cyanView在父视图右边缘,距离15。一样的top约束

    [selfsuperView:self.view :@"H:|-15-[redView]-15-[cyanView]-15-|" :NSLayoutFormatAlignAllTop];

    // cyanView的高度等于redView的高度

    [selfsuperView:self.view :@"V:[cyanView(==redView)]" :0];

    // cyanView的宽度等于redView的宽度

    [selfsuperView:self.view :@"H:[cyanView(==redView)]" :0];

    // redVieworange垂直距离为15

    [selfsuperView:self.view :@"V:[redView]-15-[orangeView]" :0];

    // orangeView处在父视图的左右边缘内距离15

    [selfsuperView:self.view :@"H:|-15-[orangeView]-15-|" :0];

    // orangeView下边和父视图的距离为15

    [selfsuperView:self.view :@"V:[orangeView]-15-|" :0];

    // orangeView宽度等于redView的宽度

    [selfsuperView:self.view :@"V:[orangeView(==redView)]" :0];

}


- (void)example_2 {

    [selfsuperView:self.view :@"H:|-20-[cyanView]-20-|" :0];

    [selfsuperView:self.view :@"V:|-20-[cyanView]-20-|" :0];

    [selfsuperView:cyanView  :@"H:|-20-[redView]-20-|" :0];

    [selfsuperView:cyanView  :@"V:|-20-[redView]-20-|" :0];

    [selfsuperView:redView   :@"H:|-20-[orangeView]-20-|" :0];

    [selfsuperView:redView   :@"V:|-20-[orangeView]" :0];

    [selfsuperView:redView   :@"H:[button(==orangeView)]" :0];

    [selfsuperView:redView   :@"V:[button(==orangeView)]" :0];

    [selfsuperView:redView   :@"H:[view1(orangeView)]" :0];

    [selfsuperView:redView   :@"V:[view1(orangeView)]" :0];

    [selfsuperView:redView   :@"V:[view1]-20-|" :0];

    // orangeViewbuttonView1之间间隔为20并垂直齐平

    [selfsuperView:redView   :@"V:[orangeView]-20-[button]-20-[view1]" :NSLayoutFormatAlignAllCenterX];

}


- (void)example_3 {

    [selfsuperView:self.view :@"H:|-20-[cyanView]-20-|" :0];

    [selfsuperView:self.view :@"H:[redView(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[redView(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[button(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[button(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[orangeView(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[orangeView(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[view1(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[view1(cyanView)]" :0];

    // cyanView和父视图左边缘的距离为20,其他之间的间隔为15并垂直齐平

    [selfsuperView:self.view :@"V:|-20-[cyanView]-15-[redView]-15-[button]-15-[orangeView]-15-[view1]-15-|" :NSLayoutFormatAlignAllCenterX];

}


- (void)example_4 {

    // cyanView和父视图左边缘的距离为20,与redView的间距为15redView和父视图右边缘的距离为20并水平齐平

    [selfsuperView:self.view :@"H:|-20-[cyanView]-15-[redView]-20-|" :NSLayoutFormatAlignAllCenterY];

    [selfsuperView:self.view :@"V:|-20-[cyanView]-15-[button]-15-[view1]-20-|" :NSLayoutFormatAlignAllCenterX];

    [selfsuperView:self.view :@"V:|-20-[redView]-15-[orangeView]-15-[view2]-20-|" :NSLayoutFormatAlignAllCenterX];

    [selfsuperView:self.view :@"H:[redView(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[redView(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[button(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[button(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[orangeView(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[orangeView(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[view1(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[view1(cyanView)]" :0];

    [selfsuperView:self.view :@"H:[view2(cyanView)]" :0];

    [selfsuperView:self.view :@"V:[view2(cyanView)]" :0];

}


- (void)superView :(UIView *)superView :(NSString *)format :(NSLayoutFormatOptions)options {

    [superView addConstraints:

     [NSLayoutConstraintconstraintsWithVisualFormat:format

                                            options:options

                                            metrics:nil

                                              views:dic]];

}


LCY_VFLAutoLayout 文件下载

好记性,不如烂笔头。 


版权声明:本文为博主原创文章,未经博主允许不得转载。

代码加约束VFL语法的详细使用介绍(代替Autolayout进行布局,比Autolayout更简单明了,生动直观)

Autoresizing已经满足不了我们加约束的需求,而Autolayout功能强大,应用比较普遍,但有时候需要用代码来加约束,这时候用Autolayout就比较麻烦了,代码繁琐不说,代码量也是大大滴...
  • zlj_jeck
  • zlj_jeck
  • 2016年05月20日 10:43
  • 1113

iOS 纯代码VFL动态布局

其实已经有很多介绍VFL的文章,但在这里我也想记录下自己的理解,给需要的朋友一点帮助,如有错误,欢迎指出。 与VFL很重要的两个很重要的方法是: 1、 /* format: 是VFL字符串。 opts...
  • u013762988
  • u013762988
  • 2015年08月12日 14:36
  • 642

IOS Auto Layout代码实现自动布局--VFL(Visual format language)

Auto Layout是在WWDC2012上被引入到iOS中的,从iOS6.0以后就开始支持,但是大多数的开发者还是习惯使用传统的UI布局方式,虽然有一大部分开发者早已使用了Auto Layout,这...
  • zhang_Red
  • zhang_Red
  • 2015年05月05日 14:58
  • 6416

OC和Swift纯代码进行Autolayout布局

OC中纯代码进行Autolayout布局    /*      利用 NSLayoutConstraint 类创建具体的约束对象;      添加约束对象到相应的 view 上,代码有这两种...
  • iOSbird
  • iOSbird
  • 2017年09月21日 16:24
  • 542

iOS界面布局之三——纯代码的autoLayout及布局动画 iOS8及VFL语言

http://my.oschina.net/u/2340880/blog/524089 目录[-] iOS界面布局之三——纯代码的autoLayout及布局动画 一、引言 二、了解一个类 ...
  • jeffasd
  • jeffasd
  • 2015年12月29日 18:05
  • 644

ios开发autolayout之VFL语言使用总结

ios开发autolayout之 VFL language 1.about VFL language 示例: H:[cancelButton(72)]-12-[acceptButton(50)]...
  • sunnyboy9
  • sunnyboy9
  • 2016年04月12日 13:33
  • 842

iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutConstraint API...
  • hopedark
  • hopedark
  • 2014年12月10日 11:39
  • 6665

使用系统自带方法代码,VFL, Masonry实现Autolayout

storyboard的设置约束方式过于繁琐,只有亲身体会,下面隆重介绍三种方式实现AutoLayout。使用代码实现Autolayout的方法1 创建约束 +(id)constraintWithIte...
  • breaking1800
  • breaking1800
  • 2015年06月05日 22:41
  • 399

使用Auto Layout中的VFL(Visual format language)--Swift实现

class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa...
  • huxiaoqiao163
  • huxiaoqiao163
  • 2014年12月10日 15:04
  • 1932

一篇厚道的Autolayout及VFL经验分享

原文:http://blog.csdn.net/mozixiong/article/details/14165391 这篇不是什么教程。 Cocoa autolayout出来蛮久了。以前多次想...
  • yongyinmg
  • yongyinmg
  • 2014年09月20日 10:58
  • 3008
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单使用VFL添加约束布局
举报原因:
原因补充:

(最多只允许输入30个字)