Auto Layout: Programmatic Constraints - BNR

  继续Auto Layout - BNR篇。

打开BNRDetailViewController.m文件,重载viewDidLoad方法来创建UIImageView对象。当你想要给通过加载NIB文件创建的视图层级添加约束时,需要重载viewDidLoad方法。如下:

1 - (void)viewDidLoad {
2     [super viewDidLoad];
3
4     UIImageView *iv = [[UIImageView alloc] initWithImage:nil];
5     iv.contentMode = UIViewContentModeScaleAspectFill;
6     iv.translatesAutoresizingMaskIntoConstraints = NO;
7     [self.view addSubview:iv];
8     self.imageVeiw = iv;
9 }

  每个视图都有一个 translatesAutoresizingMaskIntoConstraints 属性,默认为YES,即iOS会自动创建一些约束来匹配视图自动调整。

  Apple推荐使用Visual Format Language(VFL)来程序化创建约束。



VFL:一种用字符串常量来描述约束的方式。

   @"H:|-0-[imageView|-0-" ,其中H:指该约束是针对水平位置的。方括号内的imageView指要约束的视图。符号|表示视图的容器。此字符串表示:imageView离其容器左右边缘的距离为0点。同时,可简化为: @"H:|[imageView|"

   @"V:[dateLabel]-8-[imageView]-8-[tooBar]" ,其指imageView的顶部离dateLabel的距离为8点,imageView的底部离tooBar的距离为8点。可简化为: @"V:[dateLabel]-[imageView]-[tooBar]"

   @"V:[someView(==50)]" ,指视图的高度约束为50点。



  一个约束即NSLayoutConstraint类的对象,可将其添加到一个视图中。

修改viewDidLoad方法,创建imageView水平和垂直方向的约束。如下:

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3
 4     UIImageView *iv = [[UIImageView alloc] initWithImage:nil];
 5     iv.contentMode = UIViewContentModeScaleAspectFill;
 6     iv.translatesAutoresizingMaskIntoConstraints = NO;
 7     [self.view addSubview:iv];
 8     self.imageVeiw = iv;
 9
10     NSDictionary *nameMap = @{@"imageVeiw":self.imageVeiw, @"dateLabel":self.dateLabel, @"toolBar":self.toolBar};
11     NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[imageVeiw]-0-|"
12                                                                              options:0
13                                                                              metrics:nil
14                                                                                views:nameMap];
15     NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[dateLabel]-[imageVeiw]-[toolBar]"
16                                                                            options:0
17                                                                            metrics:nil
18                                                                              views:nameMap];
19 }

NSLayoutConstraint的类方法constraintsWithVisualFormat:options:metrics:views的第四个参数为:视觉格式化字符串中的名字与视图层级中的名字的映射。



添加约束的规则:

1)如果一个约束影响了两个具有相同父视图的view,则约束应添加到父视图中。

2)如果一个约束只影响到一个视图,该约束应添加到其所影响的视图中。

3)如果一个约束影响了两个不具有相同父视图的view,但共享一个ancestor,则该ancestor获得该约束。

4)如果一个约束影响一个视图和其父视图,则该约束添加到父视图中。

  因此,在viewDidLoad方法中,将创建的约束添加到父视图中,添加如下粗体代码:

1     NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[dateLabel]-[imageView]-[toolBar]"
2                                                                            options:0
3                                                                            metrics:nil
4                                                                              views:nameMap];
5     [self.view addConstraints:horizontalConstraints];
6     [self.view addConstraints:verticalConstraints];


  Intrinsic Content Size:指一个视图的大小基于其要显示的内容。

contentCompressionResistancePriority 当其值小于1000时,Auto Layout可能压缩视图。

contentHuggingPriority 当其值小于1000时,Auto Layout可能增加视图的大小。

viewDidLoad方法添加代码如下:

1     ......
2     self.imageVeiw = iv;
3
4     [self.imageVeiw setContentHuggingPriority:200 forAxis:UILayoutConstraintAxisVertical];
5     [self.imageVeiw setContentCompressionResistancePriority:700 forAxis:UILayoutConstraintAxisVertical];
6     ......


