本文譯自:8 Tips for working effectively with Interface Builder(需翻牆)
先來看看目錄:
- 介紹
- 使view的Size與view中的Content相適應
- 按住option鍵—觀察所選中view與另外view邊緣之間的距離
- Editor –> Embed In View, Unembed:
- 在不影響subview的位置時給view自由的添加padding
- 對不在最前端的view進行移動
- IBOutletCollection排序
- 使用自定義屬性
- MoarFonts——字體定製:所見即所得
介紹
在JoyTunes工作期間,我們在開發最新一版的鋼琴應用程序,對程序的UI做了大量的重新設計,因而也在Interface Builder上花費了許多時間,對於圖片和view的縮放操作,非常的讓人不省心。不過在開發過程中,我們發現了許多非常不錯的IB使用技巧,我尋思着這必須要跟大家分享,所以成就了這篇文章。
免責聲明: 在JoyTune工作期間,我們使用的是.xib文件(不是storyboards),並且沒有使用Auto Layout。實際上這主要是歷史原因導致的。所以,這裏介紹的一些技巧可能稍微有點不同(如果你使用storyboard或Auto Layout),不過大多數都是一樣的。
1. 使view的Size與view中的Content相適應
很慚愧的是最近才發現這個功能——能節約大量時間。 選中任意的一個view,然後Editor->Size to Fit Content,或者簡單的按 ⌘= 接着就會按照下面的規則對選中view的Size做出與之Content對應的適應。
- ImageView/Button的size會設置爲圖像的原始size(最常見的用法):
- Label/Button的size會被設置爲與當前text內容相當的尺寸:
- parent container view會與其subviews的frames相適應。
2. 按住option鍵—觀察所選中view與另外view邊緣之間的距離
按住option鍵之後,選擇一個view,然後將鼠標懸停在別的一些view上,會看到一些距離——選中view與別的view邊緣之間的距離。
3. Editor –> Embed In View, Unembed:
你是不是對此素手無策呢:你希望將已有的一些subviews放入到不同的parent view中,甚至是不同的.xib文件中,但是當你把一些view重新設置之後,它們爲自動的位於新的parent view中心?
現在好了,我們有一個解決辦法,如下圖所示:
4. 在不影響subview的位置時給view自由的添加padding
當試圖給view添加padding時,默認情況下subview的x和y是不會改變的,但是有時候我們並不希望是這樣的結果。我發現一個最好的方法,就是在按住⌘時拖動view的邊緣:
5. 對不在最前端的view進行移動
剛開始我還以爲要想移動不在最前端的view是不可行的。
有一種方法就是先將非最前端的view臨時設置到最前端,移動好位置之後,在設置回去。
另外一種方法就是使用右邊panel中的size inspector,不過有時候要想設置一個好的位置,需要不斷的猜測和修正。
另外我發現一種方法:使用鍵盤上的上下左右鍵來移動view——這還不用把view設置爲最前端:
- 在document outline中選中view
- 爲了獲得view的焦點:單擊root view的frame
- 利用箭頭進行移動
提醒: 獲得view的焦點還有一個更好的方法:在document outline上雙擊view,就可以用箭頭移動view了。
6. IBOutletCollection排序
有時候IBOutletCollection裏面元素的順序對我們來說非常重要:我們希望按某個順序對其進行迭代。
有一種方法:在代碼裏面利用x/y/tag對其做排序處理,然後在迭代。
實際上,沒必要這麼做。IBOutletCollection的順序取決於我們dragged connection的順序,可以通過^+單擊 File’s Owner來查看當前的順序:
7. 使用自定義屬性
可能這個功能是IB中很少被使用的:使用Identity inspector中的User Defined Runtime Attributes(用戶自定義運行時屬性)在view上設置自定義屬性:
在此我定義了一個JTLabel類,我們可以設置它的stroke color和width,這樣一來我們就不用在代碼裏面設置相關屬性了。
利用這個功能很好的一例子就是Canvas,通過它不用寫一行代碼就能定義相關的動畫。
8. MoarFonts——字體定製:所見即所得
在Interface Builder中字體的定製是個非常麻煩的事情。IB並沒有內置該功能,我用過比較好的解決辦法就是使用自定義屬性——就像Canvas一樣,或者使用字體替換技術——例如IBCustomFonts。這些都是有效的方案,不過他們有一個致命的缺點——它們不能給我們一種WYSIWYG(所見即所得)的體驗,當然,這也是爲什麼我們會第一時間使用Interface Builder的原因。
爲了知道給label設置的自定義字體是否合適,我們必須要運行程序才能知道結果——這有點讓人不能接受。
最近我發現了一個新的解決辦法:使用MoarFonts。賣價10美元,沒有demo,沒有試用——不過請相信,這非常值得購買!它的使用方法非常簡單:將MoarFonts當做script build phase,然後build app,接着重啓Xcode,就可在Interface Builder中看到定製的字體。
打完收工!希望這些技巧對你能有所幫助。