不記得在使用諾基亞的那些日子，為了一個九宮格解鎖，在應用商城裡下了多少流氓軟體。最後無功而返的時候，那種鬱悶的心情恨不得把手機給砸了！不得不承認，九宮格解鎖的一時風靡，以致於Android陣營的很多手機都內建了這一解鎖選項，比如華為。然，Apple官方卻沒有提供這方面的選擇。唉！誰叫人家肌肉壯碩呢？有錢任性呢？（ps：有了指紋解鎖還要這個？No kidding！）在網上Search了N久，沒有找到一個完整實現了九宮格解鎖的Demo或kit，或許是使用的搜尋引擎的手段太過low了。不過這並不妨礙想自己寫一個這樣的例子出來，於是便有了以下的內容！

筆者用一個列舉來表述九宮格解鎖檢視的所可能對外呈現的狀態，如下：

typedef NS_ENUM(NSUInteger, ZNUnlockStatus) {
    ZNUnlockStatusSettingPWD = 1,//1
    ZNUnlockStatusSettingPWDFailed,
    ZNUnlockStatusSettingPWDSuccessed,
    ZNUnlockStatusEnsurePWD,
    ZNUnlockStatusInputPWD,//5
    ZNUnlockStatusFailed,
    ZNUnlockStatusSuccessed,
    ZNUnlockStatusResetPWD,//8
 

    ZNUnlockStatusResetPWDFailed,
    ZNUnlockStatusErrorWaiting //waiting for 20s after five errors
};

其中只有1、5、8對應的狀態是對外有效的訪問狀態，其他的只是在整個使用過程中可能會出現的用做提示的狀態資訊，將通過代理回撥的方式來進行資料傳遞，這些只能由解鎖檢視根據使用者的實際操作動態改變而不能通過對外介面預置。這裡筆者心恨了一點，如果你不“乖乖”聽話，程式就崩給你看：

- (void)setUnlockStatus:(ZNUnlockStatus)unlockStatus {
    if (unlockStatus
 
 == 1 || unlockStatus == 5 || unlockStatus == 8) {
        if (_unlockStatus != unlockStatus) {
            _unlockStatus = unlockStatus;
        }
    } else {
        NSAssert(NO, @"only three status of ZNUnlockStatus can be setted:ZNUnlockStatusSettingPWD、ZNUnlockStatusInputPWD、ZNUnlockStatusResetPWD, others just be used to show ZNUnlockStatus information");
    }
}

Demo中預設的圖片（來自Iconfont）是簡單的樣式，所以當你將解鎖圖案設定為可見時，線條的顏色也是與預設圖片向匹配的。如果你錯誤繪製，線條顏色就只能是紅色的。當然每個宮格的圖片你可以自定義，包括普通狀態、選中狀態、錯誤狀態，不過在這裡建議錯誤狀態的圖片底色最好與線條相同。如果解鎖完成，你想要讓檢視消失，通過dismissUnlockView就可以完成後續的步驟。

這個名為ZNNineGridsUnlockView的類將一切邏輯都封裝起來了，整個Demo的核心功能是通過touchesBegan:withEvent:、touchesMoved:withEvent:、touchesEnded:withEvent:、drawRect:這幾個方法的串接呼叫完成的。（ps：繪圖過程必須在drawRect:裡完成）

在跟隨使用者互動來畫線的實踐中，筆者的思路是通過在觸控檢視的過程中確定起點和終點（誠然，在確定畫線時這兩點必須是九宮格其中之一的終點）。如果畫線過程是可見的，那麼在觸控移動的過程中就需要不斷地重繪檢視，為了保持連貫性，就需要不斷更新終點（此時的終點只是一個過渡點）。畫線結束後，需要將終點更新為新的起點，不斷迭代，最終完成圖案的繪製。

最開始的時候，筆者將過渡線條以不斷建立UIBezierPath例項並畫線來實現，然後通過持有一個最終確定畫線的例項來確認畫線，卻發現了這樣的問題：線條會有一瞬間的出現（嗯，閃現），然後就消失了。下一次確定時，本次線條和上次線條均會閃現，說明實際的繪製過程是成功的，猜測原因可能是兩個路徑例項相互衝突。（ps：由於清空了廢紙簍，之前錄屏的bug的gif圖片就886，所以沒有給出一個直觀的描述圖，真是抱歉！）

後面在千辛萬苦找到一個例項之後，發現真正的效果是通過取巧的方式完成。原來實際的解鎖頁面下面還有一個UIImageView，在確定繪製的過程中，獲取記憶體的繪圖，並更新UIImageView即可看到最終流暢的線條效果。

在筆者使用九宮格解鎖之後，就一直覺得有一點不爽，也就是起點和終點之間如果有有效的繪製點（之前沒有被選中），那麼這個點也會被自動選中，使用者不能禁止這種行為。這個小例子中，筆者自己彌補了這個小缺憾，同時也是為了增加解鎖圖案的多樣性。、

自我感覺這個Demo沒多少技術含量，所以在寫這篇文章時有點不知道怎麼寫的感覺，總覺得有點廢話的感覺。不過，這些都不是很重要，重要的是下面有完整的程式碼和效果圖。鑑於csdn的圖片大小限制，這裡筆者就只能錄小部分功能的演示：

額！剛剛試了一下，發現錄了5秒就用了5.9MB，所以就只能降低畫質和PPI來減少大小了。這裡是程式碼地址，你可以去看看！謝謝！