一、實現效果
實現效果圖：
二、 手勢解鎖應用 分析
1.監聽手指在view上的移動，首先肯定需要自定義一個view，重寫touch began,touch move等方法，當手指移動到圈上時，讓其變亮。可以通過button按鈕來實現。
2.界面搭建
背景圖片（給控制器的view添加一個imageview，設置屬性背景圖片）
九個按鈕（把九個按鈕作為一個整體，使用一個大的view來管理這些小的view,這些小的view就是9個button。如果使用手動拖控件的方式實現頁面搭建，那么9個按鈕需要拖拽九次，且需要對齊，不靈活，這里選擇使用以【九宮格】代碼的方式創建9個按鈕）。
3.新建一個類，對自定義的view進行管理，這個view是從storyboard創建出來的，會調用aweakframe方法和initwithcoder方法，后者先調用因此把創建按鈕的代碼寫在這個方法中。
部分代碼：
1 //界面搭建
2 - (id)initWithFrame:(CGRect)frame
3 {
4 self = [super initWithFrame:frame];
5 if (self) {
6 [self setup];
7 }
8 return self;
9 }
10
11 -(id)initWithCoder:(NSCoder *)aDecoder
12 {
13 if (self=[super initWithCoder:aDecoder]) {
14 [self setup];
15 }
16 return self;
17 }
18 //在界面上創建9個按鈕
19 -(void)setup
20 {
21 //1.創建9個按鈕
22 for (int i=0; i<9; i++) {
23 UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
24 //2.設置按鈕的狀態背景
25 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
26 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
27 //3.把按鈕添加到視圖中
28 [self addSubview:btn];
29 //4.禁止按鈕的點擊事件
30 btn.userInteractionEnabled=NO;
31 }
32 }
注意點： 在initwithcoder：方法中一定要先對父類進行初始化。
說明： 當視圖從xib或storyboard中創建出來會調用initwithcoder：方法，如果視圖是通過代碼創建出來的，那么就會調用initwithFrame：方法。
提示： 使用代碼創建視圖，即便是調用init方法而不是直接調用nitwithFrame：方法，init方法內部也會調用nitwithFrame：方法。
建議： 如果重寫view的話，建議同時重寫這兩個方法。調用，【self setup】
三、實現基本連線
步驟：
1.創建按鈕
2.設置按鈕的背景圖片（默認狀態——選中狀態）
3.添加按鈕到view
提示： 不要在構造方法中設置按鈕的frame,因為這個方法是在構造方法中調用的，而在構造方法中獲取不了frame。
4.在layoutSubviews中設置按鈕的frame。（提示：一定要先調用父類的layoutSubviews）
4.1取出對應位置的按鈕
4.2設置每個按鈕的frame
5.監聽手指的移動。分析程序，應該監聽手指的移動，而不是按鈕的點擊，當手指移動到按鈕的范圍內時，讓按鈕變亮。
5.1重寫touchesbegan...方法
(1)獲取按下的點
(2)判斷觸摸的位置是否在按鈕的范圍內（使用超級for循環）
提示： 一個判斷點是否在指定范圍內的方法——CGRectContainsPoint(,)；
5.2重新touchesmoved...方法
說明： 當手指移動到按鈕上的時候，按鈕變亮，因此需要重寫touchesmoved方法。
（1）獲取觸摸的點
（2）判斷觸摸的點是否在按鈕的范圍內。
提示： 可以把上面兩個功能分別進行封裝，在使用的時候直接調用即可。
封裝代碼：
1 //對功能點進行封裝
2 -(CGPoint)getCurrentPoint:(NSSet *)touches
3 {
4 UITouch *touch=[touches anyObject];
5 CGPoint point=[touch locationInView:touch.view];
6 return point;
7 }
8
9 -(UIButton *)getCurrentBtnWithPoint:(CGPoint)point
10 {
11 for (UIButton *btn in self.subviews) {
12 if (CGRectContainsPoint(btn.frame, point)) {
13 return btn;
14 }
15 }
16 return Nil;
17 }
整理：
（1）獲取按下的點
（2）獲取觸摸的按鈕
（3）（存儲按鈕）設置觸摸按鈕的狀態
（4）通知view繪制線段
四、繪制線段
思路： 獲取為選中狀態的按鈕，并把它們存到一個數組中，重寫drawRect方法，從數組中取出所有的按鈕，連接所有按鈕的中點。
注意： 數組中不能存空值，在存儲之前需要先進行判斷。
新的問題：已經被連過的按鈕，不能再連線。（在存儲按鈕的時候判斷，如果該按鈕已經被連線，那么就不再添加到數組中）。
解決代碼：
1 if (btn && btn.selected != YES) {
2 //設置按鈕的選中狀態
3 btn.selected=YES;
4 //把按鈕添加到數組中
5 [self.buttons addObject:btn];
6 }
繪制線段
（1）獲取上下文
（2）取出按鈕（起點和終點）
（3）渲染
代碼：
1 //重寫drawrect:方法
2 -(void)drawRect:(CGRect)rect
3 {
4 //獲取上下文
5 CGContextRef ctx=UIGraphicsGetCurrentContext();
6 //繪圖（線段）
7 for (int i=0; i<self.buttons.count; i++) {
8 UIButton *btn=self.buttons[i];
9 if (0==i) {
10 //設置起點（注意連接的是中點）
11 // CGContextMoveToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
12 CGContextMoveToPoint(ctx, btn.center.x, btn.center.y);
13 }else
14 {
15 // CGContextAddLineToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
16 CGContextAddLineToPoint(ctx, btn.center.x, btn.center.y);
17 }
18 }
19 //渲染
20 //設置線條的屬性
21 CGContextSetLineWidth(ctx, 10);
22 CGContextSetRGBStrokeColor(ctx, 20/255.0, 107/255.0, 153/255.0, 1);
23 CGContextStrokePath(ctx);
24 }
五、附錄
實現的完整代碼
1 //
2 // YYLockView.m
3 // 01-手勢解鎖（基本）
4 //
5 // Created by apple on 14-6-18.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYLockView.h"
10
11 @interface YYLockView ()
12 @property(nonatomic,strong)NSMutableArray *buttons;
13 @end
14 @implementation YYLockView
15
16 #pragma mark-懶加載
17 -(NSMutableArray *)buttons
18 {
19 if (_buttons==nil) {
20 _buttons=[NSMutableArray array];
21 }
22 return _buttons;
23 }
24
25 //界面搭建
26 - (id)initWithFrame:(CGRect)frame
27 {
28 self = [super initWithFrame:frame];
29 if (self) {
30 [self setup];
31 }
32 return self;
33 }
34
35 -(id)initWithCoder:(NSCoder *)aDecoder
36 {
37 if (self=[super initWithCoder:aDecoder]) {
38 [self setup];
39 }
40 return self;
41 }
42 //在界面上創建9個按鈕
43 -(void)setup
44 {
45 //1.創建9個按鈕
46 for (int i=0; i<9; i++) {
47 UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
48 //2.設置按鈕的狀態背景
49 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
50 [btn setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
51 //3.把按鈕添加到視圖中
52 [self addSubview:btn];
53 //4.禁止按鈕的點擊事件
54 btn.userInteractionEnabled=NO;
55 }
56 }
57
58 //4.設置按鈕的frame
59 -(void)layoutSubviews
60 {
61 //4.1需要先調用父類的方法
62 [super layoutSubviews];
63 for (int i=0; i<self.subviews.count; i++) {
64 //4.2取出按鈕
65 UIButton *btn=self.subviews[i];
66
67 //4.3九宮格法計算每個按鈕的frame
68 CGFloat row = i/3;
69 CGFloat loc = i%3;
70 CGFloat btnW=74;
71 CGFloat btnH=74;
72 CGFloat padding=(self.frame.size.width-3*btnW)/4;
73 CGFloat btnX=padding+(btnW+padding)*loc;
74 CGFloat btnY=padding+(btnW+padding)*row;
75 btn.frame=CGRectMake(btnX, btnY, btnW, btnH);
76 }
77 }
78
79 //5.監聽手指的移動
80 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
81 {
82 CGPoint starPoint=[self getCurrentPoint:touches];
83 UIButton *btn=[self getCurrentBtnWithPoint:starPoint];
84
85 if (btn && btn.selected != YES) {
86 btn.selected=YES;
87 [self.buttons addObject:btn];
88 }
89 }
90 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
91 {
92 CGPoint movePoint=[self getCurrentPoint:touches];
93 UIButton *btn=[self getCurrentBtnWithPoint:movePoint];
94 //存儲按鈕
95 //已經連過的按鈕，不可再連
96 if (btn && btn.selected != YES) {
97 //設置按鈕的選中狀態
98 btn.selected=YES;
99 //把按鈕添加到數組中
100 [self.buttons addObject:btn];
101 }
102 //通知view重新繪制
103 [self setNeedsDisplay];
104 }
105 //對功能點進行封裝
106 -(CGPoint)getCurrentPoint:(NSSet *)touches
107 {
108 UITouch *touch=[touches anyObject];
109 CGPoint point=[touch locationInView:touch.view];
110 return point;
111 }
112
113 -(UIButton *)getCurrentBtnWithPoint:(CGPoint)point
114 {
115 for (UIButton *btn in self.subviews) {
116 if (CGRectContainsPoint(btn.frame, point)) {
117 return btn;
118 }
119 }
120 return Nil;
121 }
122
123 //重寫drawrect:方法
124 -(void)drawRect:(CGRect)rect
125 {
126 //獲取上下文
127 CGContextRef ctx=UIGraphicsGetCurrentContext();
128 //繪圖（線段）
129 for (int i=0; i<self.buttons.count; i++) {
130 UIButton *btn=self.buttons[i];
131 if (0==i) {
132 //設置起點（注意連接的是中點）
133 // CGContextMoveToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
134 CGContextMoveToPoint(ctx, btn.center.x, btn.center.y);
135 }else
136 {
137 // CGContextAddLineToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
138 CGContextAddLineToPoint(ctx, btn.center.x, btn.center.y);
139 }
140 }
141 //渲染
142 //設置線條的屬性
143 CGContextSetLineWidth(ctx, 10);
144 CGContextSetRGBStrokeColor(ctx, 20/255.0, 107/255.0, 153/255.0, 1);
145 CGContextStrokePath(ctx);
146 }
147 @end
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試