• Autoresizing和AutoLayout

    1 使用Autoresizing的方式进行界面布局

    1.1 问题

    Autoresizing是IOS旧版的自动布局技术，现在仍然被很多企业使用。本案例将学习如何使用Autoresizing完成界面的布局，如图-1、图-2所示：

    图-1

    图-2

    1.2 方案

    首先创建一个SingleViewApplication项目，会自动帮我们创建好一个TRViewController类，并且自动带有Storyboard文件，默认情况下Storyboard里面有一个已经创建好的场景，已和TRViewController类绑定。

    由于Autoresizing和自动布局是冲突的，所以首先将自动布局功能关闭，选中Storyboard中的场景，在右边栏的第一个检查器中将Use AutoLayout和Use Size classes选项前面的勾去掉；

    其次设置界面，在Storyboard的场景的上方拖放两个Button控件，中间拖放一个ImageView，右下角拖放三个小的Button控件。

    然后依次选中场景中各个控件，在右边栏的第五个检查器中进行Autoresizing的布局设置，根据界面需要点亮需要的红线；

    最后使用代码方式补充Autoresizing无法完成的布局任务。

    1.3 步骤

    实现此案例需要按照如下步骤进行。

    步骤一：创建项目，关闭自动布局功能

    首先创建一个SingleViewApplication项目，Xcode会自动帮我们创建好一个TRViewController类，并且自动带有Storyboard文件。默认情况下Storyboard里面有一个已经创建好的场景，并且已经和TRViewController类绑定。

    由于Autoresizing和自动布局是冲突的，所以首先将自动布局功能关闭，选中Storyboard中的场景，在右边栏的第一个检查器中将Use Auto Layout和Use Size classes选项前面的勾去掉，如图-3所示：

    图-3

    步骤二：设置界面

    首先在Storyboard的场景拖放两个Button控件，两个Button的大小一样，并排放置在场景的上方。

    然后界面中间拖放一个ImageView，给ImageView设置一张图片。界面的右下角拖放三个小的Button控件，大小也保持一致，界面完成构建如图-4所示：

    图-4

    步骤三：设置Autoresizing，进行布局

    首先选中场景中左上方的Button的控件，在右边栏的第五个检查器中进行Autoresizing的布局设置，根据界面需要，点亮Button左边、上方的红线，表示Button控件相对于父视图保持左边距和上边距不变。然后在点亮Button中间的横线，表示Button的宽是控件的宽度随着父视图的宽度按比例改变，如图-5所示：

    图-5

    再选中场景中右上方的Button的控件，同样在右边栏的第五个检查器中进行Autoresizing的布局设置，根据界面需要，点亮Button右边、上方的红线，表示Button控件相对于父视图保持右边距和上边距不变。然后在点亮Button中间的横线，表示Button的宽是可以随视图变化而变化的，如图-6所示：

    图-6

    然后依照同样的步骤，设置ImageView的Autoresizing，对ImageView进行布局设置，使ImageView始终保持在屏幕中间显示，如图-7所示：

    图-7

    最后设置右下角三个Button的Autoresizing，使这个三个button始终保持在屏幕的右下角，并且间距和大小保持不变，如图-8所示：

    图-8

    步骤四：使用代码完成其他布局要求

    Autoresizing只能描述子视图与父视图之间的关系，并不能描述子视图之间的布局关系，因此在Autoresizing不能满足布局要求的时候，需要使用代码来补充完成，本案例中当完成了如上的Autoresizing设置之后，将屏幕切换成横屏之后，发现上方两个Button的距离发生了变化，并不是我们想要实现的效果，如图-9所示：

    图-9

    为了使两个Button之间的距离保持不变，此时只能在TRViewControll类中重写viewDidLayoutSubviews方法，使用代码来完成此项布局设置，代码如下所示：

     
    1. - (void)viewDidLayoutSubviews
    2. {
    3. [super viewDidLayoutSubviews];
    4. CGFloat buttonWidth = (self.view.bounds.size.width - 50)/2;
    5. CGRect frame = CGRectMake(20, 20, buttonWidth, 40);
    6. self.button1.frame = frame;
    7. frame.origin.x += buttonWidth + 10;
    8. self.button2.frame = frame;
    9. }

    这样就能使两个Button之间无论是横屏还是竖屏都能保持固定的间距，最终完成效果如图-10所示：

    图-10

    1.4 完整代码

    本案例中，TRViewController.m文件中的完整代码如下所示：

     
    1. #import "TRViewController.h"
    3. @interface TRViewController ()
    4. @property (weak, nonatomic) IBOutlet UIButton *button1;
    5. @property (weak, nonatomic) IBOutlet UIButton *button2;
    6. @end
    8. @implementation TRViewController
    9. - (void)viewDidLayoutSubviews
    10. {
    11. [super viewDidLayoutSubviews];
    12. CGFloat buttonWidth = (self.view.bounds.size.width - 50)/2;
    13. CGRect frame = CGRectMake(20, 20, buttonWidth, 40);
    14. self.button1.frame = frame;
    15. frame.origin.x += buttonWidth + 10;
    16. self.button2.frame = frame;
    17. }
    18. @end
     

    2 代码方式使用Autoresizing进行界面布局

    2.1 问题

    当子视图直接是用代码的方式创建时，就无法在Storyboard或xib中对其进行Autosizing的设置和操作，此时就需要用代码的方式使用Autoresizing技术。本案例将学习如何使用代码的方式进行Autoresizing布局，使界面上的两个按钮始终保持在屏幕的右上角和右下角，如图-11、图-12所示：

    图-11

    图-12

    2.2 方案

    首先同样的创建一个SingleViewApplication项目，在TRViewController.m文件的viewDidLoad方法中创建两个UIButton控件，分别放置在屏幕的右上角和右下角。

    然后通过设置Button的autoresizingMask属性，进行Autoresizing布局，相当于在检查器中点亮Autoresizing的红线。

    2.3 步骤

    实现此案例需要按照如下步骤进行。

    步骤一：创建项目，添加按钮控件

    首先创建一个SingleViewApplication项目。在TRViewController.m文件的viewDidLoad方法中创建两个UIButton控件，分别设置两个button的frame属性，将两个button放置在屏幕的右上角和右下角，代码如下所示：

     
    1. UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
    2. btn1.frame = CGRectMake(self.view.bounds.size.width - 20 - 80, self.view.bounds.size.height - 20 - 35, 80, 35);
    3. btn1.backgroundColor = [UIColor lightGrayColor];
    4. [self.view addSubview:btn1];
    6. UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
    7. btn2.frame = CGRectMake(self.view.bounds.size.width - 20 - 80, 20, 80, 35);
    8. btn2.backgroundColor = [UIColor lightGrayColor];
    9. [self.view addSubview:btn2];

    步骤二：设置Button的autoresizingMask属性，进行Autoresizing布局

    通过设置Button的autoresizingMask属性，进行Autoresizing布局，autoresizingMask属性是UIViewAutoresizing的枚举类型。

    首先使用代码分别将btn1相对于父视图的上边距和左边距固定，即将btn1.autoresizingMask设置为UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin。

    然后使用代码分别将btn2相对于父视图的下边距和左边距固定，即将btn2.autoresizingMask设置为UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin，代码如下所示：

     
    1. //设置button的Autoresizing布局属性，将按钮btn1相对于父视图的上边距和左边距固定
    2. btn1.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
    3. //将btn2相对于父视图的左边距和下边距固定
    4. btn2.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;

    2.4 完整代码

    本案例中，TRViewController.m文件中的完整代码如下所示：

     
    1. #import "TRViewController.h"
    3. @implementation TRViewController
    5. - (void)viewDidLoad
    6. {
    7. [super viewDidLoad];
    8.     UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeSystem];
    9. btn1.frame = CGRectMake(self.view.bounds.size.width - 20 - 80, self.view.bounds.size.height - 20 - 35, 80, 35);
    10. btn1.backgroundColor = [UIColor lightGrayColor];
    11. [self.view addSubview:btn1];
    13. UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeSystem];
    14. btn2.frame = CGRectMake(self.view.bounds.size.width - 20 - 80, 20, 80, 35);
    15. btn2.backgroundColor = [UIColor lightGrayColor];
    16. [self.view addSubview:btn2];
    18. //设置button的Autoresizing布局属性，将按钮btn1相对于父视图的上边距和左边距固定
    19. btn1.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
    20. //将btn2相对于父视图的左边距和下边距固定
    21. btn2.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
    22. }
    23. @end
     

    3 演示自动布局技术（AutoLayout）

    3.1 问题

    自动布局技术（AutoLayout）是从iOS6开始的一个新的布局技术，在iOS7中开始广泛使用，从iOS8开始和size classes结合使用。

    本案例将学习如何使用自动布局技术（AutoLayout）进行界面布局，如图-13、图-14所示：

    图-13

    图-14

    3.2 方案

    首先创建一个SingleViewApplication项目，在Storyboard的场景界面中的左上角、左下角、右上角、右下角和中间分别放置一个Button控件。

    然后通过工具依次给每一个Button添加自动布局的约束，完成布局。

    3.3 步骤

    实现此案例需要按照如下步骤进行。

    步骤一：创建项目，添加按钮控件

    首先创建一个SingleViewApplication项目，在Storyboard的场景界面中的左上角、左下角、右上角、右下角和中间分别放置一个Button控件，并在右边栏的检查器四中设置Button的属性，界面搭建完成如图-15所示：

    图-15

    步骤二：进行自动布局

    首先选中Storyboard中的场景，在右边栏的检查器一中将Use Auto Layout和Use Size classes选项勾上（默认情况下是勾上的），如图-16所示：

    图-16

    然后选中左上角的按钮，点击编辑界面右下方的添加约束工具栏上的第二个按钮，在弹出的窗口上，给按钮添加上边距和左边距的约束（点亮红线即可），点击Add 2 Constraints即完成将约束对象添加到视图上，如图-17所示：

    图-17

    再选中右上角的按钮，以同样的方式给按钮添加上边距和右边距的约束。然后选中上方的两个按钮，点击编辑界面右下方的添加约束工具栏上的第一个按钮，设置两个按钮的对齐方式水平居中对齐，如图-18所示：

    图-18

    此时选中按钮，可以在右边的检查器五中查看约束情况，也可以对约束进行编辑和调整，如图-19所示：

    图-19

    然后按照以上方式设置下方两个按钮的约束和对齐方式。在选中左边上下的两个按钮，将两个按钮的对齐方式设置为垂直居中对齐，如图-20所示：

    图-20

    右边两个按钮也以同样的方式设置为垂直居中对齐。最后设置中间按钮的布局，始终保持在屏幕的水平中心和垂直中心即可，如图-21所示：

    图-21

    这样就完成了整个界面的布局设置。

    4 代码的方式使用自动布局技术

    4.1 问题

    当界面上的控件是由代码创建时，此时就只能使用代码的方式对该控件进行布局设置。本案例将学习如何通过代码的方式逐步添加约束，进行自动布局设置，使界面中的按钮始终保持在右上角，如图-22、图-23所示：

    图-22

    图-23

    4.2 方案

    首先同样的创建一个SingleViewApplication项目，在TRViewController.m文件的viewDidLoad方法中创建一个UIButton控件，设置相关属性，将按钮放置在屏幕的右上角。

    然后确认Use AutoLayout功能被打开，在viewDidLoad方法中用代码将按钮的Autoresizing的翻译功能关闭，如果不将其关闭自动布局会自动将Autoresizing功能翻译成约束，造成约束冲突。

    再在viewDidLoad方法中通过NSLayoutConstraint类的工厂方法constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:给button对象创建每一个约束。

    最后将约束对象添加到父视图中。

    4.3 步骤

    实现此案例需要按照如下步骤进行。

    步骤一：创建项目，添加按钮控件

    首先创建一个SingleViewApplication项目。在TRViewController.m文件的viewDidLoad方法中创建一个Button控件，并将其添加到父视图中，这里需要注意自动布局功能开启时，在viewDidLoad方法中设置控件的frame属性无效，frame是根据自动布局设置自动计算出来的，代码如下所示：

     
    1. UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    2. button.backgroundColor = [UIColor lightGrayColor];
    3. [button setTitle:@"我是按钮" forState:UIControlStateNormal];
    4. [self.view addSubview:button];

    然后在检查器中确认Use AutoLayout功能被打开。在viewDidLoad方法中用代码将按钮的Autoresizing的翻译功能关闭，即将button的translatesAutoresizingMaskIntoConstraints属性设置为NO。如果不将其关闭自动布局会自动将Autoresizing功能翻译成约束，造成约束冲突，代码所示：

     
    1. button.translatesAutoresizingMaskIntoConstraints = NO;

    步骤二：使用代码的方式添加约束

    在viewDidLoad方法中通过NSLayoutConstraint类的工厂方法constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:给button对象创建每一个约束，本案例中需要给button创建四个约束，代码如下所示：

     
    1. //距离右边20点：button.right = self.view.right * 1.0 + (-20);
    2. NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    3. //距离上边20点：button.top = self.view.top * 0.0 + 20;
    4. NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:0.0 constant:20];
    5. //固定宽度100
    6. NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0.0 constant:100];

    最后将约束添加到父视图中，代码如下所示：

     
    1. [self.view addConstraint:constraint1];
    2. [self.view addConstraint:constraint2];
    3. [self.view addConstraints:@[constraint3, constraint4]];

    4.4 完整代码

    本案例中，TRViewController.m文件中的完整代码如下所示：

     
    1. #import "TRViewController.h"
    3. @implementation TRViewController
    5. - (void)viewDidLoad
    6. {
    7. [super viewDidLoad];
    8.     UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    9. button.backgroundColor = [UIColor lightGrayColor];
    10. [button setTitle:@"我是按钮" forState:UIControlStateNormal];
    11. [self.view addSubview:button];
    12. //关闭Autoresizing的翻译功能(将Autoresizing的默认值自动翻译成约束)
    13. button.translatesAutoresizingMaskIntoConstraints = NO;
    15. //创建约束
    16. //距离右边20点：button.right = self.view.right * 1.0 + (-20);
    17. NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    18. //距离上边20点：button.top = self.view.top * 0.0 + 20;
    19. NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:0.0 constant:20];
    20. //固定宽度100
    21. NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0.0 constant:100];
    22. //固定高度40
    23. NSLayoutConstraint *constraint4 = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0 constant:40];
    24. //加入到父视图中
    25. [self.view addConstraint:constraint1];
    26. [self.view addConstraint:constraint2];
    27. [self.view addConstraints:@[constraint3, constraint4]];
    28. }
    29. @end
     

    5 使用VFL创建多个约束

    5.1 问题

    由上一个案例可以看出，逐个创建约束对象会使代码非常的繁琐，IOS提供了一种更简便的方式VFL，即Visual Format Language可视格式化语言帮助我们进行代码创建约束对象，本案例将学习如何使用VFL创建约束对象，如图-24、图-25所示：

    图-24

    图-25

    5.2 方案

    首先同样的创建一个SingleViewApplication项目，在TRViewController.m文件的viewDidLoad方法中创建三个UIButton控件button1、button1和button3，设置相关属性，并将按钮添加到父视图中。

    然后确认Use AutoLayout功能被打开，同样的在viewDidLoad方法中用代码将按钮的Autoresizing的翻译功能关闭，如果不将其关闭自动布局会自动将Autoresizing功能翻译成约束，造成约束冲突。

    再在viewDidLoad方法中通过VFL和工厂方法constraintsWithVisualFormat: options: metrics: views:给每一个button对象创建一组约束对象。

    最后将约束对象添加到父视图中。

    5.3 步骤

    实现此案例需要按照如下步骤进行。

    步骤一：创建项目，添加按钮控件

    首先创建一个SingleViewApplication项目。在TRViewController.m文件的viewDidLoad方法中创建三个Button控件，并将其添加到父视图中，这里需要注意自动布局功能开启时，在viewDidLoad方法中设置控件的frame属性无效，frame是根据自动布局设置自动计算出来的，代码如下所示：

     
    1. UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    2. button1.backgroundColor = [UIColor lightGrayColor];
    3. [button1 setTitle:@"Button1" forState:UIControlStateNormal];
    4. [self.view addSubview:button1];
    5. UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    6. button2.backgroundColor = [UIColor lightGrayColor];
    7. [button2 setTitle:@"Button2" forState:UIControlStateNormal];
    8. [self.view addSubview:button2];
    9. UIButton *button3 = [UIButton buttonWithType:UIButtonTypeSystem];
    10. button3.backgroundColor = [UIColor lightGrayColor];
    11. [button3 setTitle:@"Button3" forState:UIControlStateNormal];
    12. [self.view addSubview:button3];

    然后在检查器中确认Use AutoLayout功能被打开。在viewDidLoad方法中用代码将按钮的Autoresizing的翻译功能关闭，即将button1、button2和button3的translatesAutoresizingMaskIntoConstraints属性设置为NO。如果不将其关闭自动布局会自动将Autoresizing功能翻译成约束，造成约束冲突，代码所示：

     
    1. button1.translatesAutoresizingMaskIntoConstraints = NO;
    2. button2.translatesAutoresizingMaskIntoConstraints = NO;
    3. button3.translatesAutoresizingMaskIntoConstraints = NO;

    步骤二：使用VFL创建约束

    通过VFL和工厂方法constraintsWithVisualFormat: options: metrics: views:给每一个button对象创建一组约束对象，先给三个按钮创建水平约束，代码如下所示：

     
    1. //创建VFL字符串
    2. NSString *VFLString = @"|-20-[b1]-10-[b2(==b1)]-10-[b3(==b2)]-20-|";
    3. //根据VFL创建一组约束对象
    4. NSArray *constraits = [NSLayoutConstraint constraintsWithVisualFormat:VFLString options:NSLayoutFormatAlignAllCenterY metrics:nil views:@{@"b1":button1, @"b2":button2, @"b3":button3}];
    5. //将约束添加到父视图中
    6. [self.view addConstraints:constraits];

    然后再创建垂直约束，代码如下所示：

     
    1. //创建VFL字符串，V表示垂直约束
    2. VFLString = @"V:|-20-[b1]";
    3. //根据VFL字符串创建约束对象
    4. constraits = [NSLayoutConstraint constraintsWithVisualFormat:VFLString options:0 metrics:nil views:@{@"b1":button1}];
    5. //将约束对象添加到父视图中
    6. [self.view addConstraints:constraits]；

    5.4 完整代码

    本案例中，TRViewController.m文件中的完整代码如下所示：

     
    1. #import "TRViewController.h"
    3. @implementation TRViewController
    5. - (void)viewDidLoad
    6. {
    7. [super viewDidLoad];
    8.     UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    9. button1.backgroundColor = [UIColor lightGrayColor];
    10. [button1 setTitle:@"Button1" forState:UIControlStateNormal];
    11. [self.view addSubview:button1];
    12. UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    13. button2.backgroundColor = [UIColor lightGrayColor];
    14. [button2 setTitle:@"Button2" forState:UIControlStateNormal];
    15. [self.view addSubview:button2];
    16. UIButton *button3 = [UIButton buttonWithType:UIButtonTypeSystem];
    17. button3.backgroundColor = [UIColor lightGrayColor];
    18. [button3 setTitle:@"Button3" forState:UIControlStateNormal];
    19. [self.view addSubview:button3];
    20. //1. 关闭Autoresizing的自动翻译
    21. button1.translatesAutoresizingMaskIntoConstraints = NO;
    22. button2.translatesAutoresizingMaskIntoConstraints = NO;
    23. button3.translatesAutoresizingMaskIntoConstraints = NO;
    24. //2. 创建约束
    25. NSString *VFLString = @"|-20-[b1]-10-[b2(==b1)]-10-[b3(==b2)]-20-|";
    26. NSArray *constraits = [NSLayoutConstraint constraintsWithVisualFormat:VFLString options:NSLayoutFormatAlignAllCenterY metrics:nil views:@{@"b1":button1, @"b2":button2, @"b3":button3}];
    27. //3. 将约束加入到父视图
    28. [self.view addConstraints:constraits];
    30. VFLString = @"V:|-20-[b1]";
    31. constraits = [NSLayoutConstraint constraintsWithVisualFormat:VFLString options:0 metrics:nil views:@{@"b1":button1}];
    32. [self.view addConstraints:constraits];
    34. }
    36. @end
  • 相关阅读:
    代码抄袭检测系统的设计和实现(1)--需求分析和基础架构
    Protobuf C/C++实战笔记(1)
    自动构建Makefile(1)--C/C++编译流程&Makefile规则简介
    初识storm
    Ubuntu 16.04LTS安装Nginx
    redis内存监控与回收
    RabbitMQ交换机规则实例
    git合并分支上指定的commit
    git忽略掉文件权限检查
    git修改文件权限方式
  • 原文地址：https://www.cnblogs.com/52190112cn/p/5049456.html
Copyright © 2020-2023  润新知