AutoLayout 使用之代码实现(VFL)

最新推荐文章于 2018-09-15 17:19:50 发布
最新推荐文章于 2018-09-15 17:19:50 发布
阅读量106 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/1245365/blog/363989
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、什么是VFL？

     VFL是 Visual format language （可视格式语言）的缩写,是Apple针对 AutoLayout 设计的一种语言。通过VFL，我们能在代码中灵活的使用AutoLayout而做到真正的不受设备控制！

二、VFL的图形表示

先看一个图形：

161312_AkGo_1245365.jpg

它代表了有两个button ，cancel 和 accept，他们的位置关系是左右相隔一段距离。

将他们用简单的方式画出来，变成了下述图：

161312_ZKCi_1245365.jpg

将其再次简化，变成了如下一种格式：

161312_2yJ7_1245365.jpg

而VFL正正是用上图这样的一种直观的格式来展现约束的。

不妨先看一下上述布局用VFL的代码实现，假设cancelButton和acceptButton相隔30像素，那么为两个button添加约束的代码为：

NSDictionary* views = NSDictionaryOfVariableBindings( cancelButton,acceptButton);//确定约束成员
NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-30-[acceptButton]" options:0 metrics:nil views:views]];//添加布局
[self.view addConstraints:constraint];//在视图上添加约束

      这样的一个代码就实现了上述约束的布局。有些人肯定会说，太麻烦了，还不如在sb上随便点两下。这个，确实是的。但是，当用sb无法一次性满足N个设备时，VFL就发挥出它的顽强精神了！

三、VFL的使用规则

/****************************************************************/

 “|: ”表示父视图 eg：

@"|-[cancelButton]-30-[acceptButton]"

表示 cancelButton在父视图的左边缘（与父视图的相对位置是 x = 0），常见的有：

1.|-[view]-|:  视图处在父视图的左右边缘内

2.|-[view]  :   视图处在父视图的左边缘

3.|[view]   :   视图和父视图左边对齐；


/****************************************************************/

 “-:”表示距离，eg：

@"[cancelButton(50)]-30-[acceptButton]"

表示cancelButton长50像素 和acceptButton的间隔是30像素

 @"|-50-[cancelButton]"

 表示cancelButton 离superView的左边缘为50个像素；


/****************************************************************/

V:  :表示垂直

@"V:|-100-[cancelButton]-20-[acceptButton]"

表示cancelButton离父视图顶端100个像素点，离accpetButton20个像素点

@"V:[acceptButton(300)]-20-|"

表示acceptButton高300像素，离superView底端有20个像素点；


/****************************************************************/

H:  表示水平（可以不写，默认的话就是水平位置）；



/****************************************************************/

>= :表示视图间距、宽度和高度必须大于或等于某个值；

<= :表示视图间距、宽度和高度必须小宇或等于某个值；

== :表示视图间距、宽度或者高度必须等于某个值 ；

@"V:|-(==padding)-[imageView]->=0-[button]-(==padding)-|"

表示离父视图的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

@"[wideView(>=30@500)]"

表示视图的宽度为至少为30 不能超过 500


四、VFL使用的前提和方法

1、设置translatesAutoresizingMaskIntoConstraints属性

如果想用autolayout，那么必须先设置translatesAutoresizingMaskIntoConstraints为NO

例如初始化一个UIButton类对象，那么：

    UIButton* cancelButton = [[UIButton alloc] init];
    cancelButton.translatesAutoresizingMaskIntoConstraints = NO;


2、两种常用的约束格式（NSArray、NSLayoutConstraint）

(1)NSArray方法（适用于添加水平和垂直的约束）

- (void)addConstraints:(NSArray *)constraints;

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

参数介绍：

format:此参数为你的vfl语句，比如:@"H:|-[button]-|"

opts:枚举参数，默认写0，具体跟据你所实现的需求去选择你想要的枚举

metrics:这里是一个字典，当在format中使用了动态数据比如上现这句:@"H:|-[button(==width)]-|",表示这个button的宽度为width,那么这个参数去哪里找呢？就是在这个字典里面找到key对就的值，如果没有找到这个值，app就会crash.

