Autolayout 01

Auto Layout Concepts

auto layout的基本概念是constraint（约束）。表示了你interface中的layout元素。例如，你可以创建一个约束来指定元素的宽度或者距离另一个元素的水平距离。你可以添加或者移除约束或者改变约束的属性来作用你的interface的布局。

当计算user interface运行时候的位置时，auto layout系统会在同一时间考虑所有的约束并且设置能最好满足约束的位置。

Constraint Basics

属性囊括left, right, top, bottom, leading, trailing, width, height, centerX, centerY, baseline. constant value: 以points为单位的物理大小或者offset. Relation: Auto layout支持更多。你可以使用关系和不等式比如greater-than-or-equal来说明。例如，一个view的宽度>=20。priority level。约束有优先级。默认的优先级是必须的。(NSLayoutPriorityRequired),意思是约束必须完全满足。layout系统会尽可能的满足一个可选的约束，即使不能完全实现这个约束。

优先级允许你表达有用的条件选择。例如，他们被用来表示一些控件应当总是重置大小来填充他们的contents。除非一些更加重要的出现。

约束是积累的，并且不会彼此覆盖。如果你有一个现存的约束，设置同样类型的约束不会覆盖之前的。例如，设置一个view的第二个宽度约束不会移除或者改变第一个约束宽度。你需要手动移除第一个约束。

约束可以和一些限制条件贯穿存在于view层中。在os x的mail app中，例如，默认的删除按钮在toolbar里与信息一起。

你不能设置贯穿view层的约束如果层中包含一个在layoutSubviews方法中自定义的手动设置的subviews。也不可能贯穿有bounds改变的人和views，例如scroll view。你可以认为这种情况下，有一个里面和外面的世界，但是里面的世界无法通过约束来连接到外面的世界。

Intrinsic Content Size

leaf-level views例如buttons比代码更清楚应当在什么位置。这通过intrinsic content size来告知layout系统一个view包含一些content并不是由来就被理解的并且指示这个content多大。

再比如text labels等，你应当设置元素的intrinsic size通过Editor->Size To Fit Content.这个意味着元素将grow并且shrink根据不同语言的content.

Working with Constraints in Interface Builder

添加，编辑或者移除约束的最简单方法是使用interface builder中的可视化layout tools。你可以简单得使用不同的pop-up窗口。

Adding Constraints

当添加好一个控件，但是并没有添加约束，你会发现运行时候不论device的方向时怎样的，这个控件的宽度和高度总是一样的。而且总是记住了左上角的相对位置。即便重置window的大小也无法移除或者重置元素的大小。为了让你的interface能正确的改变大小或者方向，你就需要开始添加约束了。

下面是几种添加约束的方法。

Adding Constraints with Control-Drag

添加约束最快的方法就是ctrl+drag一个view。

Adding Constraints with Align and Pin Menus

使用auto layout menu功能。

 

 

Align : 创建校准约束，例如在容器内居中一个view或者校准两个view的左边缘。

Pin: 创建间隔约束，例如定义一个view的高度或者指定他同其他view的水平间距。

Issues : 解决layout问题通过根据建议添加或者重新设置约束的方法。

Resizing:指出resizing如何作用于约束。

 

如果你只有一个元素被选择，那么约束选项需要多个元素的对应选项就无法选择。

To add a constraint from the Align or Pin menu

 

1. Select the checkbox next to the appropriate constraint.

To select a “Spacing to nearest neighbor” constraint, select the red constraint corresponding to the appropriate side of the element.

 

If you need to create a constraint related to another view that is not the nearest neighbor, click the black disclosure triangle in the value text field to display a drop-down menu of other nearby views.

2. Enter a corresponding constant value.

3. Press a button to create the constraints.

   The Add Constraints button adds the new constraints to the selected elements.

   The Add and Update Frames button adds the new constraints to the selected elements, and moves the elements in your interface to satisfy every constraint as well as possible.