Swift-Xib自定義的元件 Custom UIView

Lin
4 min readOct 18, 2018

--

iOS UIkit 提供簡單的基本元件,但是有時候為了需求往往需要將多個元件整合到一個View元件中,此時就是自定義View

1.:純程式碼(程式碼創建元件、約束佈局)

2.:xib (元件創建與約束) + 程式碼(對象化管理)

  1. 公共初始化方法(保證程式碼初始化和xib初始化一致,使用者程式碼和xib都調用來初始),如果是使用xib自定義,程式碼使用元件時一定要保證元件已經加載。
  2. 保證UIView的兩個初始化方法都可以進行相同的初始化(通過程式碼創建自定義視圖和在XIB),因為兩種方式(如下a.b)調用的初始化方法不一致,你需要在重寫兩個初始化中保證同樣的初始操作(小技巧:創建一個commonInit然後調用)

a.程式碼:init(frame:CGRect) — 使用程式碼直接創建自定義元件時被調用的

b.IB/xib:init(coder aDecoder:NSCoder) — 當自定義元件在XIB中使用的時候被調用

3.約束佈局

需要保證獲取正確的frame

對象元件.setNeedsLayout() //需要更新標誌
對象元件.layoutIfNeeded() // 更新操作
// 之後就可以獲取到佈局後的正確frame
// 注意不可以在layoutSubviews中執行 self.這兩個方法,否則會循環

1、創建和設置xib文件
創建一個空的View(兩個選一個都可以,如果選擇Empty則需要自己拖一個view到畫布),命名為MyView,如下圖

2.默認的空View和手機頁面大小一致的,為了可以改變視圖的大小,在屬性檢查器中設置size為freeform,將topBar也設置為none,如下圖:

3.選擇view上方的file Owner,將其Custom class設置為MyView(這裡需要先繼承UIview,生成一個MyView的類文件),這樣才可以保證將自定義元件添加到類中。

注意:設置custom class的時候一定不能選擇View,讓它默認為UIView

4.在View中添加子元件,並設置約束

2、創建基於UIView的子類

為了能夠讓自定義控件的一些屬性像系統控件一樣可以在檢查其中直接設置(可視化設置)並且同步顯示,需要使用

@IBDesignable【OC:IB_DESIGNABLE】 和@IBInspectable[OC:IBInspectable]

1.生成一個和xib文件名一樣的繼承UIview的子類(MyView)

2.將xib文件的元件添加鏈接到類中,包括最底層的View【重點】

3.做可視化屬性的設置

4.定義初始化器(注意還需要從xib文件中加載視圖放在其中)

注意:在創造一個swift檔案時,需先自訂好Class 例如:class: MyView: UIView

才可以拉IBOutlet Assistant

備註:如果是UIViewController子類別創建對應的xib文件,如下圖

注意如果沒顯示出來

--

--