一、實(shí)現(xiàn)效果

實(shí)現(xiàn)效果圖：

二、 手勢(shì)解鎖應(yīng)用 分析

1.監(jiān)聽手指在view上的移動(dòng)，首先肯定需要自定義一個(gè)view，重寫touch began,touch move等方法，當(dāng)手指移動(dòng)到圈上時(shí)，讓其變亮?？梢酝ㄟ^button按鈕來實(shí)現(xiàn)。

2.界面搭建

背景圖片（給控制器的view添加一個(gè)imageview，設(shè)置屬性背景圖片）

九個(gè)按鈕（把九個(gè)按鈕作為一個(gè)整體，使用一個(gè)大的view來管理這些小的view,這些小的view就是9個(gè)button。如果使用手動(dòng)拖控件的方式實(shí)現(xiàn)頁(yè)面搭建，那么9個(gè)按鈕需要拖拽九次，且需要對(duì)齊，不靈活，這里選擇使用以【九宮格】代碼的方式創(chuàng)建9個(gè)按鈕）。

3.新建一個(gè)類，對(duì)自定義的view進(jìn)行管理，這個(gè)view是從storyboard創(chuàng)建出來的，會(huì)調(diào)用aweakframe方法和initwithcoder方法，后者先調(diào)用因此把創(chuàng)建按鈕的代碼寫在這個(gè)方法中。

部分代碼：

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 //在界面上創(chuàng)建9個(gè)按鈕

19 -(void)setup

20 {

21 //1.創(chuàng)建9個(gè)按鈕

22 for (int i=0; i<9; i++) {

23 UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];

24 //2.設(shè)置按鈕的狀態(tài)背景

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.禁止按鈕的點(diǎn)擊事件

30 btn.userInteractionEnabled=NO;

31 }

32 }

注意點(diǎn)： 在initwithcoder：方法中一定要先對(duì)父類進(jìn)行初始化。

說明： 當(dāng)視圖從xib或storyboard中創(chuàng)建出來會(huì)調(diào)用initwithcoder：方法，如果視圖是通過代碼創(chuàng)建出來的，那么就會(huì)調(diào)用initwithFrame：方法。

提示： 使用代碼創(chuàng)建視圖，即便是調(diào)用init方法而不是直接調(diào)用nitwithFrame：方法，init方法內(nèi)部也會(huì)調(diào)用nitwithFrame：方法。

建議： 如果重寫view的話，建議同時(shí)重寫這兩個(gè)方法。調(diào)用，【self setup】

三、實(shí)現(xiàn)基本連線

步驟：

1.創(chuàng)建按鈕

2.設(shè)置按鈕的背景圖片（默認(rèn)狀態(tài)——選中狀態(tài)）

3.添加按鈕到view

提示： 不要在構(gòu)造方法中設(shè)置按鈕的frame,因?yàn)檫@個(gè)方法是在構(gòu)造方法中調(diào)用的，而在構(gòu)造方法中獲取不了frame。

4.在layoutSubviews中設(shè)置按鈕的frame。（提示：一定要先調(diào)用父類的layoutSubviews）

4.1取出對(duì)應(yīng)位置的按鈕

4.2設(shè)置每個(gè)按鈕的frame

5.監(jiān)聽手指的移動(dòng)。分析程序，應(yīng)該監(jiān)聽手指的移動(dòng)，而不是按鈕的點(diǎn)擊，當(dāng)手指移動(dòng)到按鈕的范圍內(nèi)時(shí)，讓按鈕變亮。

5.1重寫touchesbegan...方法

(1)獲取按下的點(diǎn)

(2)判斷觸摸的位置是否在按鈕的范圍內(nèi)（使用超級(jí)for循環(huán)）

提示： 一個(gè)判斷點(diǎn)是否在指定范圍內(nèi)的方法——CGRectContainsPoint(,)；

5.2重新touchesmoved...方法

說明： 當(dāng)手指移動(dòng)到按鈕上的時(shí)候，按鈕變亮，因此需要重寫touchesmoved方法。

（1）獲取觸摸的點(diǎn)

（2）判斷觸摸的點(diǎn)是否在按鈕的范圍內(nèi)。

提示： 可以把上面兩個(gè)功能分別進(jìn)行封裝，在使用的時(shí)候直接調(diào)用即可。

封裝代碼：

1 //對(duì)功能點(diǎn)進(jìn)行封裝

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）獲取按下的點(diǎn)

（2）獲取觸摸的按鈕

（3）（存儲(chǔ)按鈕）設(shè)置觸摸按鈕的狀態(tài)

（4）通知view繪制線段

四、繪制線段

思路： 獲取為選中狀態(tài)的按鈕，并把它們存到一個(gè)數(shù)組中，重寫drawRect方法，從數(shù)組中取出所有的按鈕，連接所有按鈕的中點(diǎn)。

注意： 數(shù)組中不能存空值，在存儲(chǔ)之前需要先進(jìn)行判斷。

新的問題：已經(jīng)被連過的按鈕，不能再連線。（在存儲(chǔ)按鈕的時(shí)候判斷，如果該按鈕已經(jīng)被連線，那么就不再添加到數(shù)組中）。

解決代碼：

1 if (btn && btn.selected != YES) {

2 //設(shè)置按鈕的選中狀態(tài)

3 btn.selected=YES;

4 //把按鈕添加到數(shù)組中

5 [self.buttons addObject:btn];

6 }

繪制線段

（1）獲取上下文

（2）取出按鈕（起點(diǎn)和終點(diǎn)）

（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 //設(shè)置起點(diǎn)（注意連接的是中點(diǎn)）

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 //設(shè)置線條的屬性

21 CGContextSetLineWidth(ctx, 10);

22 CGContextSetRGBStrokeColor(ctx, 20/255.0, 107/255.0, 153/255.0, 1);

23 CGContextStrokePath(ctx);

24 }

五、附錄

實(shí)現(xiàn)的完整代碼

1 //

2 // YYLockView.m

3 // 01-手勢(shì)解鎖（基本）

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 //在界面上創(chuàng)建9個(gè)按鈕

43 -(void)setup

44 {

45 //1.創(chuàng)建9個(gè)按鈕

46 for (int i=0; i<9; i++) {

47 UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];

48 //2.設(shè)置按鈕的狀態(tài)背景

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.禁止按鈕的點(diǎn)擊事件

54 btn.userInteractionEnabled=NO;

55 }

56 }

57

58 //4.設(shè)置按鈕的frame

59 -(void)layoutSubviews

60 {

61 //4.1需要先調(diào)用父類的方法

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九宮格法計(jì)算每個(gè)按鈕的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.監(jiān)聽手指的移動(dòng)

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 //存儲(chǔ)按鈕

95 //已經(jīng)連過的按鈕，不可再連

96 if (btn && btn.selected != YES) {

97 //設(shè)置按鈕的選中狀態(tài)

98 btn.selected=YES;

99 //把按鈕添加到數(shù)組中

100 [self.buttons addObject:btn];

101 }

102 //通知view重新繪制

103 [self setNeedsDisplay];

104 }

105 //對(duì)功能點(diǎn)進(jìn)行封裝

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 //設(shè)置起點(diǎn)（注意連接的是中點(diǎn)）

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 //設(shè)置線條的屬性

143 CGContextSetLineWidth(ctx, 10);

144 CGContextSetRGBStrokeColor(ctx, 20/255.0, 107/255.0, 153/255.0, 1);

145 CGContextStrokePath(ctx);

146 }

147 @end

更多信息請(qǐng)查看IT技術(shù)專欄