讓我們在 iOS 上實現九宮格解鎖吧！

? 隕石小故事

大家還記得上一次 Touch/Face ID 與帳號密碼同時使用的尷尬情況嗎？這一次我要讓你更尷尬。在 Touch/Face ID 後，之後又被通知說能不能在 iOS 上實現指紋解鎖的功能？
「欸都...那什麼時候觸發這個指紋解鎖？」
-「帳號密碼登入之前呀～」
「哪泥...？！」

Overview

雖然是個很少見的需求，但是還蠻有趣的。而且網路上相關的文章很少，所以非常的有挑戰性，本次教學就來教大家如何在 iOS 上實現九宮格解鎖的效果，實現手勢解鎖的功能吧！

實作

｜建立 GesturePasswordView 畫面

那麼九宮格解鎖該使用什麼元件來做呢？這邊我的首選絕對會是 UICollectionView，因為我們是格狀視圖，每個格子都長一樣，所以我們可以使用 CollectionView 配合這點實現，而且我之後也想要能夠靈活的控制格子數量。所以在這邊，我們新增一個 GesturePasswordView 的 .swift 文件，並且新增一個 GesturePasswordView 的 class 繼承 UICollectionView：

接著我們簡單編寫 GesturePasswordView 的配置：

UICollectionViewDataSource 部分我們我們因為行列數量一定相同，所以我們就用我們的 rows 相乘即可，而 cell 這邊你們可以自由設置你們 cell 的樣式，這邊我們 GesturePasswordViewCell 只有中心點多了一個小小圓型的 view 而已。

接著讓我們看看 UICollectionViewDelegateFlowLayout 的內容，minimumLineSpacingForSectionAt 和 minimumInteritemSpacingForSectionAt 部分我們單純的設置與 spacing 相同。而 sizeForItemAt 我們透過將 collectionView 長度減去 spacing 距離後來平均分配給每一個 cell。

接著我們新增一個方法來做為 GesturePasswordView UI 配置的接口，我們新增一個 setGesturePasswordView 函數：

這邊想要使用 GesturePasswordView 的人可以透過 setGesturePasswordView 函數來改變我們 private 的 rows 以及 spacing 值，並且 reload GesturePasswordView。

接著我們在我們的畫面上新增一個 View，並設置他的 Custom Class 為 GesturePasswordView：

接著我們將它拉一個 Outlet 到程式碼中，並且執行我們所暴露出用來進行 UI 配置的接口：

接著讓我們運行一下看看目前的畫面吧！

｜實作手勢選取

而接下來，我們希望我們手指滑動到圓形的範圍中時選取該項目。要達成這個選取的方式，首先我們可以透過 didSelectItemAt 方法來實作我們選擇到的效果：

首先，我們判斷 numbers 這個 array 有沒有包含目前的 indexPath.row，如果已經包含則不再選取，直接 return。反之，如果不包含該 indexPath.row ，那麼則會添加到 numbers 中，並且 reload 該 indexPath 項目。

接著我們到 UICollectionViewDataSource 的區塊來修改一下我們 cellForItemAt 中的程式碼：

在這邊首先我們設置 cell 的 isUserInteractionEnabled 為 false，因為我們是想要用滑動的方式選取，不希望他是被點選的。再來是我們判斷 numbers 是否包含當前 indexPath.row 的項目，來判斷是否要加上框線。

最後我們來實作我們滑動的方法，這邊我們使用 touchMoved 的方式來實作滑動選取的功能：

我們透過 touches.first?.location(in: self) 來取得當前點選的 point 位置，並且透過這個 point 來推算出是 collectionViwe 哪個項目的 indexPath，最後透過這個 indexPath 來執行 didSelectItemAt 方法來實現點取 cell 的效果。

而當然別忘了也要在我們滑動結束與取消時將 numbers 給清空，並且重整 GesturePasswordView：

最後讓我們看看成果吧！

你可以透過 numbers 這個 array 查看滑出的軌跡的數字。

Summary

那我們這次手勢解鎖實作大概到這邊，這邊教學大概介紹大基本的 UI 設置以及滑動選取的概念，下一篇教學我們會來實作手勢解鎖的相關的內容，透過手勢設置密碼以及輸入密碼，那我們下篇教學見。