前言

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

提綱挈領

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

typedef NS_ENUM(NSUInteger, ZNUnlockStatus) {ZNUnlockStatusSettingPWD = 1,//1ZNUnlockStatusSettingPWDFailed,ZNUnlockStatusSettingPWDSuccessed,ZNUnlockStatusEnsurePWD,ZNUnlockStatusInputPWD,//5ZNUnlockStatusFailed,ZNUnlockStatusSuccessed,ZNUnlockStatusResetPWD,//8ZNUnlockStatusResetPWDFailed,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來減少大小了。這里是代碼地址，你可以去看看！謝謝！

總結

以上是生活随笔為你收集整理的九宫格解锁的完全实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。