ios之快速领会VFL的demo

在网上看到一篇blog，超正！快速领会ios的vfl。  这里贴上blog的地址。

http://www.thinkandbuild.it/learn-to-love-auto-layout-programmatically/

https://github.com/ariok/TB_ProgrammaticallyAutoLayout  代码demo

demo代码如下：

/* Initial views setup */

- (void)setupViews
{
    self.redView = [UIView new];
    self.redView.translatesAutoresizingMaskIntoConstraints = NO;
    self.redView.backgroundColor = [UIColor colorWithRed:0.95 green:0.47 blue:0.48 alpha:1.0];

    self.yellowView = [UIView new];
    self.yellowView.translatesAutoresizingMaskIntoConstraints = NO;
    self.yellowView.backgroundColor = [UIColor colorWithRed:1.00 green:0.83 blue:0.58 alpha:1.0];

    [self.view addSubview:self.redView];
    [self.view addSubview:self.yellowView];

}

/*
 Hey Devs... the code in the next functions has to be intended for tutorial purposes only.
 I have created work-alone examples that contain a lot of code duplication... not a good practice but way easier to explain :P
*/

/* EXAMPLE 1 */

- (void)example_1
{

    // 1. Create a dictionary of views
    NSDictionary *viewsDictionary = @{@"redView":self.redView};

    // 2. Define the redView Size
    NSArray *constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(100)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDictionary];

    NSArray *constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(100)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDictionary];
    [self.redView addConstraints:constraint_H];
    [self.redView addConstraints:constraint_V];

    // 3. Define the redView Position
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    // 3.B ...and try to change the visual format string
    //NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-30-|" options:0 metrics:nil views:viewsDictionary];
    //NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[redView]" options:0 metrics:nil views:viewsDictionary];

    [self.view addConstraints:constraint_POS_H];
    [self.view addConstraints:constraint_POS_V];
}

/* EXAMPLE 2 */

- (void)example_2
{

    // 1. Create a dictionary of views
    NSDictionary *viewsDictionary = @{@"redView":self.redView, @"yellowView":self.yellowView};

    // 2. Define the views Sizes
    NSArray *red_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(100)]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    NSArray *red_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(100)]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    [self.redView addConstraints:red_constraint_H];
    [self.redView addConstraints:red_constraint_V];

    NSArray *yellow_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[yellowView(200)]"
                                                                           options:0
                                                                           metrics:nil
                                                                             views:viewsDictionary];

    NSArray *yellow_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[yellowView(100)]"
                                                                           options:0
                                                                           metrics:nil
                                                                             views:viewsDictionary];
    [self.yellowView addConstraints:yellow_constraint_H];
    [self.yellowView addConstraints:yellow_constraint_V];

    // 3. Define the views Positions
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView]-40-[yellowView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-10-[yellowView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    [self.view addConstraints:constraint_POS_V];
    [self.view addConstraints:constraint_POS_H];

}

/* EXAMPLE 3 */

- (void)example_3
{

    // 1. Create a dictionary of views
    NSDictionary *viewsDictionary = @{@"redView":self.redView, @"yellowView":self.yellowView};

    // 2. Define the views Sizes
    NSArray *red_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(100)]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    NSArray *red_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(100)]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    [self.redView addConstraints:red_constraint_H];
    [self.redView addConstraints:red_constraint_V];

    NSArray *yellow_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[yellowView(150)]"
                                                                           options:0
                                                                           metrics:nil
                                                                             views:viewsDictionary];

    NSArray *yellow_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[yellowView(100)]"
                                                                           options:0
                                                                           metrics:nil
                                                                             views:viewsDictionary];
    [self.yellowView addConstraints:yellow_constraint_H];
    [self.yellowView addConstraints:yellow_constraint_V];

    // 3. Define the views Positions using options
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-120-[redView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];

    NSArray *constraint_POS = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-10-[yellowView]"
                                                                      options:NSLayoutFormatAlignAllTop
                                                                      metrics:nil views:viewsDictionary];

    [self.view addConstraints:constraint_POS_V];
    [self.view addConstraints:constraint_POS];

}

/* EXAMPLE 4 */

