使用輔助線
顯示 UI 元素間的相對位置
通過任意錨點獨立改變元素尺寸
在層疊區(qū)域快速精確地拾取特定元素
使用輔助線
Storyboard / Interface Builder 提供了輔助線 (Guide) 功能互捌,通過它可以精確、方便地控制界面元素的布局百宇。
添加輔助線
包含輔助線的視圖相對其父視圖的位置無論如何變化,它的輔助線相對它都是固定不變的躬柬。
1. 輔助線隸屬于特定視圖 (View)焦蘑。所以,添加前需要先選定待添加輔助線的視圖弥喉。選定的方法有兩種:
o 鼠標(biāo)雙擊視圖郁竟,使其周圍出現(xiàn)透明的圓角邊框以選定它。添加的輔助線屬于該視圖由境,輔助線的初始位置是該視圖的水平或垂直中心棚亩;
o 鼠標(biāo)單擊選定特定元素。添加的輔助線屬于該元素的父視圖虏杰,輔助線的初始位置是該元素的中心點在其父視圖中的水平或垂直位置讥蟆。
2. 選定視圖后,通過 Xcode->Editor 菜單中的 Add Horizontal Cuide 或 Add Vertical Guide 命令可在該視圖中添加紅色的 “水平輔助線” 或 “垂直輔助線”纺阔。
當(dāng)然瘸彤,也可以使用鍵盤快捷鍵:
o 添加 “水平輔助線”:?+_ (command+shift+-)
o 添加 “垂直輔助線”:?+| (command+shift+)
快捷鍵
橫向輔助線
? Cmd + | -------> ? Shift+? Cmd + \
豎向輔助性-H
? Cmd+_ -------> ? Shift+? Cmd + -
移動輔助線
把鼠標(biāo)靠近輔助線,當(dāng)光標(biāo)變成移動形狀時按住拖拽即可移動它笛钝。拖拽過程中质况,輔助線上、下玻靡,或左结榄、右的數(shù)字表示輔助線距其所在視圖上、下邊界啃奴,或左潭陪、右邊界的距離(單位:邏輯點)。
使用輔助線
在包含輔助線的視圖中添加元素后,移動元素靠近輔助線時依溯,輔助線會由紅色實線變成藍(lán)色虛線老厌,表明該元素已捕獲到了輔助線,從而完成對它的精確布局黎炉。
刪除輔助線
按移動輔助線的方法把輔助線移出其所屬視圖的邊界枝秤,看到紙團(tuán)銷毀的動畫并聽到“嗖”地一聲,就表明輔助線已經(jīng)成功刪除慷嗜。
顯示 UI 元素間的相對位置
Storyboard / Interface Builder 提供了自動標(biāo)注 “控件/視圖” 間相對位置的功能淀弹。具體操作步驟:
1. 鼠標(biāo)單擊選中目標(biāo) “控件/視圖”;
2. 按住 option (?) 鍵庆械,同時把鼠標(biāo)光標(biāo)移動到待檢測的相關(guān) “控件/視圖” 上薇溃,就可看到類似下圖中自動標(biāo)注的尺寸。
通過任意錨點獨立改變元素尺寸
在 Storyboard / Interface Builder 的 “File inspector > Interface Builder Document” 面板中缭乘,勾選 “Use Autolayout” 后沐序,有些元素(如 UIView 或 UIButton 等)無法通過 “選定&拖拽(錨點)” 的方式改變大小堕绩;或者只能通過右策幼、下、右下角錨點拖拽改變奴紧,而通過左特姐、上、左上角錨點拖拽時黍氮,雖然尺寸可以改變唐含,但整個 Screen 都跟著移動。這種情況下滤钱,“選定” 目標(biāo)后觉壶,先按住command (?) 鍵再 “拖拽” 任意錨點就不會有問題了。
在層疊區(qū)域快速精確地拾取特定元素
在 Storyboard / Interface Builder 中多個控件層疊的區(qū)域件缸,要拾取指定元素铜靶,可以通過編輯窗口左側(cè)導(dǎo)航面板中的視圖層級樹逐級展開查找并拾取,但這種做法繁瑣且不直觀他炊。有種更便捷的操作:
1. 同時按住 control (?) 和 shift (?) 鍵争剿;
2. 用鼠標(biāo)點擊目標(biāo)元素所在區(qū)域,會彈出一個列表視圖痊末,列出了點擊點處由根視圖到最頂層元素的所有元素蚕苇;
3. 在彈出的列表視圖所展示的點擊處 “局部” view hierarchy 中快速直觀地選定目標(biāo)元素。
轉(zhuǎn)載:http://blog.sina.com.cn/s/blog_6f9a97180102v9gp.html