IOS VFL语言（页面布局）

时间：2024-04-29 02:10:26
● 什么是VFL语言
● VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例

● H:[cancelButton(72)]-12-[acceptButton(50)]
● canelButton宽72,acceptButton宽50,它们之间间距12

● H:[wideView(>=60@700)]
● wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

● V:[redBox]-[yellowBox(==redBox)]
● 竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

● H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

● 水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;
再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。
(竖线“|” 表示superview的边缘)

VFL的使用

● 使用VFL来创建约束数组 
+ (NSArray *)constraintsWithVisualFormat:(NSString

*)format options:(NSLayoutFormatOptions)opts metrics:

(NSDictionary *)metrics views:(NSDictionary *)views;

● format :VFL语句
● opts :约束类型(一般可以传0)
● metrics :VFL语句中用到的具体数值
● views :VFL语句中用到的控件

● 创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义
NSDictionaryOfVariableBindings(...)

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // 1.添加两个控件到父控件上

    // 1.1添加蓝色View

    UIView *blueView = [[UIView alloc] init];

    blueView.backgroundColor = [UIColor blueColor];

    [self.view addSubview:blueView];

    // 1.1添加红色View

    UIView *redView = [[UIView alloc] init];

    redView.backgroundColor = [UIColor redColor];

    [self.view addSubview:redView];

    // 2.禁用auturezing

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3.添加约束

    /*

     lFormat : VFL语句

     options: 对齐方式

     metrics: VFL语句中用到的变量值

     views: VFL语句中用到的控件

     */

    // 设置蓝色View距离左边和右边有20的的间距  X 和 宽度

//    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];

    int margin = ;

    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-|" options: metrics:@{@"margin": @(margin)} views:@{@"blueView" : blueView}];

    [self.view addConstraints:blueViewH];

    // 设置蓝色View距离顶部有20的间距, 并且高度等于50   Y 和高度

    // 设置红色View距离蓝色底部有20的间距, 并且红色View的高度等于蓝色View的高度 Y 和高度

    // 并且设置红色和蓝色右对齐

    NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];

    [self.view addConstraints:blueViewV];

    // 注意: 在VFL语句中, 是不支持乘除法

//    NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];

//    [self.view addConstraints:redVeiwH];

    NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:];

    [self.view addConstraint:redVeiwW];

}

@end

基于Autolayout的动画

● 在修改了约束之后,只要执行下面代码,就能做动画效果 [UIView animateWithDuration:1.0 animations:^{

[添加了约束的view layoutIfNeeded];

}];

相关文章