- (void)example_4
{
    // 1. Create a dictionary of views and metrics
    NSDictionary *viewsDictionary = @{@"redView":self.redView, @"yellowView":self.yellowView};
    NSDictionary *metrics = @{@"redWidth": @100,
                              @"redHeight": @100,
                              @"yellowWidth": @100,
                              @"yellowHeight": @150,
                              @"topMargin": @120,
                              @"leftMargin": @20,
                              @"viewSpacing":@10
                              };

    // 2. Define the views Sizes
    NSArray *red_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView(redHeight)]"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];

    NSArray *red_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(redWidth)]"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];
    [self.redView addConstraints:red_constraint_H];
    [self.redView addConstraints:red_constraint_V];

    NSArray *yellow_constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[yellowView(yellowHeight)]"
                                                                           options:0
                                                                           metrics:metrics
                                                                             views:viewsDictionary];

    NSArray *yellow_constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[yellowView(yellowWidth)]"
                                                                           options:0
                                                                           metrics:metrics
                                                                             views:viewsDictionary];

    [self.yellowView addConstraints:yellow_constraint_H];
    [self.yellowView addConstraints:yellow_constraint_V];

    // 3. Define the views Positions
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-topMargin-[redView]"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];

    NSArray *constraint_POS = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leftMargin-[redView]-viewSpacing-[yellowView]"
                                                                      options:NSLayoutFormatAlignAllTop
                                                                      metrics:metrics
                                                                        views:viewsDictionary];

    [self.view addConstraints:constraint_POS_V];
    [self.view addConstraints:constraint_POS];
}

/* EXAMPLE 5 */

- (void)example_5
{
    // 1. Create a dictionary of views and metrics
    NSDictionary *viewsDictionary = @{@"redView":self.redView};
    NSDictionary *metrics = @{@"vSpacing":@30, @"hSpacing":@10};

    // 2. Define the view Position and automatically the Size
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-vSpacing-[redView]-vSpacing-|"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];

    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-hSpacing-[redView]-hSpacing-|"
                                                                      options:0
                                                                      metrics:metrics
                                                                        views:viewsDictionary];

    [self.view addConstraints:constraint_POS_V];
    [self.view addConstraints:constraint_POS_H];
}

/* EXAMPLE 6 */

- (void)example_6
{
    // 1. Create a dictionary of views
    NSDictionary *viewsDictionary = @{@"redView": self.redView, @"yellowView": self.yellowView};
    NSDictionary *metrics = @{@"vSpacing":@30, @"hSpacing":@10};

    // 2. Define the view Position and automatically the Size (for the redView)
    NSArray *constraint_POS_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-vSpacing-[redView]-vSpacing-|"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];

    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-hSpacing-[redView]-hSpacing-|"
                                                                        options:0
                                                                        metrics:metrics
                                                                          views:viewsDictionary];

    [self.view addConstraints:constraint_POS_V];
    [self.view addConstraints:constraint_POS_H];

    // 3. Define sizes thanks to relations with another view (yellowView in relation with redView)
    [self.view addConstraint:[NSLayoutConstraint
                                 constraintWithItem:self.yellowView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:self.redView
                                 attribute:NSLayoutAttributeWidth
                                 multiplier:0.5
                                 constant:0.0]];

    [self.view addConstraint:[NSLayoutConstraint
                                 constraintWithItem:self.yellowView
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:self.redView
                                 attribute:NSLayoutAttributeHeight
                                 multiplier:0.5
                                 constant:0.0]];

    // 4. Define position thanks to relations with another view (yellowView in relation with redView)
    [self.view addConstraint:[NSLayoutConstraint
                                    constraintWithItem:self.yellowView
                                    attribute:NSLayoutAttributeCenterX
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:self.redView
                                    attribute:NSLayoutAttributeCenterX
                                    multiplier:1.0
                                    constant:0.0]];

    [self.view addConstraint:[NSLayoutConstraint
                                    constraintWithItem:self.yellowView
                                    attribute:NSLayoutAttributeCenterY
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:self.redView
                                    attribute:NSLayoutAttributeCenterY
                                    multiplier:1.0
                                    constant:0.0]];

}
时间： 2024-08-09 18:25:49

ios之快速领会VFL的demo的相关文章

iOS与H5界面JSBridge交互Demo

