阅读 486

iOS-屏幕适配(VFL)

本文已参与好文召集令活动,点击查看: 后端、大前端双赛道投稿,2万元奖池等你挑战!

VFL简介

VFL全称是Visual Format Language(可视化格式语言),它简化了Autolayout, 通过一行字符串,你可以在水平或者垂直方向上指定多个约束, 这跟一次只能创建一个约束相比会节省大量的代码量

编译代码写的布局时,相关的View都需要将translatesAutoresizingMaskIntoConstraints设置为NO

view.translatesAutoresizingMaskIntoConstraints = NO;
复制代码

VFL用法

VFL字符串语法

  • H :水平方向
  • V :垂直方向

注意
不指定方向默认水平方法

  • | :父视图
  • -:标准间隔(默认左右边距8像素,上边距20像素)
  • -xx- 非标准间隔(xx像素)
  • ==:宽度相等(可省略)
  • <=:小于等于
  • >=:大于等于
  • @250:约束的优先级,取值范围为0~1000250、750、1000

示例:

H:|-20-[blueView]-20-|    
水平方向上,blueView距离父视图的左右俩边距均为20

V:|-[button(50.0)]:
垂直方向上,距离父视图顶部标准默认间距20,button高度为50

H:|-20-[blueView(100)]   
水平方向上,blueView距离父视图的左边距为20,blueView的宽为100

V:[blueView(50)]-100@250-|
垂直方向上,blueView高度为50,blueView 距离父视图底部边距为100,@250优先级为低, 如果自动布局有冲突时, 该条约束就有可能失效

H:|-[blueView(50)]-10-[redView]-10-[yellowView(blueView)]|
水平方向上,blueView距离父视图的左边距为标准间隔(默认8像素),yellowView距离父视图的右边距为0,redView距离blueView和yellowView左右边距均为10,blueView和yellowView等宽
复制代码

主要函数

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format  
                                 options:(NSLayoutFormatOptions)opts  
                                 metrics:(NSDictionary *)metrics  
                                   views:(NSDictionary *)views
复制代码
  • formatVFL语句 VFL字符串

  • opts:约束类型 opts参数是个枚举值,表示对齐方式

11975486-d3d1f0031648e1a9.png

UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
redView.translatesAutoresizingMaskIntoConstraints = NO;
NSNumber *width = @100.0;
NSNumber *height = @100.0;
NSDictionary *viewsDic = @{@"blueView":blueView,@"redView":redView};
NSDictionary *metricsDic = @{@"width":width,@"height":height};
//设置对齐方式,redView与blueView的上面和下面对齐
NSLayoutFormatOptions ops =   NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom;
//水平约束
NSString *vfl1 = @"H:|-50-[blueView(width)]-30-[redView(width)]";
NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1options:ops metrics:metricsDic views:viewsDic];
[self.view addConstraints:constraints1];
//垂直约束
NSString *vfl2 = @"V:|-100-[blueView(height)]";
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:ops metrics:metricsDic views:viewsDic];
[self.view addConstraints:constraints2];
复制代码
  • metricsVFL语句中用到的具体数值 metrics参数是一个字典, 里面可以存储一些数值, 这样存储之后就可以在VFL字符串中调用了

    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
        
    CGFloat height = 100.0;
    CGFloat width = 100.0;
    
    //width代替 100.0,height代替 100.0
    NSString *vfl1 = @"H:|-30-[blueView(width)]-30-|";
    NSDictionary *views = @{@"blueView":blueView};
    
    //metrics参数中做好对应关系
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:kNilOptions metrics:@{@"width":@(width)} views:views];
    [self.view addConstraints:constraints1];
          
    NSString *vfl2 = @"V:|-30-[blueView(height)]-30-|";
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2   options:kNilOptions metrics:@{@"height":@(height)} views:views];
    [self.view addConstraints:constraints2];
    复制代码
  • viewsVFL语句中用到的控件 views参数是一个字典,里面可以存储一些数值, 这样存储之后就可以在VFL字符串中调用了 为了方便苹果官方提供了一个宏,传入相关的view变量名,返回可以直接使用的dictionary

    NSDictionaryOfVariableBindings()
    
    示例
    NSDictionaryOfVariableBindings(v1, v2, v3)
    等价于
    [NSDictionary dictionaryWithObjectsAndKeys:v1, @”v1”, v2, @”v2”, v3, @”v3”, nil];
    复制代码

    示例

    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
        
    CGFloat height = 100.0;
    CGFloat width = 100.0;
    
    NSString *vfl1 = @"H:|-30-[blueView(width)]-30-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);
    //NSDictionary *views = @{@"blueView":blueView}; //同上
    NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:kNilOptions metrics:@{@"width":@(width)} views:views];
    [self.view addConstraints:constraints1];
        
    NSString *vfl2 = @"V:|-30-[blueView(height)]-30-|";
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:@{@"height":@(height)} views:views];
    [self.view addConstraints:constraints2];
    复制代码

VFL缺点

VFL可以满足大部分布局需求,不能设置一个视图自身的宽高比,也不能剧中对齐父视图。为了做到这些,你需要创建一些独特的约束


常见布局屏幕适配的方式

文章分类
iOS
文章标签