提高Interface Builder高效工作的8個技巧

本文譯自:8 Tips for working effectively with Interface Builder(需翻牆)


先來看看目錄:

  1. 介紹
  2. 使view的Size與view中的Content相適應
  3. 按住option鍵—觀察所選中view與另外view邊緣之間的距離
  4. Editor –> Embed In View, Unembed:
  5. 在不影響subview的位置時給view自由的添加padding
  6. 對不在最前端的view進行移動
  7. IBOutletCollection排序
  8. 使用自定義屬性
  9. 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中看到定製的字體。

打完收工!希望這些技巧對你能有所幫助。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章