The HUD

我還打算對(duì)這個(gè)界面做一個(gè)很重要的改進(jìn)，當(dāng)你點(diǎn)擊Done按鈕關(guān)閉這個(gè)界面時(shí)餐抢，彈出一個(gè)小窗口洽议，顯示Tagged，告訴用戶操作成功了挂疆。這樣的小細(xì)節(jié)會(huì)使用戶體驗(yàn)非常棒改览。

這個(gè)覆蓋一個(gè)界面的功能通常被叫做HUD（Heads-Up Display下翎，又是一個(gè)不太好翻譯的術(shù)語(yǔ)）。實(shí)際上HUD經(jīng)常被用來(lái)顯示進(jìn)度條或者轉(zhuǎn)輪一樣的那種讀取界面宝当，比如下載的時(shí)候视事，或者注冊(cè)用戶后提交等待的那幾秒鐘。

在這個(gè)界面關(guān)閉前庆揩，你會(huì)顯示一個(gè)HUD來(lái)反饋用戶俐东，這樣會(huì)使得app豐滿許多。

HUD其實(shí)就是一個(gè)UIView的子類订晌，你可以通過(guò)它在一個(gè)視圖上顯示另一個(gè)視圖虏辫。其實(shí)你已經(jīng)見(jiàn)識(shí)過(guò)很多次了。

比如把label放到cell上面锈拨，和HUD的概念就差不多砌庄，cell本身也是在table view上面的，而table view自己則是導(dǎo)航控制器中最頂層的一個(gè)視圖奕枢。

目前為止鹤耍，你都只是需要視圖控制器或者數(shù)據(jù)模型的時(shí)候才創(chuàng)建自己的對(duì)象，但是其實(shí)验辞，你也可以創(chuàng)建自己的視圖稿黄。

通常，使用元件庫(kù)中的button或者標(biāo)簽就已經(jīng)足夠了跌造，但是假如你需要一點(diǎn)自己的特色功能時(shí)杆怕，就需要自己創(chuàng)建一個(gè)視圖了。你可以通過(guò)繼承UIView或者UIControl來(lái)完成這個(gè)工作壳贪。

添加一個(gè)新的Swift文件陵珍，命名為HudView。

我們先來(lái)做一個(gè)簡(jiǎn)易版的HudView违施，讓你先了解下情況互纯，然后我們?cè)偻晟扑?/p>

將HubView.swift中的內(nèi)容都刪掉，替換為下面的代碼：

import UIKit

class HudView: UIView {
    var text = ""
    
    class func hud(inView view: UIView,animated: Bool)-> HudView {
        let hudView = HudView(frame: view.bounds)
        hudView.isOpaque = false
        view.addSubview(hudView)
        view.isUserInteractionEnabled = false
        hudView.backgroundColor = UIColor(red:1,green:0,blue:0,alpha:0.5)
        return hudView
    }
}

這里的hud(inView,animated)方法叫做便利構(gòu)造方法（convenience constructor）磕蒲。它創(chuàng)建并且返回一個(gè)新的HudView實(shí)例留潦。

通常，我們是這樣創(chuàng)建實(shí)例的：

let hudView = HudView()

通過(guò)便利構(gòu)造方法辣往，你可以這樣創(chuàng)建實(shí)例：

let hudView = HudView.hud(inView: parentView, animated: true)

便利構(gòu)造方法通常都是類方法兔院，它的前面有個(gè)class前綴，可以作為一個(gè)獨(dú)立的整體站削，而不是特定的實(shí)例坊萝。

當(dāng)你調(diào)用HudView.hud(inView: parentView, animated: true)后并不會(huì)擁有一個(gè)HudView實(shí)例，它的作用是由這個(gè)方法為你創(chuàng)建一個(gè)HUD view并且把它放到其它視圖的頂層，而不是由你親自去做十偶。

你可以看到菩鲜，在這個(gè)方法的內(nèi)部第一行就是創(chuàng)建實(shí)例：

class func hud(inView view: UIView, animated: Bool) -> HudView {
  let hudView = HudView(frame: view.bounds)
...
  return hudView
}

第一行調(diào)用了HudView()或者說(shuō)是HudView(frame)，這是一個(gè)從UIView中繼承來(lái)的初始化方法惦积。在整個(gè)方法的最后一個(gè)新的HUD實(shí)例被返回給調(diào)用者睦袖。

那么我們?yōu)槭裁匆帽憷麡?gòu)造方法呢？顧名思義荣刑，當(dāng)然是為了方便。

初始化一個(gè)視圖需要很多步驟伦乔，但是如果把這些事都放在便利構(gòu)造方法中厉亏，那么調(diào)用者就不用操心這么多了。

