天天看點

IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder

Working with Constraints in Interface Builder

The easiest way to add, edit, or remove constraints is to use the visual layout tools in Interface Builder. Creating a constraint is as simple as Control-dragging between two views, or to add multiple constraints at once, you simply use the various pop-up windows.

添加、編輯、移除限制最簡單的方法是使用界面生成器的可視化布局工具。建立一個限制就像在兩個View之間拖拽一樣簡單,你甚至可以一次添加多個限制,你需要做的僅僅是使用一些彈出的視窗而已。

Important: Although Xcode does not generate a warning or an error when you build a user interface that does not have appropriate constraints, you should not ship your application in such a state.

重要的是:盡管當你建構的界面沒有适當的限制的時候,Xcode不會報錯或者發出警告,你還是應該盡量避免你的應用進入着這種狀态。

There are several ways to add constraints depending on the level of precision you want and the number of constraints you want to add at a time.

這裡有幾種方法添加限制,依據的是你所想要的精度标準和一次添加限制的數量。

Adding Constraints with Control-Drag(通過拖拽添加限制)

The fastest way to add a constraint is by holding down the Control key and dragging from a view on the canvas, much like the way you create links to outlets or actions. This Control-drag method is a quick, precise tool for creating a single constraint when you know exactly what type of constraint you want and where you want it.

You can Control-drag from an element to itself, to its container, or to another element. Depending on what you drag to and which direction you drag in, Auto Layout limits the possibilities of constraints appropriately. For example, if you drag horizontally to the right from an element to its container, you have the options to pin the element’s trailing space or to center it vertically in the container.

IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder

添加一個限制最快的方法是按住control鍵從事圖拖動到畫布上,就像你建立outlet和action。當你要建立一個你知道想要類型和地方的限制的時候,這種拖動的方法是一種在當你清晰地知道你需要的那種限制,同時知道哪裡找到這個限制的情況下,建立一個限制的快捷而清晰的工具的工具。

你可以從一個元素本身可是拖動,拖動到一個父容器或者另外一個元素。自動布局會根據你拖拽到的元素和你拖拽的方向來限制合适的限制。舉個例子,如果你水準的從一個元素拖拽到它的容器,你會有個選項圖(如上圖:):the element’s trailing space(元素領先容器的空間), center it vertically in the container.(位于容器垂直方向的中心)

(水準拖動:leading center)

IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder

Tip: To select multiple constraints at a time from the Control-drag menu, hold down the Command or Shift key.

提示:通過按住command鍵或者shift鍵,你可以一次選擇多個限制

Adding Constraints with Align and Pin Menus(通過對齊和周圍菜單添加限制)

You can also add constraints using the Auto Layout menu, which resides on the Interface Builder canvas.

你也可以使用自動布局菜單添加限制,自動布局菜機關于界面生成器的畫布上

IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder

In addition to adding constraints for alignment or spacing, you can also use this menu to resolve layout issues, and determine constraint resizing behavior.

IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder
  • Align. Create alignment constraints, such as centering a view in its container, or aligning the left edges of two views.
  • Pin. Create spacing constraints, such as defining the height of a view, or specifying its horizontal distance from another view.
  • Issues. Resolve layout issues by adding or resetting constraints based on suggestions (see Resolving Auto Layout Issues).
  • Resizing. Specify how resizing affects constraints .

除了添加居中和距離限制,你也可以使用這個菜單來解決布局問題,決定限制如何改變大小的行為。

  • 對齊。建立對齊限制,比如centering a view in its container(居于容器視圖中央),對齊兩個視圖的左邊緣。
  • 定住。建立距離限制,比如定義視圖的高度,或者指定這個視圖和兩一個視圖的水準距離
  • 問題。通過根據建議添加或者設定限制來解決布局問題。(詳見文章:《解決自動布局問題》)
  • 改變大小。指定何種方式限制影響視圖的改變。
IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder

Constraint options that require multiple elements are disabled if you have only a single element selected.

如果你隻選擇了一個元素的話多元素限制選項會被禁用。

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.

    IOS 自動布局指南3:限制在界面生成器内是如何工作的 Working with Constraints in Interface Builder
    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.

1 選擇“臨近的适合限制”的複選框              選擇一個“最近元素的距離”限制,點選合适方向的限制紅線以選擇。         如果你建立的限制關系到的另一個視圖不是最近的一個怎麼辦呢?點選黑色的三角展開按鈕,會展開一個選擇菜單,然後你就能選擇限制的對象了 2 輸入相應的值 3 點選建立限制按鈕:         “添加新限制”按鈕給選擇的元素添加新的限制。         “添加和更新架構按鈕”給選擇的元素添加新的限制,同時按照你指定的限制移動界面元素

Note: You’re adding brand new constraints every time you click one of the two buttons. You are not editing existing constraints. For information about editing existing constraints, see Editing Constraints

注意:你每次點選以上兩個按鈕中的一個來添加新的限制。可是你并沒有編輯已有的限制。關于編輯已有限制的資訊,請看(編輯限制)。

Adding Missing or Suggested Constraints(添加缺失的的和建議的限制)

Use the Issues menu to add constraints if you need a starting point for your layout, or if you need to make a lot of changes quickly.

If you need to add a large set of constraints to describe your interface layout and you don’t want to add constraints one at a time, choose Issues > Add Missing Constraints to add a nonambiguous set of constraints. This command infers constraints based on where things are laid out.

If you need to revert to a set of constraints without errors, or you just want to start over, choose Issues > Reset to Suggested Constraints to remove erroneous constraints and add a nonambiguous set of constraints. This is equivalent to Clear Constraints followed by Add Missing Constraints.

    如果你需要對你的項目開始布局,或者需要快速布局,你可以使用問題慘淡添加限制。     如果你需要為你的項目添加很多限制或者不願意一次隻添加一個限制,你可以這樣做:選擇  issues>add missing  constrants 然後添加一些确定的限制設定。這個指令依據的是對象們現在的布局。     如果你需要重新無差錯的重置限制設定,或者你僅僅是想要重新開始,選擇issues> Reset to Suggested Constraints 來移除錯誤的限制,同僚天劍正确的限制,這個操作相當于先清除限制,然後添加限制。

Editing Constraints(編輯限制)

You can change the constant, relation, and priority of a constraint. You can edit these properties either by double-clicking the constraint on the canvas and editing the value, or by selecting the constraint and using the Attributes inspector. You cannot, however, change the type of a constraint (for example, you can’t change a width constraint into a height constraint).

你可以更改限制的常數,關系,和優先級。你可以通過在畫布上輕按兩下限制來修改這些屬性,或者通過選擇限制使用屬性檢查器來搞。盡管如此,你不能更改限制的種類,(舉例:你不能把寬度限制改成高度限制)。

Deleting Constraints(删除限制)

Delete any constraint at any time by selecting it on the canvas or in the outline view and pressing the Delete key.

你可以在任何時候通過在畫布上或者大綱視圖上選擇限制并且按下删除鍵