IBInspectable / IBDesignable

無論陳詞濫調(diào)多少次,比起一個需要我們記住并且輸入什么的界面來說,如果替換成我們能夠看見并可控制的界面的話將會是巨大的進步。 Xcode 6 提供了這樣一個替代,在舊技術(shù)上建立新的互動。在設(shè)計項目的時候建立一個自定義的界面使你可以配置自定義控制并將它們實時顯示出來,用 IBInspectable 和 IBDesignable,這將成為可能。
IBInspectable
IBInspectable 屬性提供了訪問舊功能的新方式:用戶自定義的運行時屬性。從目前的身份檢查器(identity inspector)中訪問,這些屬性在 Interface Builder 被整合到 Xcode 之前就可用了。他們提供了一個強有力的機制來配置一個 NIB,XIB,或者 storyboard 實例中的任何鍵值編碼(key-value coded)屬性:

1425002825634401.png

雖然功能強大,運行時屬性可能會使工作很繁瑣。一個屬性的關(guān)鍵字路徑,類型和屬性值需要在每個實例設(shè)置,沒有任何自動完成或輸入提示,這就需要前往文檔或自定義子類的源代碼仔細檢查設(shè)置。 IBInspectable 屬性徹底的解決了這個問題:在 Xcode 6,你現(xiàn)在可以指定任何屬性作為可檢查項并為你的自定義類建立了一個用戶界面。
例如,在一個 UIView 子類里,這些屬性用它們的值來更新背景層:

@IBInspectable 
var
 cornerRadius: CGFloat = 0 {

   
didSet {

       
layer.cornerRadius = cornerRadius

       
layer.masksToBounds = cornerRadius > 0

   
}

}

@IBInspectable 
var
 borderWidth: CGFloat = 0 {

   
didSet {

       
layer.borderWidth = borderWidth

   
}

}

@IBInspectable 
var
 borderColor: UIColor? {

didSet {
  layer.borderColor = borderColor?.CGColor
}
}

標有 @IBInspectable(或是 Objective-C 中的 IBInspectable),他們就可以很容易在 Interface Builder 的觀察面板(inspector panel)里編輯。需要注意的是 Xcode 在這里做了更多的事,屬性名稱是從 camel- 轉(zhuǎn)換為 title- 模式 并且相關(guān)的名稱組合在一起:

1425002961197264.png

因為可檢查屬性僅僅是用戶定義的運行時屬性頂部的接口,所以支持相同的類型列表:布爾,字符串和數(shù)字(即,NSNumber 或任何數(shù)值類型),以及 CGPoint、CGSize、CGRect、UIColor 和 NSRange,額外增加了 UIImage。
那些已經(jīng)熟悉運行時屬性的人將注意到在上面的例子中有一些問題。UIColor 是里面唯一支持色彩的類型,而不是原生支持視圖 CALayer 的 CGColor。borderColor 會計算 UIColor 屬性(通過運行時屬性設(shè)置)并映射到該層需要的 CGColor。
讓現(xiàn)有的類型可觀察
內(nèi)置的 Cocoa 類型如果在 Interface Builder 中的屬性檢查器中沒有列出也可以通過擴展來使屬性可視。如果你喜歡圓角,你一定會喜歡這個 UIView 擴展:

extension UIView {

    
@IBInspectable 
var
 cornerRadius: CGFloat {

        
get {

            
return
 layer.cornerRadius

        
}

        
set {

            
layer.cornerRadius = newValue

            
layer.masksToBounds = newValue > 0

        
}

    
}

}

變!你創(chuàng)建的任何 UIView 都將有一個可配置的邊界半徑。
IBDesignable
如果這還不夠,IBDesignable 自定義視圖也在 Xcode 6 中亮相了。當(dāng)應(yīng)用到 UIView 或 NSView 子類中的時候,@ IBDesignable 讓 Interface Builder 知道它應(yīng)該在畫布上直接渲染視圖。你會看到你的自定義視圖在每次更改后不必編譯并運行你的應(yīng)用程序就會顯示。
標記一個自定義視圖為 IBDesignable,只需在類名前加上 @IBDesignable 的前綴(或是 Objective-C 里的 IB_DESIGNABLE 宏)。你的初始化、布置和繪制方法將被用來在畫布上渲染你的自定義視圖:

@IBDesignable

class MyCustomView: UIView {

    
...

}

1425003188898953.png

從這個功能上節(jié)約的時間是不能被低估的。加上 IBInspectable 屬性,一個設(shè)計師或開發(fā)人員可以輕松地調(diào)整自定義控件的呈現(xiàn),以得到她想要的確切的結(jié)果。任何改變,無論是從代碼或?qū)傩詸z查器中,都將立即呈現(xiàn)在畫布上。
此外,任何問題都是可避開編譯和運行整個程序來調(diào)試的。調(diào)試的方法很簡單,只需在你的代碼中設(shè)置一個斷點,在 Interface Builder 中選擇視圖,并選擇 Editor ? Debug Selected Views。
由于在 Interface Builder 中呈現(xiàn)自定義視圖不會有應(yīng)用程序的完整上下文,你可能需要生成模擬數(shù)據(jù)以便顯示,例如一個默認用戶頭像圖片或仿制的天氣數(shù)據(jù)。有兩種方法可以為這個特殊的上下文添加代碼:
prepareForInterfaceBuilder():此方法與你代碼的其余部分一起編譯,但只有當(dāng)視圖正在準備在 Interface Builder 顯示時執(zhí)行。

TARGET_INTERFACE_BUILDER:#if TARGET_INTERFACE_BUILDER 預(yù)處理宏在 Objective-C 或 Swift 下都是工作的,它會視情況編譯正確代碼:

#if !TARGET_INTERFACE_BUILDER

    
// this code will run in the app itself

#else

    
// this code will execute only in IB

#endif

IBCalculatorConstructorSet
把自定義 IBDesignable 視圖和視圖里的 IBInspectable 屬性結(jié)合在一起,你能干點啥?作為一個例子,讓我們更新老式經(jīng)典 Apple folklore:在“Steve Jobs Roll Your Own Calculator Construction Set”,Xcode 6 的風(fēng)格:

1425003062655435.gif

現(xiàn)在你差不多已經(jīng)眼見為實了,那讓我們來看看更多的圖片吧。你用這些強大的新工具創(chuàng)造了什么?把你的 IBInspectable 或 IBDesignable 創(chuàng)作加上話題 #IBInspectable po 成一張圖片,我們都可以看看還可以學(xué)到些什么。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 14,996評論 4 61
  • IBInspectable 和 IBDesignable 出現(xiàn)之前,實現(xiàn)圓角這樣的效果,可以通過硬編碼或者xib/...
    默芥子閱讀 628評論 2 2
  • 今天我參加統(tǒng)計證后續(xù)教育網(wǎng)上培訓(xùn)課程,其中選修了“時間管理”,一直以來我感覺我的時間管理方面還有很大的提升空間。所...
    紅富士可愛閱讀 374評論 0 0
  • 看完這本書,我立即想再讀一遍。書看的是PDF版,插一些小空看的,看到好的句子,恨不能把字從上面摳下存起來,因為我知...
    柳二白閱讀 392評論 0 0
  • 寫這篇文章之前首先一定要釋放自己的吐槽能量,即上個禮拜使用webpack重構(gòu)了jQuery實現(xiàn)了后端技術(shù)做前...
    邵蓬閱讀 1,204評論 0 1

友情鏈接更多精彩內(nèi)容