今天要製作一個客製化的UI

客製化UI有幾種方式

• Code
• StoryBoard
• Nib

那麼這三個方式各有各自的優缺點，這次我要挑選的方式是使用Nib製作我的客製化UI

Nib是什麼？

NeXT Interface Builder的縮寫，非常難懂沒錯

簡單的通俗解釋是 Describe Interface Builder(描述Interface Builder)

透過這些檔案去描述打造介面

Nib 跟 Xib 又有什麼差別？

基本上Nib跟Xib是同一個東西，只是差別在於使用xib為純文本，nib為編譯過後的二進制

首先建立我要的專案

將這個客製化UI作為我的登錄界面

1. 在專案新增一個xib和swift檔

用xib描述UI該長什麼樣子

1. swift檔用來定義Class跟繼承UIView
   2. 使用MainView.xib
   3. 使用MainView.swift

2. 在xib檔案中我們要使用客製化的UI

2. 客製化Xib

1. 首先會先看到一個空白的View
   

   但我們需要的是一個格子，但是我又拉伸不了格子該怎麼辦

   該去更改右上角的設定，更改為Freedom

   

   將所有我要用的textfield放入所設定好的UIView當中
   

3.要讓這個xib成為跟我的MainView.Swift檔產生連接

常規上來說有三種方式

1. 透過file owner
2. 透過Custom class
3. 兩者都使用

目前想要我會使用file owner當方式去執行

如果想要知道另外兩個方式怎麼使用，歡迎參考下方網址連結
(Understanding Custom UIView In-depth)

使用file owner方法

1. 將設計好的Xib的file owner屬性添加Class

   • 將設計好的xib右上角添加Class
   • 

   這邊的Class是說file owner的類型，==而非與MainView產生連結==
   要產生連結要在MainView.swift檔案中，添加程式碼去綁定

2. 在MainView.swift之下透過Code加載Xib檔案

3. 最後在主視圖新增UIView，將要呈現的UIView繼承我所設計的MainView.swift檔案

今天算是客製化UI的一個簡單介紹，實作部分會留在下一個篇

參考連結

What is a nib?

Understanding Custom UIView In-depth: Setting File Owner vs custom class

Swift - 創建自定義視圖（CustomView）