最終效果圖:

完整代碼:https://github.com/vega627/HudViewDemo
建立一個簡單的HUD步驟分為三個:
一. 構(gòu)造函數(shù)
通常情況下我們通過下面一行代碼創(chuàng)建新的hudVIew對象
let hudVIew = HudView()
但是通過便利構(gòu)造函數(shù)我們這樣寫
let hudView = HudView.hudInView(parentView, animated: true)

在這里使用便利構(gòu)造函數(shù)(convenience constructor)的好處在于我們可以把對視圖的初始化都封裝進(jìn)這個構(gòu)造函數(shù)內(nèi),用戶只需要調(diào)用這個hudInView函數(shù)就可以了。
1處 我們使用了UIView的構(gòu)造函數(shù)init(frame: CGRect)創(chuàng)建了一個覆蓋整個視圖的HudView實體對象hudView,并設(shè)置為全透明。
2處 將建立的實體對象hudView作為子視圖加入到父視圖view中,并將userInteractionEnabled屬性設(shè)置為false,使得view及其所有子視圖對一切手勢動作不做出響應(yīng)。
3處 調(diào)用HudView類中的我們自定義的showAnimated方法,使得hudView動起來,最后將這個hudView實體返回給構(gòu)造函數(shù)。
二. HUD樣式
用到Core Graphics和UIKit框架的子類(此處為繼承了UIView的子類的HudView),想要自定義圖像,都需要重寫此方法并在此方法中構(gòu)造畫圖的代碼。
此方法被調(diào)用時,UIKit已經(jīng)構(gòu)造了便于我們創(chuàng)建視圖的舒適的構(gòu)圖環(huán)境,此時我們可以調(diào)用任意的構(gòu)圖方法和函數(shù)來創(chuàng)建我們HUD的視圖。

1處 設(shè)置HUD圖形的樣式
首先定義HUD的寬度和高度,定義兩個常量便于在需要的時候改變參數(shù)。
用CGRect方法建立HUD的圖形hudRect,寬度和高度用到上面定義的常量,位置居于視圖中央。
通過init(roundedRect rect: CGRect, cornerRadius: CGFloat)方法將上面定義的hudRect矩形處理成圓角矩形,cornerRadius為角的弧度,數(shù)字越大,角越圓滑,大家可以通過改變參數(shù)來觀察。
2處 向HUD添加圖標(biāo)
返回文件名為Checkmark的圖標(biāo),并設(shè)置圖標(biāo)要放置的位置imagePoint。調(diào)用drawAtPoint(point: CGPoint)方法放置圖標(biāo)。
3處 向HUD添加文字
大家下載源文件后,可以發(fā)現(xiàn)HudView類在一開始就定義了text變量。接下來就是對text的樣式和位置的設(shè)定。
調(diào)用sizeWithAttributes(attrs: [String : AnyObject]?)將定義的包含文字大小和顏色的attirbs鍵值對賦給text。
類似地,調(diào)用drawAtPoint(point: CGPoint, withAttributes attrs: [String : AnyObject]?)方法設(shè)置文字位置和屬性。
三. 動畫效果
上文在HudView的構(gòu)造函數(shù)中我們對實例hudView調(diào)用了showAnimated方法,這里我們詳細(xì)介紹。
首先要知道的是,基于UIView的動畫制作流程如下,步驟有三:
1)設(shè)置動畫開始前視圖的狀態(tài)。
2)調(diào)用animateWithDuration方法來建立動畫。
3)在閉包內(nèi)設(shè)置動畫結(jié)束時候視圖的狀態(tài)。

1處 設(shè)置動畫的初始狀態(tài),alpha設(shè)置為0使得HUD視圖完全透明不可見。同時設(shè)置一個CGAffineTransform類型的參數(shù)備用,這里用到了CGAffineTransformMakeScale(sx: CGFloat, _ sy: CGFloat)方法我們暫時不深究。
2處 調(diào)用func animateWithDuration(…)方法建立動畫,在animations閉包內(nèi)設(shè)置了結(jié)束狀態(tài)。此處參數(shù)有五個:

(Spring Animation參考資料:http://www.renfei.org/blog/ios-8-spring-animation.html?utm_source=tuicool&utm_medium=referral)
到這里,我們就完成了HudView的制作,接下來該怎么調(diào)用呢?
上文中說過,HUD的動畫已經(jīng)在構(gòu)造函數(shù)中調(diào)用了,所以我們只需要在用到HUD的地方創(chuàng)建一個HudView的實體就可以了。

demo中HUD是在點按doneBarButton后彈出的,所以在done方法體內(nèi)創(chuàng)建一個hudView。由于此例子中Done可以表示添加完成一個條目,也可以表示修改完成一個條目。hudView的text內(nèi)容就需要根據(jù)是添加還是修改條目進(jìn)行判斷了。不管是哪樣,修改text只需要短短一行hudView.text = "..."就搞定了。