views:顾名思义，这是传所有你在vfl中使用到的view，那在上面这句例子中的应该怎么传呢？结果是这样的：NSDictionaryOfVariableBindings(button).如果你使用到了多个view，就可以这样NSDictionaryOfVariableBindings(button,button1,button3...),这个名字也要跟参数format中的一一对应，缺一不可.


 /*---------------------------初始化----------------------------------*/
 UIButton* cancelButton = [[UIButton alloc] init];
 cancelButton.translatesAutoresizingMaskIntoConstraints = NO;

 UIButton* acceptButton = [UIButton new];
 acceptButton.translatesAutoresizingMaskIntoConstraints = NO;
 
 
 /*------------------------------添加水平和垂直约束-------------------------*/
 NSDictionary* views = NSDictionaryOfVariableBindings(cancelButton, acceptButton);
    
 NSString *vflString = [NSString stringWithFormat:@"|-20-[cancelButton(>=%d)]-20-|", self.view.frame.size.width/3];
 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vflString options:0 metrics:nil views:views]];
    
vflString = @"V:|-30-[cancelButton(150)]-15-[acceptButton(50)]";
 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vflString options:0 metrics:nil views:views]];



      

(2) NSLayoutConstraint (适用于添加居中的约束)

- (void)addConstraint:(NSLayoutConstraint *)constraint

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

 /*---------------------------初始化----------------------------------*/
 UIButton* acceptButton = [UIButton new];
 acceptButton.translatesAutoresizingMaskIntoConstraints = NO;
 NSDictionary* views = NSDictionaryOfVariableBindings(acceptButton);
 
 /*------------------------------acceptButton水平居中-------------------------*/
 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:acceptButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:acceptButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

注意：在上述例子中,acceptButton.attribute =  self.view.attribute * multiplier + constant



五、代码实现上篇博客中storyboard的布局（AutoLayout 使用之storyboard演示）

附上两张图来回忆一下：

173742_0Ogi_1245365.png

173742_ZzwT_1245365.png


下面用代码实现：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *view1 = [UIView new];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    
    UIView *view2 = [UIView new];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:view2];
    
    UIView *view3 = [UIView new];
    view3.translatesAutoresizingMaskIntoConstraints = NO;
    view3.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view3];
    
    UIView *view4 = [UIView new];
    view4.translatesAutoresizingMaskIntoConstraints = NO;
    view4.backgroundColor = [UIColor cyanColor];

    [self.view addSubview:view4];
    
    UIView *view5 = [UIView new];
    view5.translatesAutoresizingMaskIntoConstraints = NO;
    view5.backgroundColor = [UIColor greenColor];

    [self.view addSubview:view5];
    
    UIView *view6 = [UIView new];
    view6.translatesAutoresizingMaskIntoConstraints = NO;
    view6.backgroundColor = [UIColor blueColor];
    [self.view addSubview:view6];
    
    UIView *view7 = [UIView new];
    view7.translatesAutoresizingMaskIntoConstraints = NO;
    view7.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:view7];
    
    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2,view3,view4,view5,view6,view7);
    
     /*---------------------view4居中显示,长度以及宽度为65-------------------------*/
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view4 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view4 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[view4(65)]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view4(65)]" options:0 metrics:nil views:views]];

    
    /*---------------------View3长度宽度为65，垂直居中,且它离容器左边的距离为一个固定值-------------------------*/
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view3(65)]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-13-[view3(65)]" options:0 metrics:nil views:views]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view3 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    
    
    /*---------------------view5长度宽度为65，垂直居中,且它离容器右边的距离为一个固定值-------------------------*/
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view5(65)]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[view5(65)]-13-|" options:0 metrics:nil views:views]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view5 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    
    /*---------view1和view2 让他离下面的最近的view 的距离以及根视图的左边或右边的位置成固定值-------------*/
    
    //view1
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1(==65)]-69-[view3]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-52-[view1(65)]" options:0 metrics:nil views:views]];
    
    //view2
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2(==65)]-69-[view5]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[view2(65)]-52-|" options:0 metrics:nil views:views]];
    
    /*---------view6和view7 让他离上面的最近的view 的距离以及根视图的左边或右边的位置成固定值-------------*/
    //view6
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view3]-69-[view6(==65)]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-52-[view6(65)]" options:0 metrics:nil views:views]];
    
    //view7
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view5]-69-[view7(65)]" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[view7(65)]-52-|" options:0 metrics:nil views:views]];

}



转载于:https://my.oschina.net/u/1245365/blog/363989