iOS与H5界面JSBridge交互Demo 最近公司需要加活动和新闻模块, boss看同样的设计稿, 我们iOS做一遍, 安卓做一遍, 小程序又做一遍; 所以决定用H5页面. 但我们Native不仅仅加载URL就行, 还需要跟H5有交互, 安卓大哥跟我慢慢填坑- 我用了一个library(GCWebviewJSBridge-iOS), github网址:github.com/wheying/GCWebviewJSBridge-iOS 他的Demo不太容易看得懂, 看得我一脸懵逼, 我写了一个简

ios登陆页以及键盘关闭demo

1.新建一个single view 的project 2.另外新建两个类(非必要) DElabel.h DETextField.h 将共用属性以及方法都放类当中,特殊属性以及方法直接放VC中 3.声明全局变量tfuser tfpass两个textfield 4.键盘关闭关键在新建一个背景,让背景触发事件让两个textfield失去控制权. ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ // //  DEViewController.m //  testLoginPage // // 

IOS 字典快速转换为Model

一般情况下IOS得局部页面加载的过程是,创建一个Model然后,将Nib文件与Model进行关联,然后能够快速的获取到Nib文件上的控件实例.操作生成页面. 但是原生的内容是没有直接通过Json获取Model只能生成字典.然后转换为Model.下列方法就是通过字典来转换为Model的过程. 将字典转换为Model -(BOOL)reflectDataFromOtherObject:(NSDictionary *)dic { unsigned int outCount, i; objc_prope

iOS UITableView 快速滚动（索引方式实现）

参考:http://my.oschina.net/joanfen/blog/204503 思路:UITableView一次性加载数据过多时,需要滑动多次触底.想通过索引实现快速滑动,索引中加载20个空点.用户在最右端滑动时,索引框显示,当触及索引点时指向其想对应的UITableView的RowIndex来实现快速滚动.这方法有缺陷:普通滑动时滚动条被遮盖了. 主要代码: //获取数据 -(void)getTableData{ dispatch_async(dispatch_get_global_

iOS UITableview 图片懒加载demo

1.https://developer.apple.com/library/ios/samplecode/LazyTableImages/Introduction/Intro.html 这是苹果的官方demo,用itunes的应用列表为例,讲述了图片lazy load的思想. 主要思想是,当UITableView处于停止状态时,查找当前视图中的cell,并开始下载icon,下载完成后加载到页面上. 2.可以直接使用第三方加载网络图片的库,SDWebImage,https://github.com

ShareREC SDK(iOS) 专用快速集成组件

此SDK支持使用iOS平台下开发的手游应用,集成简单便捷.开发者可以让手游快速具备游戏录像.语音及视频解说.分享等功能,让你的手游获得更多的免费流量.并提供全面的数据统计分析服务.苹果iOS是由苹果公司开发的移动操作系统.苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch.iPad以及Apple TV等产品上. 下载 demo地址: http://rec.mob.com/Download     

iOS UIView 快速修改 frame，

在iOS开发布局修改 frame 时需要繁琐的代码实现,今天偶尔看到一播客说到快速修改的 frame 的方法,自己动手写了一遍实现代码. 快速实现主要通过 添加类目的方式,对UIView 控件添加了一些直接修改 frame 属性的方法(如:获取高度.宽度,坐标等);具体代码实现如下: .h文件,声明要用到的属性 1 // 2 // UIView+Layout.h 3 // Layout 4 // 5 // Created by Ager on 15/10/18. 6 // Copyright ©

[iOS UI进阶 - 2.0] 彩票Demo v1.0

A.需求 1.模仿"网易彩票"做出有5个导航页面和相应功能的Demo 2.v1.0 版本搭建基本框架 B.搭建基本框架 1.拖入TaBarController,5个NavigationController和对应的5个UIViewController 2.配置图标和启动画面 AppIcon直接拖入图片 LaunchImage在Xcode6中需要先更改启动图使用图库的图片,而不是LaunchImage.xib 2.引入图片包 4. 按照模块分类代码包 3.底部导航--自定义TabBar (

基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装

KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译,可稳定运行在 Node.js 环境上. github地址:http://github.com/einsqing/koahubjs demo 下载安装 //下载 git clone https://github.