简单使用VFL添加约束布局

最新推荐文章于 2016-05-06 17:33:51 发布
最新推荐文章于 2016-05-06 17:33:51 发布
阅读量528 收藏
点赞数
分类专栏： 笔记 文章标签： 布局 VFL NSLayoutConstraint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014286994/article/details/46777411
版权

学习笔记   

  

由于好奇今天我就捣鼓了一下午，感觉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 文件下载

好记性，不如烂笔头。 


望学海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
代码加约束VFL语法的详细使用介绍(代替Autolayout进行布局,比Autolayout更简单明了,生动直观)
jeck的博客
05-20 2520
Autoresizing已经满足不了我们加约束的需求,而Autolayout功能强大,应用比较普遍,但有时候需要用代码来加约束,这时候用Autolayout就比较麻烦了,代码繁琐不说,代码量也是大大滴有!想对Autoresizing和Autolayout代码加约束的使用有个了解,可以去我另一篇博客中去了解一下(添加网址).而现在有一种VFL语法可以代替Autolayout进行约束,相比之下,VFL语法更加简单明了且生动直观的就把约束给加上了.想要源码的朋友,可以去我的GitHub下载源码(https://g
iOS自动布局-VFL格式约束
小桥流水哗啦啦，iOS Coder 哒哒哒
08-10 1340
AutoLayout VFL可视化格式约束 一、VFL简介 iOS的自动布局约束主要有三种方式， 1.可视化界面中添加布局，比如在Storyboard xib。 2.代码添加当个约束 3.VFL格式约束 VFL添加约束的优点 1.可以一行代码添加多个约束和多个对象 2.动态性大 3.不依赖其他框架。 4.只需要直观的从垂直和水平方向考虑 现在在代码添加约束中有很多优秀...
Autolayout约束的代码实现方式-2(VFL)
luyangjay的博客
04-11 450
VFL是苹果官方推出的一种改善纯代码实现约束的语法糖 下面是一个例子：     // 蓝色控件     UIView *blueView = [[UIView alloc] init];     blueView.backgroundColor = [UIColor blueColor];     blueView.translatesAutoresizingMa
IOS AutoLayout 代码实现约束—VFL
weixin_34290096的博客
12-22 164
2019独角兽企业重金招聘Python工程师标准>>> ...
iOS 12 Auto Layout界面自动布局系列4-使用VFL添加布局约束
Puzhi的专栏
04-17 2万+
本系列第一篇文章介绍了自动布局的基本原理，第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束，第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束。本篇文章在第三篇文章的基础上，使用Visual Format Language（暂且翻译为可视化格式语言，简称VFL）创建约束。
ios 获取设备唯一标示符(使用VFL语法添加约束)
11-16
本文将详细讲解如何在iOS应用中获取设备的唯一标识符，并介绍如何利用Visual Format Language (VFL)来添加界面约束，确保在不同屏幕尺寸下正确适配。 首先，我们要了解在iOS中获取设备唯一标识符的方法。`UIDevice`...
ios自动布局 vfl实现
06-04
一个简单的VFL例子可能如下所示： ```swift let vfl = "H:|-10-[label]-10-[button]-10-|" ``` 这个VFL字符串表示的是：从父视图的左边开始，留出10个像素的间距，然后是label，再留出10个像素，接着是button，最后...
AutoLayoutShorthand:用于创建和添加 Cocoa 自动布局约束的替代系统
07-05
自动布局速记 (ALS) 是用于创建和添加自动布局约束的替代系统。 它感觉有点像 CSS，但更强大，而且没有 HTML 令人沮丧的默认布局模型。 下面以一个简单的例子来介绍ALS： [iconView als_addConstraints:@{ @...
IOS VFL（可视化语言布局）
09-15
VFL（Visual Format Language）是Autolayout的一种表达方式，通过简单的字符串语法来描述视图间的布局关系。对于初学者来说，理解和掌握VFL可以提升布局效率，减少代码量，同时增加布局的可读性。 **1. VFL的基本...
ios8 vfl以及AutoLayout
11-10
4. **Interface Builder支持**：Xcode的Interface Builder提供了可视化的方式来添加和编辑约束，使得非代码式的布局设计变得简单。 二、Visual Format Language (VFL) VFL是AutoLayout的一种表示方式，使用字符串...
IOS Autolayout(VFL) 处理子视图居中
chujiujiao的专栏
10-25 2万+
VFL的子视图居中，网上搜了很多都没找到有用代码，自己研究出来了。代码如下 UIActivityIndicatorView* prgrssView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; prgrssVi
Auto Layout界面自动布局系列 (使用VFL添加布局约束)
学无止境! 无休无止!
09-27 901
本系列第一篇文章介绍了自动布局的基本原理，第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束，第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束。本篇文章在第三篇文章的基础上，使用Visual Format Language（暂且翻译为可视化格式语言，简称VFL）创建约束。  在第三篇文章中，我们仅仅创建了4个视图，就需要创建将近20个NSLay
VFL 自动约束
weixin_34315665的博客
03-10 77
我们讲讲最后的两条新的VFL语句： H:[view]-[view2(>=50)] 从开始的H:我们可以判断出这是水平方向的布局，换句话说就是设置视图的x和width。接着的[view]，说明后面的所有视图都是在view的右侧；接着是-，说明后一个视图和view之间有一个标准距离的间距；也就是说 x 等于view的右侧再加上标准距离，即CGRectGetMax...
iOS 获取当前时间戳和时间
热门推荐
薛国宾的专栏
02-18 3万+
NSDate *senddate = [NSDate date];                  NSLog(@"date1 时间戳 = %ld",time(NULL));         NSString *date2 = [NSString stringWithFormat:@"%ld", (long)[senddate timeIntervalSince1970
UIBezierPath详解
薛国宾的专栏
05-04 1万+
使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。 Bezier Path 基础     UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直
CGContextRef详解
薛国宾的专栏
05-06 1万+
/* CoreGraphics - CGContext.h */ /** Graphics state functions. **/  //为了让开发者在进行坐标变换时无须计算多次坐标变换后的累加结果，Quartz 2D还提供了如下两个方法来保存、恢复绘图状态 /*   保存CGContextRef当前的绘图状态，方便以后恢复该状态*/ voi
使用 arc4random获取随机数
薛国宾的专栏
03-11 4905
int x = arc4random() % 100;  // 获取一个随机整数范围   0 ~ 99          // 获取一个随机整数，范围在[from,to），包括from，不包括to          int getScopeInsideRandomValue(int from, int to) {             return (int)(from + (ar
UIPanGestureRecognizer和UISwipeGestureRecognizer冲突?
薛国宾的专栏
04-25 3638
当实现拖手势（UIPanGestureRecognizer）后将不能响应左右划（UISwipeGestureRecognizer）事件，事件会被拖手势栏截，所以左右划和拖手势只能选其一.     但是即需要拖手势还需要左右划手势呢?     我想到了一个简单方案.在UIPanGestureRecognizer基础上做一个轻滑手势.在一定的时间范围内滑动,视为左右划手势,反之为拖手势.
GCD详解
薛国宾的专栏
03-12 2841
什么是GCD？ Grand Central Dispatch或者GCD，是一套底层API，提供了一种新的方法来进行并发程序编写。使用GCD来提升程序性能以及发挥多核系统优势. GCD的工作原理: 让程序平行的特定任务,根据可用的处理资源,安排他们在任何可用的处理器核心上执行任务. GCD提供了很多超越传统多线程编程的优势. 简单易用,居于block的血统,导致它能极为简单
UI基础（代码布局：NSLayoutConstraint、VFL).pdf
03-23
"这份资源是关于iOS开发中的UI基础，主要介绍了如何使用NSLayoutConstraint和Visual Format Language (VFL)进行界面布局。同时提到了SnapKit作为替代方案。" 在iOS应用开发中，用户界面（UI）的设计至关重要。为了...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值