weixin_34075551
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ios-VFL语言实现AutoLayout,屏幕适配.zip
07-11
本程序主要实现的功能是使用VFL语言实现屏幕适配，纯代码的方式，Autolayout实现屏幕适配
iOS AutoLayout的代码实现
03-02
在本教程中，我们将专注于使用Visual Format Language (VFL)进行AutoLayout的代码实现。 Visual Format Language是一种用字符串来描述界面布局约束的方法，它可以简洁地表达视图之间的对齐方式、大小和间距。VFL...
一篇厚道的Autolayout及VFL经验分享
热门推荐
MoZiXiong的专栏
11-05 3万+
这篇不是什么教程。 Cocoa autolayout出来蛮久了。以前多次想去深入研究一下，每次都很蛋疼无序。这东西是在有些搞。尤其习惯了code写布局的。看到Visual format language，简直要掀桌子。 搜教程，满世界都是，没有一个讲得透彻的。p话一堆，例子空洞。你们就只会３个控件横向布局对法？ 浑浑噩噩看了多篇。有了点总结。槽不多吐了。简单讲讲。 零. Auto
Autolayout之VFL
chen505358119的专栏
06-05 745
前面说过给控件一个一个的添加约束代码量很多，写得手软，在这里我们可以用Visual Format Langage,大大的减少了代码量如下图：                      同样的界面用VFL只需要几句话即可如下:- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after
Autolayout-VFL语言
keelZJP的专栏
06-19 453
H:[cancelButton(72)]-12-[acceptButton(50)] canelButton宽72，acceptButton宽50，它们之间间距12 H:[wideView(>=60@700)] wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足） V:[redBox]-[yellowBo
AutoLayout VFL 笔记
Ashiyanshi的专栏
10-18 583
visual format language (VFL)直接来个例子实在： UILabel *hint = [[UILabel alloc] init]; hint.text = @"label"; hint.backgroundColor = [UIColor grayColor]; [self.view addSubview:hint]; UIButton *
用代码AutoLayout的Demo
03-02
这个"用代码AutoLayout的Demo"提供了通过编程方式使用AutoLayout的实例，帮助开发者更好地理解和掌握这一技术。 在iOS应用开发中，AutoLayout主要通过NSLayoutConstraint对象来定义视图（UIView）之间的关系，这些...
ios8 vfl以及AutoLayout
11-10
VFL是AutoLayout的一种表示方式，使用字符串语法来创建和表达约束。VFL提供了一种简洁的方法来描述视图之间的关系，使得代码更加可读和易于维护。 1. **VFL语法**：VFL的基本语法包括方向（水平-H，垂直-V），视图...
AutoLayout
12-31
通过学习和使用这个"AutoLayout"分类，开发者不仅可以提升布局代码的可读性和效率，还能深入理解AutoLayout的工作原理，更好地控制和优化界面布局。在实际项目中，结合使用AutoLayout、Size Classes和Category中的...
学习AutoLayout(VFL)
03-10 682
NSLayoutConstraint的第二个类方法+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSD
代码添加AutoLayout 详解+手把手实战
jesse881025的专栏
02-28 386
1.首先我们要明确，当我们使用自动布局的时候为了不让Contraint和view本身的autoresize属性发生冲突，我们首先需要把控件 的属性设为setTranslatesAutoresizingMaskIntoConstraints:NO 2.分清楚两个函数的不同用处 @1+ (NSArray *)constraintsWithVisualFormat:(NSString *)f
光功率计(Optical power meter)
MyArrow的专栏
09-15 1万+
1. 基本概念 光功率计（OPM）：是用于测量光信号中的功率的装置，它通常指用于测试光的平均功率(Average Power) dB：表示相对功率 P(dB) = 10 log(P/Pref) dBm：表示绝对功率 P(dBm) = 10 log (P/1mW) ...
iOS学习之VFL语言简介
weixin_30293079的博客
01-20 168
什么是VFL语言 VFL（Visual Format Language），“可视化格式语言”。 VFL是苹果公司为了简化autolayout的编码而推出的抽象语言。 语法说明 H:[cancelButton(72)]-12-[acceptButton(50)] cancelButton宽72，acceptButton宽50，它们之间间距12 H:[wideView(&gt...
unity2d自动布局代码实现
最新发布
01-30
在Unity 2D中，可以通过代码来实现自动布局，其中可以使用Unity的RectTransform组件来控制UI元素的位置和大小。以下是一个简单的例子： 首先，我们需要在Unity中创建一个空的GameObject，并且将其命名为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值