你所不知道的Interface Builder / Storyboard 使用技巧


  1. 使用輔助線

  2. 顯示 UI 元素間的相對位置

  3. 通過任意錨點獨立改變元素尺寸

  4. 在層疊區(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凿叠,一起剝皮案震驚了整個濱河市涩笤,隨后出現(xiàn)的幾起案子嚼吞,更是在濱河造成了極大的恐慌,老刑警劉巖蹬碧,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舱禽,死亡現(xiàn)場離奇詭異,居然都是意外死亡恩沽,警方通過查閱死者的電腦和手機(jī)誊稚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來罗心,“玉大人里伯,你說我怎么就攤上這事〔趁疲” “怎么了疾瓮?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長飒箭。 經(jīng)常有香客問我爷贫,道長,這世上最難降的妖魔是什么补憾? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮卷员,結(jié)果婚禮上盈匾,老公的妹妹穿的比我還像新娘。我一直安慰自己毕骡,他們只是感情好削饵,可當(dāng)我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著未巫,像睡著了一般窿撬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叙凡,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天劈伴,我揣著相機(jī)與錄音,去河邊找鬼握爷。 笑死跛璧,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的新啼。 我是一名探鬼主播追城,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼燥撞!你這毒婦竟也來了座柱?” 一聲冷哼從身側(cè)響起迷帜,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎色洞,沒想到半個月后戏锹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡锋玲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年景用,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惭蹂。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡伞插,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盾碗,到底是詐尸還是另有隱情媚污,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布廷雅,位于F島的核電站耗美,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏航缀。R本人自食惡果不足惜商架,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望芥玉。 院中可真熱鬧蛇摸,春花似錦、人聲如沸灿巧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抠藕。三九已至饿肺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盾似,已是汗流浹背敬辣。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留颜说,地道東北人购岗。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像门粪,于是被迫代替她去往敵國和親喊积。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,941評論 2 355