[Auto Layout Guide] 如何在Interface Builder使用Constraints (Working with Constraints in Interface Builder)

日期：

增加, 編輯, 或移除constraints最簡單的方法就是使用Interface Builder裡視覺化的排版工具.建立一個constraint和在兩個views之間拖曳一樣簡單, 或者是一次增加多種的constraints, 你可以簡單的使用不同的彈出視窗.
新增Constraints
當你從物件庫裡拖出一樣元件並且將他放在Interface Builder裡, 一開始是沒有constrained以方便簡單的使用拖拉來prototype你的介面. 如果你執行了一個沒有任何constraints的元件, 你會發現Interface Builder會固定這個元件的寬和高, 並將位置對齊在superview的左上角; 這意思是如果將視窗放大縮小並不會影響到這個元件. 為了讓你的介面可以正確的改變大小或適應方向, 你需要開始加入constraints.

重要: 當你沒有在介面上使用適合的constraints, 即使Xcode沒有產生警告或錯誤, 你不該在這種狀態下送出你的應用程式.

有幾種不同的方法來新增constraints, 取決於你想要多精細還有你想要一次增加多少個constraints
使用拖曳(Control-Drag)的方式增加Constraints
最快增加constraint的方式就是按住Control然後將一個view拖曳到畫面上, 就像是你在建立動作連結一樣. 當你知道你想要哪一種constraint並且擺放在哪裡的時候, 拖曳是一個快速準確的方法來創建一個單獨的constraint.
你可以在元件的身上拖曳到元件的容器裡, 或是拖到其他元件. 取決於你想要拖什麼或是你想拖到哪個方向. Auto Layout適當的限制了constraints的可能性. 例如：如果你將一個元件水平的往右拖到他的容器, 你可以選擇這元件的trailing要多大, 或是直接將它擺在容器的中央垂直點.

../Art/al_menu_2x.png

小秘訣: 如何從選單裡一次選擇多個constraints, 按住Command 或 Shift.

使用Align 和 Pin的選單來增加Constraints 

你也可以使用在Interface Builder裏的Auto Layout menu來增加constraints
使用alignment or spacing來增加constraint, 你也可以直接使用這個選單來解決介面的問題和決定constraint的大小行為.
../Art/al_menu_callouts.png
  • Align. 建立對齊的 constraints, 就像是將view對齊在正中央或是對齊兩個view的左邊.
  • Pin. 建立空白的 constraints, 就像是定義view的高度, 或是從另一個view來定義水平的距離.
  • Issues. 藉由增加或重設constraints來解決排版的問題 (參照 Resolving Auto Layout Issues).
  • Resizing. 具體說明如何放大縮小 constraints .
../Art/align_and_pin_menus_2x.png
如果你只有選擇單一元件, Constraint的多重元件的選項就會無法選擇

從Align 或 Pin 選單來增加constraint

  1. 選擇constraint旁的checkbox
    • 要選擇一個 “Spacing to nearest neighbor” constraint, 選擇你想要的紅色方位的這個constraint ../Art/spacing_to_nearest_neighbor.png
    • 如果你需要建立一個跟其他不是最靠近的view有關的constraint ,點選 text field裏旁邊黑色的小箭頭來顯示其他附近的view
  2. 輸入一個適合的值
  3. 按下按鈕來新增constraints.
  • Add Constraints 的按鈕可以新增constraints到選擇的元件上
  • Add 和 Update Frames 的按鈕新增constraints到選擇的元件上, 並會移動你介面上的元件以盡可能滿足每一個constraint 

  • 提醒: 你點選這兩個按鈕其中一個都是在增加新的constraints. 你並不是在編輯已經存在的constraints. 更多有關編輯存在的constraints, 請看 Editing Constrait
    • 加入缺失的或是建議的Constraints
    如果你需要一個起始點或你需要很快地做大量的改變, 使用Issues menu來增加constraints.
    如果你需要增加很多constraints來展示介面,而且你不想要一次全加進去, 點選Issues > Add Missing Constraints來增加一些非不明確的constraints. 這指令的constraints都是基於那些缺失的地方.
    如果你需要無錯誤的回復一些constraints, 或你只是想要重新開始, 選擇 Issues > Reset to Suggested Constraints to remove erroneous constraints and add a nonambiguous set of constraints. 這同等於是清除那些因為缺失而被加進來的Constraints.

    編輯Constraints

    你可以改變constraint的常數, 關係和優先度. 你可以雙擊畫面上的constraint來編輯這些屬性, 或選擇這個constraint然後使用屬性的視窗. 但你無法改變constraint的類型 (例如：你無法改變width的constraint到height constraint).

    刪除Constraints

    點選畫面上的元件,在任何時間刪除任何constraint或在outline view直接點選 Delete key.


    留言

    張貼留言