其中有一個(gè)步驟是把HudView對(duì)象作為子視圖烈和，添加到它的父視圖的頂層爱只，這里父視圖就是導(dǎo)航控制器視圖，所以HUD會(huì)把父視圖全部覆蓋掉招刹。

同時(shí)我們將isUserInteractionEnabled（是否與用戶交互）屬性設(shè)置為false恬试。就是說(shuō)當(dāng)HUD視圖顯示現(xiàn)在界面上的時(shí)候，用戶點(diǎn)擊它不會(huì)發(fā)生任何事情疯暑。

我們來(lái)簡(jiǎn)單測(cè)試一下训柴，現(xiàn)在HUD視圖的背景顏色是紅色，50%透明度妇拯。這樣便于你觀察它是否真的顯示出來(lái)了幻馁，并且覆蓋了整個(gè)屏幕。

打開(kāi)LocationDetailsViewController.swift越锈，將done方法修改為：

@IBAction func done() {
        let hudView = HudView.hud(inView: navigationController!.view, animated: true)
        hudView.text = "Tagged"
    }

這樣就創(chuàng)建了一個(gè)HudView對(duì)象并且把它添加到導(dǎo)航控制器視圖中去了仗嗦，還自帶一點(diǎn)小動(dòng)畫(huà)。同時(shí)設(shè)置了text屬性甘凭。

之前稀拐，done方法會(huì)自動(dòng)關(guān)閉界面，但是為了測(cè)試觀察效果丹弱，我們暫時(shí)不需要這樣做德撬。如果界面關(guān)閉了，你就無(wú)法觀察HUD是否顯示了躲胳。測(cè)試好后砰逻，我們稍后會(huì)把這個(gè)功能重新添加上。

運(yùn)行app泛鸟，看看效果是不是很驚艷：

現(xiàn)在app完全對(duì)用戶的點(diǎn)擊失去響應(yīng)了蝠咆。

在操作視圖的時(shí)候，先給他一個(gè)亮色的背景是個(gè)非常好的辦法，這樣便于你觀察效果刚操。

打開(kāi)HudView.swift闸翅，把backgroundColor這一行從hud(inView: animated)方法中移除。

然后添加下面這個(gè)方法進(jìn)去：

override func draw(_ rect: CGRect) {
        let boxWidth: CGFloat = 96
        let boxHeight:CGFloat = 96
        
        let boxRect = CGRect(x: round((bounds.size.width - boxWidth) / 2), y: round((bounds.size.height - boxHeight) / 2), width: boxWidth, height: boxHeight)
        
        let roundedRect = UIBezierPath(roundedRect: boxRect, cornerRadius: 10)
        UIColor(white: 0.3,alpha: 0.8).setFill()
        roundedRect.fill()
    }

draw()方法會(huì)在UIKit需要你的視圖重繪自己的時(shí)候被調(diào)用菊霜。

回憶一下坚冀，我們前面說(shuō)過(guò)，iOS中的所有東西都是事件驅(qū)動(dòng)的鉴逞。視圖不會(huì)主動(dòng)在界面上被繪制记某，除非UIKit發(fā)送了draw()事件。這就是說(shuō)你永遠(yuǎn)不應(yīng)該自己去調(diào)用draw()构捡。

如果你需要重繪一個(gè)視圖的話液南，你應(yīng)該發(fā)送setNeedsDisplay()消息。然后UIKit會(huì)在適合的時(shí)候發(fā)送draw()方法勾徽。如果你以前接觸過(guò)其它平臺(tái)滑凉，也許會(huì)對(duì)此感到不解，在其它平臺(tái)上喘帚，通常是你自己掌管界面的繪制畅姊，但是在iOS中，UIKit掌管這些事吹由。

你剛才添加的draw()在界面的中心繪制了一個(gè)圓角矩形若未，邊長(zhǎng)為96和96，很明顯這是一個(gè)正方形倾鲫。

let boxWidth: CGFloat = 96
let boxHeight:CGFloat = 96

這里聲明了兩個(gè)常量陨瘩，之后你會(huì)用它們參與相關(guān)的計(jì)算。它們的命名非常直觀级乍，一看就明白是什么意思舌劳。

注意胰腺癌，這些常量的類型都被強(qiáng)制轉(zhuǎn)換為了CGFloat玫荣，因?yàn)閁IKit用的就是這種類型甚淡。當(dāng)處理UIKit和Core Graphics時(shí)，都會(huì)用CGFloat來(lái)代替Float和Double捅厂。

let boxRect = CGRect(x: round((bounds.size.width - boxWidth) / 2), y: round((bounds.size.height - boxHeight) / 2), width: boxWidth, height: boxHeight)

