Autolayout 03

Debugging in Code

有两个调试layout问题的阶段。

1. Map from “this view is in the wrong place” to “this constraint (or these constraints) is (are) incorrect.”

2. Map from “this constraint is incorrect” to “this code is incorrect.”

To debug a problem with Auto Layout

 

1. Identify the view with an incorrect frame.
   It may be obvious which view has the problem; if it is not, you may find it helpful to use the NSView

   method _subtreeDescription to create a textual description of the view hierarchy.

2. If possible, reproduce the issue while running under the Auto Layout template in Instruments.

3. Find the bad constraint or constraints.

   To get the constraints affecting a particular view, use constraintsAffectingLayoutForOrientation: in OS X or constraintsAffectingLayoutForAxis: in iOS.

　　  4.If it’s not obvious which constraint is wrong at this point, visualize the constraints on screen by passing the constraints to the window using visualizeConstraints:.

　　　　When you click a constraint, it is printed in the console. In this way you can you can determine which is which, and typically identify which is incorrect.

 

　　　　At this point you may be informed that the layout is ambiguous.

　　5. Find the code that’s wrong.
　　　　Sometimes, once you have identified the incorrect constraint, you will know what to do to fix it.

　　　　If this is not the case, then use Instruments to search for the pointer of the constraint (or some of its description). This will show you interesting events in that constraint’s lifecycle—its creation, modification, installation into windows, and so on. For each of these you can see the backtrace where it happened. Find the stage at which things went awry, and look at the backtrace. This is the code with the problem.

 

Auto Layout by Example

Auto Layout 使得自动解决复杂的layout问题很容易。而且不需要手动的操作。通过创建正确的约束，你可以创建在代码中难以掌控的layout。例如同等空间的view调整适应方向或者大小的变动。scroll view中作用于滚动内容大小的元素。或者scroll view中不滚动的元素。

Using Scroll Views with Auto Layout

当你在app中使用auto layout时，scroll view将会是一个挑战。滚动内容大小必须设置正确用户才能够滚动到可视区域。例如，如果你需要为了地图缩放和说明在scroll view的顶部设定一个contextual view，是很难确定这些元素不会跟着其他的content一起滚动。

Controlling Scroll View Content Size

scroll view的content大小取决于他的子节点的约束。

To set the size of a scroll view 如何设置scroll view的大小

1. Create the scroll view.创建scroll view
   

2. Place the UI element inside it. 在scroll view中放置UI元素
   

3. Create constraints that fully define the width and height of the scroll view content.创建能够定义scroll view content高度和宽度的约束
   

必须保证为scroll view中的每一个子view都定义了约束。例如，当为一个没有固定content size的view定义约束时，你需要不仅仅定义一个leading edge约束，你必须也创建trailing edge， width， 和高度约束。不能缺少从一个scroll view edge到其他的约束。

Creating Anchored Views Inside a Scroll View 在scroll view中创建固定的views

你可能发现有时候你需要在scroll view中创建一块无法滚动的区域。你通过创建一个container view来完成这个目标。

To lock a view inside a scroll view

1. Create a container view to hold the scroll view.  创建一个container view来保存这个scroll view
   

2. Create the scroll view and place it in the container view with all edges equal to zero points. 创建一个scroll view并且把他放置在所有的edges都是0的container view中
   

3. Create and place a subview inside of the scroll view. 在scroll view中创建并放置一个subview
   

4. Create constraints from the subview to the container view.创建这个subview痛container view之间的约束
   

以下是例子的具体执行步骤：

首先，创建一个container view来包含之后的scroll view。把container view大小设置为想要的scroll view的大小。

然后，在这个container view中创建一个scroll view，并且重新规定scroll view的大小所有的边框都覆盖到container view中，设置distance为0

然后创建一个text view到scroll view中。

当放置好text view后，创建从text view到container view的约束。创建约束讲text view锚到container view中。确保scroll view不会滚动这个text view。

为了在view层中创建一个贯穿多个view的约束，一般简单的方法是选择这个view，然后ctrl＋drag到interface builder outline view的container view中去。

在约束的覆盖图中，设置想要的约束。