从登入画面开始做起（上）Day3

今天要制作一个客制化的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）