自动布局和Visual Format Language 简要介绍

假设有一个按钮,你想把它放置在屏幕的中央。视图中心和按钮中心的相对位置可以简单地定义成如下:

  按钮的center.x相当于视图中心的center.x

  按钮的center.y相当于视图中心的center.y

苹果发现很多的UI组件的位置可以使用一个简单的方程等式得到解决:

   Object1.property1=(object2.property2*multiplier)+constant value

例如:使用这个方程式,我们可以很容易地将一个按钮放置到他的父视图中,如下所示:     

  Button.center.x=(button.superview.center.x*1)+0

  Button.center.y=(button.superview.center.y*1)+0

2.

前面涉及到的公式被封装到了iOS SDK中的 NSLayoutConstraint 类中。 你创建的每个约束条件(如这个类的一个实例)都只代表唯一的一个约束。例如,如果你想将按钮放在其容器的中间,你必须将按钮的x和y方向的位置都设置为中间。这意味着你需要设置两个约束条件。

  如果限制条件位于一个公共的父视图的两个视图之间的,意味着这些视图具有相同的父视图,那么就将限制条件添加到父视图中;

  限制条件是在一个视图和其的父视图之间的,那么将限制条件添加到其父视图中;

  如果限制条件是两个不共享同一个父视图的视图之间的,那么将限制条件添加到这两个视图的公共父视图中。

如图(介绍了限制条件和它们要添加到的视图之间的关系图)

3.

可以通过NSLayoutConstraint 类中的 constrainWithItem:attribute:relatedBy:toItem:attribute:multiiler:constant: 方法创建。方法中的参数都有:
constraintWithItem
这是一个id 类型的参数代表之前方程式里的object1。
Attribute
这个参数代表方程式里的property1,并且应该是NSLayoutAttribute 类型的。
relatedBy
这个参数代表方程式里的equals。这个参数的值是NSLayoutRelation 类型的。并且你即将会知道,在这里你不仅可以将其指定为等号,也可以将其指定为大于号或者
小于号。我们将会详细讨论。
toItem
这个参数是id 类型的,在这个方程式里代表object2。

Attribute
这个参数是NSLayoutAttribute 类型的并且在此方程中代表property2。
Multiplier
这个参数是CGGloat 类型的并且在此方程中代表multiplier。

Constant

这个参数也是CGFloat类型的并且在此方程中代表constant value。

在创建完限制条件后,就可以使用任意一个UIView类中的这些方法简单地将它们添加到合适的视图中(参考上图):

   addConstraint: 这个方法可以将单一的NSLayoutConstraint类型的限制条件添加到视图中。

   addConstraints: 这个方法允许你添加一个限制条件数组到视图中。这些限制条件必须是包含在NSArray类型中的NSLayoutConstraint类型。

4.

自定布局的设置意味着会产生更多的NSLayoutConstraint类型的限制条件。你会注意到你的代码越来越庞大,并变得越来越难以维护。因此,苹果已经创建了Visual Format language(可视化格式语言),通过它你可以使用简单的ASCII码来表达你的限制条件,如果有两个按钮你想将它们在水平方向相隔100像素,你可以使用Visual Format language代码来表达,如下:

[button1]-100-[button2]

Visual Format Language中的限制条件是通过NSLayoutConstraint类中的constrainsWithVisualFormat:ptions:metrics:views:的类方法。下面简单解释一下方法中每个参数:

constraintsWithVisualFormat 这是Visual Format Language的表达式,被写成了NSString。

Options 这是一个NSLayoutFormatOption类型的参数。对于Visual Format Language,我们通常将这个参数设置为0。

Metrics 一个字典常量值,将会在Visual Format Language表达式中使用到。为了简单一点,目前我们将会传入nil值。

Views 这是一个视图字典,你将会在这个方法的第一个参数写限制条件。为了构造这个字典,简单地使用NSDIctionaryOfVaribleBindings C函数并传递你的视图到这个方法里。它将会为你构造这个字典。在这个字典的关键字是视图的名字,你将会在方法的第一个参数中使用它。对这些东西有点陌生,请不用担心,担心也是没有任何意义的。当你看了一些例子之后你就会豁然开朗的。

constraint[ 英]k?n?stre?nt 限制,约束

Attribute [英][??tr?bju:t] 属性;特性

multiplier[英][?m?lt?pla??(r)] 乘数

时间: 2024-08-24 20:32:29

自动布局和Visual Format Language 简要介绍的相关文章

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

