ios之快速领会自动布局 VFL

转载 2015年07月07日 14:16:27

终于发现一个入门ios autolayout的好教程,一个简单的demo,胜过网上无数教程,膜拜!

直接贴代码了

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UIView *redView;
@property (nonatomic, strong) UIView *yellowView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self setupViews];


    /* Remove comment from the example that you want to launch */

    // Example 1: Simple constraints with visual format language
    [self example_1];

    // Example 2: Simple constraints with visual format and multiple views
    //[self example_2];

    // Example 3: Simple constraints with visual format and options
    //[self example_3];

    // Example 4: Simple constraints with visual format using metrics
    //[self example_4];

    // Example 5: Dynamic size
    //[self example_5];

    // Example 6: Defining constraints through relations
    //[self example_6];

}


/* 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]];

}

@end

博客地址:http://www.thinkandbuild.it/learn-to-love-auto-layout-programmatically/
demo地址:https://github.com/ariok/TB_ProgrammaticallyAutoLayout
参考资料:https://developer.apple.com/library/mac/documentation/AppKit/Reference/NSLayoutConstraint_Class/index.html

iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutConstraint API...

iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 一:API介绍 NSLayoutConstraint...
  • errvv
  • errvv
  • 2016年01月27日 10:16
  • 263

iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI。 格式的字符串作一个总结介绍 功能        表达...
  • jeffasd
  • jeffasd
  • 2015年10月12日 16:07
  • 352

iOS学习之VFL实现自动布局

坚持 成长 每日一篇VFL可以实现快速添加多条约束,掌握VFL可以很方便的用存代码布局我们的App界面 VFL常用的情况: [view1]-100-[view2]:约束两个视图距离为100. H...

iOS--VFL--autolayout--自动布局

使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 本文将通过简单的UI来说明如何用VFL来实现自动布局。在自动布局的时候避免不了使用代码来加以...
  • kiwirr
  • kiwirr
  • 2016年06月17日 15:54
  • 246

iOS 自动布局 VFL

搜教程,满世界都是,没有一个讲得透彻的。例子空洞。你们就只会3个控件横向布局对法? 浑浑噩噩看了多篇。有了点总结。槽不多吐了。简单讲讲。 零. Autolayout,开始...

IOS autoLayout之使用VFL语言进行代码自动布局

VFL的简单语法: H:[cancelButton(72)]-12-[acceptButton(50)] canelButton宽72,acceptButton宽50,它们之间间距12 H:[wide...

iOS 8 Auto Layout界面自动布局系列4-使用VFL添加布局约束

原文来自于:http://blog.csdn.net/pucker/article/details/45093483 本系列第一篇文章介绍了自动布局的基本原理,第二篇通过一个简单的例子演示了如何...
  • ffblog
  • ffblog
  • 2015年05月18日 18:10
  • 386

ios之快速领会VFL的demo

转载自:http://www.cnblogs.com/lee0oo0/p/4220557.html /* Initial views setup */ - (void)setupViews...

iOS 8 Auto Layout界面自动布局系列4-使用VFL添加布局约束

本系列第一篇文章介绍了自动布局的基本原理,第二篇通过一个简单的例子演示了如何使用IB以可视化方式创建自动布局约束,第三篇使用代码直接创建NSLayoutConstraint实例来定义自动布局约束。本篇...
  • pucker
  • pucker
  • 2015年04月17日 15:53
  • 20070
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios之快速领会自动布局 VFL
举报原因:
原因补充:

(最多只允许输入30个字)