簡單使用VFL添加限制布局

學習筆記   

由于好奇今天我就搗鼓了一下午，感覺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相距15，cyanView在父視圖右邊緣,距離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];

    // redView和orange垂直距離為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];

    // orangeView和button和View1之間間隔為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的間距為15，redView和父視圖右邊緣的距離為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 檔案下載下傳

好記性，不如爛筆頭。