這里又見(jiàn)到了CGRect贯卦，它是用來(lái)代表矩形的一個(gè)結(jié)構(gòu)。你使用它來(lái)計(jì)算HUD的位置焙贷。HUD應(yīng)該在界面上是水平居中和垂直居中的撵割。界面的寬度和高度可以用bounds.size.width和bounds.size.height得到，所以用(bounds.size.width - boxWidth) / 2就正好是水平居中了辙芍。

使用round函數(shù)的作用是保證不要出現(xiàn)小數(shù)啡彬，這樣會(huì)使得視圖很模糊羹与。

let roundedRect = UIBezierPath(roundedRect: boxRect, cornerRadius: 10)
        UIColor(white: 0.3,alpha: 0.8).setFill()
        roundedRect.fill()

UIBezierPath對(duì)繪制矩形的圓角非常有幫助。你只需要輸入一個(gè)矩形作為參數(shù)庶灿，再告訴他圓角的弧度就可以了纵搁。

然后你設(shè)置顏色為灰色，并且透明度為80%往踢。

運(yùn)行app腾誉，效果應(yīng)該是這個(gè)樣子的：

我們還要在HUD中添加兩樣?xùn)|西，一個(gè)對(duì)勾符號(hào)和一個(gè)文本標(biāo)簽峻呕，其中對(duì)勾符號(hào)是一個(gè)圖片文件利职。

在本書(shū)附帶的資源文件夾中的Hud Images文件夾中有兩個(gè)文件，Checkmark@2x.png和Checkmark@3x.png瘦癌。把這兩個(gè)文件放入到資產(chǎn)文件夾中（Assets.xcassets）猪贪，和之前導(dǎo)入圖標(biāo)的操作方式一樣。

在draw()方法的底部添加如下代碼：

if let image = UIImage(named: "Checkmark") {
            let imagePoint = CGPoint(
                x: center.x - round(image.size.width / 2),
                y: center.y - round(image.size.height / 2) - boxHeight / 8)
            image.draw(at: imagePoint)
            
        }

這段代碼讀取checkmark圖片文件到UIImage對(duì)象中佩憾。然后計(jì)算該圖片的坐標(biāo)，正好把它放到HUD視圖的中心干花。

運(yùn)行app妄帘，你會(huì)看到下面的效果：

可失敗的初始化（Failable initializers）

在創(chuàng)建UIImage時(shí)你使用了if let來(lái)進(jìn)行解包。這是因?yàn)閁IImage(named)是一種可失敗的初始化池凄。

因?yàn)樽x取圖片可能會(huì)失敗抡驼，比如圖片不存在或者指定的名稱根本不是一個(gè)圖片文件。你不能糊弄UIImage肿仑，讓他讀取一個(gè)非圖片文件致盟。

事實(shí)上UIImage的init方法定義為init?(named)，這里的問(wèn)號(hào)說(shuō)明了尤慰，這個(gè)方法的返回值是一個(gè)可選型馏锡。如果沒(méi)有讀取到有效的圖片的話，它會(huì)返回一個(gè)nil伟端。

在iOS框架中杯道，你會(huì)經(jīng)常看到這種可失敗的初始化责蝠，比如你曾經(jīng)遇到過(guò)的init?(coder)党巾，這種方法的特點(diǎn)就是無(wú)論對(duì)象是否創(chuàng)建成功，它都會(huì)有所返回霜医，所以你必須先對(duì)它們進(jìn)行解包才能使用齿拂。

同上在視圖上放置文本都會(huì)使用UILabel對(duì)象，然而對(duì)于這種簡(jiǎn)單的視圖肴敛，你可以自己創(chuàng)建文本對(duì)象署海。

在draw()方法底部添加以下代碼：

let attribs = [ NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16),
                        NSAttributedStringKey.foregroundColor: UIColor.white ]
        let textSize = text.size(withAttributes: attribs)
        let textPoint = CGPoint(
            x: center.x - round(textSize.width / 2),
            y: center.y - round(textSize.height / 2) + boxHeight / 4)
        text.draw(at: textPoint, withAttributes: attribs)

以上代碼已經(jīng)針對(duì)Swift 4優(yōu)化過(guò)了吗购。

當(dāng)你繪制一個(gè)文本的時(shí)候，首先你要知道這個(gè)文本的大小叹侄，這樣你才能準(zhǔn)確計(jì)算它的位置巩搏。String有很多方法可以實(shí)現(xiàn)這個(gè)目的。

首先你創(chuàng)建了一個(gè)用于文本的UIFont對(duì)象趾代，字體是“System”贯底，大小是16。

同時(shí)你還指定了文本的顏色為white（白色）撒强。字體和前景顏色被放入了一個(gè)名為attribs的字典中禽捆。

回憶一下，字典存儲(chǔ)的是鍵值配對(duì)關(guān)系飘哨。創(chuàng)建一個(gè)字典的基本語(yǔ)法是：