使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手投稿 6 23450 Auto Layout自动布局VFL 招聘信息: 高级iOS开发工程师 高级PHP开发工程师 iOS高级研发工程师 iOS开发工程师 高级iOS手机应用软件开发工程师(培训讲师) 高级Cocos2d-x游戏开发工程师(培训讲师) iOS手机软件开发工程师 iOS工程师 Web后

Visual Format Language(VFL)视图约束

约束(Constraint)在IOS编程中非常重要,这关乎到用户的直接体验问题. IOS中视图约束有几种方式,常见的是在IB中通过Pin的方式手动添加约束,菜单Editor->Pin->...但是我们往往需要更为灵活的操作,那么就要手动编写代码来实现这些操作. 1:长函数方法 Apple的工程师给我们提供了两种方式,第一种用长函数方法的形式 NSLayoutConstraint(item: <#AnyObject#>, attribute: <#NSLayoutAttribu

使用 Visual Format Language 定义水平和垂直约束

1.问题: 想要定义限制条件来改变一个 UI 组件在其父视图的水平和垂直方向布局的方法. 2.讨论: 使用 visual Format Language 在水平方向的限制条件使用的三个例子 : H:|-100-[_button]-100-| H:|-(<=100)-[_button(>=50)]-(<=100)-| H:|-[_button(>=100,<=200)] V:[_button]-(>=100)-| (注意:为了让程序看起来整齐一致并使设计者更容易做出决定,

Autolayout 中的Visual format language

一.什么时候用autolayout比较适合 1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用应该都使用al.(并且用sb) 2.要看应用内容决定.如果你的内容是信息众多,同时需要展示的类别也很多,尺寸动态不定,甚至这些是在列表中的.(如社交应用).Al能给于很大的帮助. 3.Mac os的应用.现在都做iOS了.mac app的窗口,会有大小变化.al比较合适. 4.支持多向转屏的iPad应用.(有需要支持多方向iphone场景么?那么长,脑残了?) 5.其他业务不复杂,页面较少的

iOS - Visual Format Language

关于autolayout. 1. 尽量用storyboard,添加约束方便直观. 2. 不能用storyboard添加到,考虑 Visual Format Language构建约束 - 直观,易读,代码少 3. 使用NSLayoutAttribute构建约束 - 易读,代码太TM多了 这里以几个例子说明介绍Visual Format Language Visual Format Language是通过设置垂直(V)和水平(H)方向上,view与其它view的间距来实现view的定位.用以下代码添

Autolayout + VFL(Visual Format Language)

最近在学习iOS的布局,在storyboard里,确定布局的思路: 1.确定能确定的: 2.无法确定的,看看是否可以想办法和其他控件关联起来,再根据关系来确定能确定的位置. 例子:实现如下图的布局 过程: 1.确定能确定的: 左上角的View,左边和上边距离父view的距离都是0(当然,这里假设了view的宽度和高度都是100) 设置完成后,点击Add 4 Constraints即可,现在界面如下所示; 左边View Controller Scene后面有个黄色图标,该图标的意思是警告的意思,是

在UIScrollView中使用Auto Layout中的VFL(Visual format language)

上一篇VFL(Visual format language)的文章中讲了一些基本用法.传送门http://www.cnblogs.com/wupei/p/4150626.html. 这篇简单的讲解下UIScrollView下的自动布局.UIScrollView有一个contentSize所以,他跟其他的view不一样.其他的view你只需要指定他的四个边距,或者能固定他的大小就行.但是UIScrollView不行,约束写不好可能会导致滚动不了,或者报错或一堆警告.但是理解了他的原理就很容易去做到

Visual Format Language

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage.html#//apple_ref/doc/uid/TP40010853-CH27-SW1 Visual Format Language This appendix shows how to use the Auto Layout Visual Format Lan

Autolayout 中的 Visual format language

一.什么时候用autolayout比较适合 1.不负责任的骑墙派说法:apple的设备越来越多了,你的应用应该都使用al.(并且用sb) 2.要看应用内容决定.如果你的内容是信息众多,同时需要展示的类别也很多,尺寸动态不定,甚至这些是在列表中的.(如社交应用).Al能给于很大的帮助. 3.Mac os的应用.现在都做iOS了.mac app的窗口,会有大小变化.al比较合适. 4.支持多向转屏的iPad应用.(有需要支持多方向iphone场景么?那么长,脑残了?) 5.其他业务不复杂,页面较少的