------------- 基本思路 --------------
- 搭建界面尝哆，九宮格算法
- 處理按鈕選中狀態(tài)
- 按鈕之間畫線
- 手指和按鈕之間畫線
- 判斷解鎖密碼是否正確
------------- 基本思路 --------------
- 判斷解鎖密碼是否正確
拖拽圖片素材
設置控制器 view 的背景色為"HomeButtomBG"圖片平鋪后的效果
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HomeButtomBG"]];在控制器中拖拽一個 UIView, 設置寬高都是300, 并設置約束(在父容器中水平、垂直居中對齊)苍碟。
自定義一個 view, 設置這個自定義 view 與界面上的 view 相關(guān)聯(lián)
在自定義 view 中添加一個 buttons 屬性, 在懶加載中生成9個 UIButton, 并且把這寫 Button 都添加到 view 中灭贷。
- 創(chuàng)建每個 UIButton
- 設置每個 UIButton的默認情況下的背景圖片枚抵、 selected 下的背景圖片蹬耘、disabled 下的背景圖片
在 layoutSubviews 方法中根據(jù)九宮格的方式計算每個按鈕的 frame
實現(xiàn)觸摸到某個按鈕的時候, 讓這個按鈕的狀態(tài)變成 selected
7.1 在自定義 view 的 touchesBegan:方法中根據(jù)當前的觸摸點, 判斷是否觸碰到了某個按鈕
- 設置這個按鈕的 selected狀態(tài)
- 把這個按鈕記錄下來(添加到 selectedButtons 集合中)
7.2 在自定義 view 的 touchesMoved:方法中根據(jù)當前的觸摸點, 判斷是否觸碰到了某個按鈕
- 設置這個按鈕的 selected狀態(tài)
- 把這個按鈕記錄下來(添加到 selectedButtons 集合中), 同時要判斷這個按鈕是否已經(jīng)是 selected = YES了, 避免重復添加斥季。
- 同時記錄下本次觸摸的 point到 currentPoint屬性中。
** 注意: 此處必須設置按鈕禁止與用戶交互(btn.userInteractionEnabled = NO;), 否者手指觸摸到按鈕上以后, 按鈕會捕獲這個觸摸事件, 就不會觸發(fā) view的 touchesBegan:事件了参萄。
- 在 drawRect:方法中繪制線條
- 判斷如果 self.selectedButtons長度為0, 那么直接返回不需要繪制任何內(nèi)容
- 如果 self.selectedButtons長度不為0:
1> 循環(huán) self.selectedButtons集合中的每個按鈕
2> 判斷如果是第一個按鈕那么移動到起點（起點為第一個按鈕的 center point）
3> 如果不是第一個按鈕那么直接添加線段到這個按鈕的 center point
4> 繪制完畢按鈕以后, 最后再添加一條線段到 currentPoint卫枝。
// 線條的顏色
#define SteveZLineColor [UIColor colorWithRed:0.0 green:170/255.0 blue:255/255.0 alpha:1.0]
/**
錯誤:
<Error>: void CGPathAddLineToPoint(CGMutablePathRef, const CGAffineTransform *, CGFloat, CGFloat): no current point.
原因:
在第一次繪圖的時候 path 對象中沒有任何點
解決:(判斷如果沒有需要繪制的按鈕, 那么就直接返回)
if (self.selectedButtons.count == 0) {
return;
}
*/
在touchesEnded:方法中, 將所有按鈕的 selected 狀態(tài)設置為 NO, 清空 self.selectedButtons 集合, 重新繪制。
為每個按鈕添加一個 tag, 用來判斷手勢解鎖是否正確
- 通過代理把解鎖的密碼傳遞給控制器, 在控制器中判斷解鎖是否正確, 如果正確代理方法返回 YES, 否則返回 NO
- 在定義 view 中, 根據(jù)代理方法返回的結(jié)果判斷如果 YES, 那么直接執(zhí)行第9步
- 如果返回為 NO:
1> 先將 self.selectedButtons中的所有按鈕selected狀態(tài)設置為 NO, enabled 也設置為 NO
2> 在把線條顏色設置為紅色
3> 執(zhí)行重繪
4> 0.5秒鐘之后, 在執(zhí)行第9步讹挎。
- 細節(jié)處理
- 透明問題
1> 如果是完全通過代碼創(chuàng)建 UIView, 在繪圖的時候, 如果指定了控件的透明（opaque = NO）opaque 表示不透明, 那么在繪圖時會有問題校赤。
2> 如果希望是透明, 那么要把顏色指定為 clearColor, 而不是 opaque = NO