let myDictionary = [ key1: value1,
                     key2: value2,
                     key3: value3 ]

回到draw()方法中的attribs字典胚想，其中的NSAttributedStringKey.font關(guān)聯(lián)的是UIFont對(duì)象，NSAttributedStringKey.foregroundColor關(guān)聯(lián)的是UIColor對(duì)象芽隆。換而言之a(chǎn)ttribs字典描述了文本的字體和顏色浊服。

然后你使用這些屬性和來(lái)自文本中的字符串的屬性來(lái)計(jì)算文本的寬和高，并把結(jié)果存放在常量textSize中胚吁，這個(gè)常量的類型是CGSize牙躺。（在你制作自己的視圖時(shí)，CGPoint腕扶、CGSize孽拷、CGRect這些類型都是你的好朋友）

最后你計(jì)算出文本的位置，并且將結(jié)果存放在textPoint中半抱，并且將它最終繪制到屏幕上脓恕，整個(gè)過(guò)程非常簡(jiǎn)單。

運(yùn)行app窿侈，現(xiàn)在看起來(lái)就高大上了許多炼幔。

你可以在模擬器中的多種設(shè)備類型上測(cè)試，無(wú)論設(shè)備的尺寸如何史简，HUD視圖總是在屏幕的中央江掩。

但是我們的要求要更高一點(diǎn)，我們來(lái)添加一點(diǎn)小動(dòng)畫(huà)乘瓤，讓這個(gè)過(guò)程更加生動(dòng)环形。這非常簡(jiǎn)單。

在HudView.swift文件中添加show(animated)方法：

func show(animated: Bool) {
        if animated {
            //1
            alpha = 0
            transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
            //2
            UIView.animate(withDuration: 0.3, animations: {
                //3
                self.alpha = 1
                self.transform = CGAffineTransform.identity
            })
        }
    }

在Bull's Eye這個(gè)課程中衙傀，你使用Core Animation框架做了一點(diǎn)動(dòng)畫(huà)抬吟。但是UIView有自己的動(dòng)畫(huà)機(jī)制。后臺(tái)用的也是Core Animation统抬，但是使用的方法要簡(jiǎn)單一些火本。

它的固定步驟是：

1危队、在動(dòng)畫(huà)開(kāi)始前設(shè)置視圖的初始狀態(tài)。這里你將alpha設(shè)置為0钙畔，使界面完全透明茫陆。同時(shí)設(shè)置transform的比例因子為1.3。在這里我們不深入討論這個(gè)概念擎析。

2簿盅、調(diào)用UIView.animate(withDuration:...)設(shè)置動(dòng)畫(huà)。你在閉包中定義了動(dòng)畫(huà)揍魂，回憶一下閉包是一個(gè)不會(huì)立即執(zhí)行的代碼塊桨醋。UIKit將這些屬性在閉包內(nèi)從初始狀態(tài)改變到最終狀態(tài)，并且將其動(dòng)畫(huà)化现斋。

3喜最、在閉包內(nèi)部，你設(shè)置了動(dòng)畫(huà)結(jié)束時(shí)視圖的最終狀態(tài)庄蹋。alpha為1瞬内，就是說(shuō)HudView視圖此時(shí)完全不透明。同時(shí)將比例因子設(shè)置為正常狀態(tài)限书。因?yàn)檫@些代碼時(shí)寫(xiě)在閉包中的虫蝶，所以引用這些屬性必須使用self關(guān)鍵字。

HUD視圖的透明度從完全透明到完全不透明轉(zhuǎn)而迅速消失蔗包，并將從原始尺寸的1.3倍縮小到其常規(guī)寬度和高度秉扑。

這是一段非常簡(jiǎn)單的動(dòng)畫(huà)慧邮，但是也非常漂亮调限。

在hud(inView, animated)方法中調(diào)用show(animated)方法，就放在return語(yǔ)句的前面误澳。

class func hud(inView view: UIView, animated: Bool) -> HudView { ...
  hudView.show(animated: animated)
  return hudView
}

運(yùn)行app耻矮，感動(dòng)一下自己。

你可以試試一種叫做彈簧的動(dòng)畫(huà)效果忆谓，非常有意思裆装，也非常簡(jiǎn)單。

將UIView.animate(withDuration:...)方法替換為下面這個(gè)樣子：

UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.7,
  initialSpringVelocity: 0.5, options: [], animations: {
    self.alpha = 1
    self.transform = CGAffineTransform.identity
  },completion: nil)

運(yùn)行app倡缠，其實(shí)這些動(dòng)畫(huà)的效果非常微妙哨免，但是正是這種細(xì)節(jié)給用戶帶來(lái)了良好的體驗(yàn)。