创建基于比率的约束时,不能使用VFL,此时需要用到NSLayoutConstraint类的 constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant: 类方法。其中multiplier属性是创建基于比率约束的关键。

1 NSLayoutConstraint *aspectConstraint = [NSLayoutConstraint constraintWithItem:self.imageVeiw
2                                                                         attribute:NSLayoutAttributeWidth
3                                                                         relatedBy:NSLayoutRelationEqual
4                                                                            toItem:self.imageVeiw
5                                                                         attribute:NSLayoutAttributeHeight
6                                                                        multiplier:1.5
7                                                                          constant:0.0];

添加的约束相当于 imageVeiw.width = 1.5 * imageVeiw.height + 0.0 。



  autoresizing masks:约束一个视图和其父视图的关系,但不会影响同级视图间的关系。默认情况下,会基于autoresizing masks,给视图创建和添加约束。但其经常会与用程序代码添加的约束发生冲突。此时,只需将视图的 translatesAutoresizingMaskIntoConstraints 属性设为NO即可。

时间: 2024-11-02 21:41:22

Auto Layout: Programmatic Constraints - BNR的相关文章

iOS Programming Auto Layout: Programmatic Constraints 自动布局:通过编程限制

iOS Programming? Auto Layout: Programmatic Constraints? 1.? However, if your views are created in code, then you will need to constrain them programmatically. 如果你的view是由代码创建的,那么你需要用编程限制它了. To have a view to work with, you are going to recreate the im

Chapter 16 Auto layout: Programmatic Constraints

1. The line of code regarding translating constraints has to do with an older system for scaling interfaces - autoresizing masks. Before Auto Layout was introduced, iOS applications used autoresizing masks to allow views to scale for different-sized

Auto Layout Guide----(二)-----Auto Layout Without Constraints

Auto Layout Without Constraints 没有约束的自动布局 Stack views provide an easy way to leverage the power of Auto Layout without introducing the complexity of constraints. A single stack view defines a row or column of user interface elements. The stack view a

Auto Layout Guide----(一)-----Understanding Auto Layout

Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered

Auto Layout Guide----(三)-----Anatomy of a Constraint

Anatomy of a Constraint 剖析约束 The layout of your view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. Your goal is to declare a series of equations that has one and only one possible solution. A samp

iOS 使用LayoutGuide 来限制控件的位置,配合Auto Layout constraints

UIButton *button = [UIButton buttonWithType:UIButtonTypeDetailDisclosure]; [self.view addSubview:button]; [button setTranslatesAutoresizingMaskIntoConstraints: NO]; // 得到当前视图的最低基准限制,这个是对于Auto Layout constraint来说的. id bottomGuide = self.bottomLayoutGu

Day3 : Auto layout 和 JVFloatLabeledTextfield框架 学习笔记

为了可以优化项目的UI,为了可以使用JVFloatLabeledTextfield框架来构建文本输入框(动画效果超赞),今天重点学习了Auto Layout(以下简称AL)技术,主要是了解AL的工作原理,并且要掌握用代码添加constraints. 1.JVFloatLabeledTextfield JVFloatLabeledTextfield框架可以让文本框呈现一个漂浮的PlaceHolder,简洁.明确.生动.而这个框架另一个让我大开眼界的是他利用AL技术画直线,做出一个简单的表单页面.画

iOS屏幕适配方案-Auto Layout

市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己的方法-auto Layout . 本人初学iOS.今天学了自己主动布局.在学习的过程中,毕竟还是有些知识点没有接触到的,因此写这篇博客来深入的了解一下Auto Layout. 官方解释: Auto Layout 是一个系统,能够让你通过创建元素之间关系的数学描写叙述来布局应用程序的用户界面.--<

【转 iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束

原文网址:http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生.本篇文章将详细介绍如何使用自动布局实现不同屏幕尺寸的适配. 添加自动布局约束(下文简称约束)有以下三种方式: 使用Xcode的Interface Builder界面设计器添加并设置约束 通过代码逐条添加约束 通过可视化格式语言VFL添加约束 本文将以一个简单的例子来演示如何使用这几种方式添加约束,