[iOS UI进阶 - 5.0] 手势解锁Demo
- 使用按钮来处理每个圆点
- 使用代码生成按钮
- 取消按钮点击事件
- 设置普通状态和选中状态的背景图片
- CGRectContainsPoint,移动到按钮范围内改变按钮为选中状态
- 按钮的连接:使用数组存储被选中的所有按钮,画上连线
- 已经连线的按钮不需要再连线
- 触摸结束清空连线和按钮选中状态
- 移动中也要画出线,最后的点用来辅助画移动中的线
- 解决bug:每次触摸开始重置当前画笔位置
- 设置触摸触发选中的按钮内部范围
- 使用tag记录按钮的选中顺序轨迹,触摸结束取得轨迹
- 封装整个手势解锁view成为一个自定义控件
- 封装按钮称为自定类
1 // 2 // ViewController.m 3 // HVWLockView 4 // 5 // Created by hellovoidworld on 15/1/12. 6 // Copyright (c) 2015年 hellovoidworld. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 11 @interface ViewController () 12 13 @end 14 15 @implementation ViewController 16 17 - (void)viewDidLoad { 18 [super viewDidLoad]; 19 // Do any additional setup after loading the view, typically from a nib. 20 21 // 设置背景 22 self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Home_refresh_bg"]]; 23 } 24 25 /** 设置状态栏样式 */ 26 - (UIStatusBarStyle)preferredStatusBarStyle { 27 return UIStatusBarStyleLightContent; 28 } 29 30 - (void)didReceiveMemoryWarning { 31 [super didReceiveMemoryWarning]; 32 // Dispose of any resources that can be recreated. 33 } 34 35 36 @end
1 // 2 // HVWLockView.m 3 // HVWLockView 4 // 5 // Created by hellovoidworld on 15/1/12. 6 // Copyright (c) 2015年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HVWLockView.h" 10 #import "HVWLockButton.h" 11 12 #define BUTTON_COUNT 9 13 #define BUTTON_COL_COUNT 3 14 15 @implementation HVWLockView 16 17 #pragma mark - 初始化方法 18 /** 使用文件初始化 */ 19 - (id)initWithCoder:(NSCoder *)aDecoder { 20 if (self = [super initWithCoder:aDecoder]) { 21 [self initView]; 22 } 23 return self; 24 } 25 26 /** 使用代码初始化 */ 27 - (instancetype)initWithFrame:(CGRect)frame { 28 if (self = [super initWithFrame:frame]) { 29 [self initView]; 30 } 31 return self; 32 } 33 34 /** 初始化view内的控件(按钮) */ 35 - (void) initView { 36 for (int i=0; i<BUTTON_COUNT; i++) { 37 HVWLockButton *button = [HVWLockButton buttonWithType:UIButtonTypeCustom]; 38 39 // 取消点击时间 40 button.userInteractionEnabled = NO; 41 42 // 设置指标tag,用来记录轨迹 43 button.tag = i; 44 45 // 设置普通状态图片 46 [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal]; 47 48 // 设置选中状态图片 49 [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected]; 50 51 // 加入按钮到lock view 52 [self addSubview:button]; 53 } 54 } 55 56 /** 设置按钮位置尺寸 */ 57 - (void)layoutSubviews { 58 [super layoutSubviews]; 59 60 // 取出所有按钮 61 for (int i=0; i<self.subviews.count; i++) { 62 HVWLockButton *button = self.subviews[i]; 63 CGFloat buttonWidth = 74; 64 CGFloat buttonHeight = 74; 65 66 // 此按钮所在列号 67 int col = i % BUTTON_COL_COUNT; 68 // 此按钮所在行号 69 int row = i / BUTTON_COL_COUNT; 70 // 等分水平多余空间,计算出间隙 71 CGFloat marginX = (self.frame.size.width - BUTTON_COL_COUNT * buttonWidth) / (BUTTON_COL_COUNT + 1); 72 CGFloat marginY = marginX; 73 74 // x坐标 75 CGFloat buttonX = marginX + col * (buttonWidth + marginX); 76 // y坐标 77 CGFloat buttonY = marginY + row * (buttonHeight + marginY); 78 79 button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight); 80 } 81 } 82 83 @end
1 #pragma mark - 触摸事件 2 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 3 UITouch *touch = [touches anyObject]; 4 CGPoint touchLocation = [touch locationInView:touch.view]; 5 6 // 检测哪个按钮被点中了 7 for (HVWLockButton *button in self.subviews) { 8 if (CGRectContainsPoint(button.frame, touchLocation)) { 9 button.selected = YES; 10 } 11 } 12 13 } 14 15 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 16 UITouch *touch = [touches anyObject]; 17 CGPoint touchLocation = [touch locationInView:touch.view]; 18 19 // 检测哪个按钮被点中了 20 for (HVWLockButton *button in self.subviews) { 21 if (CGRectContainsPoint(button.frame, touchLocation)) { 22 button.selected = YES; 23 } 24 } 25 } 26 27 - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 28 // 消除所有按钮选中状态 29 for (HVWLockButton *button in self.subviews) { 30 button.selected = NO; 31 } 32 }
1 // 2 // HVWLockButton.m 3 // HVWLockView 4 // 5 // Created by hellovoidworld on 15/1/12. 6 // Copyright (c) 2015年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HVWLockButton.h" 10 11 @implementation HVWLockButton 12 13 /** 使用文件创建会调用 */ 14 - (id)initWithCoder:(NSCoder *)aDecoder { 15 if (self = [super initWithCoder:aDecoder]) { 16 [self initLockButton]; 17 } 18 return self; 19 } 20 21 /** 使用代码创建会调用 */ 22 - (instancetype)initWithFrame:(CGRect)frame { 23 if (self = [super initWithFrame:frame]) { 24 [self initLockButton]; 25 } 26 return self; 27 } 28 29 /** 初始化 */ 30 - (void) initLockButton { 31 // 取消交互事件(点击) 32 self.userInteractionEnabled = NO; 33 34 // 设置普通状态图片 35 [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal]; 36 37 // 设置选中状态图片 38 [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected]; 39 } 40 41 @end
1 // 2 // HVWLockView.m 3 // HVWLockView 4 // 5 // Created by hellovoidworld on 15/1/12. 6 // Copyright (c) 2015年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HVWLockView.h" 10 #import "HVWLockButton.h" 11 12 #define BUTTON_COUNT 9 13 #define BUTTON_COL_COUNT 3 14 15 @interface HVWLockView() 16 17 /** 已选择按钮数组 */ 18 @property(nonatomic, strong) NSMutableArray *selectedButtons; 19 20 /** 触摸位置 */ 21 @property(nonatomic, assign) CGPoint currentTouchLocation; 22 23 @end 24 25 @implementation HVWLockView 26 27 /** 初始化数组 */ 28 - (NSMutableArray *)selectedButtons { 29 if (nil == _selectedButtons) { 30 _selectedButtons = [NSMutableArray array]; 31 } 32 return _selectedButtons; 33 } 34 35 #pragma mark - 初始化方法 36 /** 使用文件初始化 */ 37 - (id)initWithCoder:(NSCoder *)aDecoder { 38 if (self = [super initWithCoder:aDecoder]) { 39 [self initView]; 40 } 41 return self; 42 } 43 44 /** 使用代码初始化 */ 45 - (instancetype)initWithFrame:(CGRect)frame { 46 if (self = [super initWithFrame:frame]) { 47 [self initView]; 48 } 49 return self; 50 } 51 52 /** 初始化view内的控件(按钮) */ 53 - (void) initView { 54 // 设置透明背景 55 self.backgroundColor = [[UIColor alloc] initWithRed:1 green:1 blue:1 alpha:0]; 56 57 for (int i=0; i<BUTTON_COUNT; i++) { 58 HVWLockButton *button = [HVWLockButton buttonWithType:UIButtonTypeCustom]; 59 60 // 设置指标tag,用来记录轨迹 61 button.tag = i; 62 63 // 加入按钮到lock view 64 [self addSubview:button]; 65 } 66 } 67 68 /** 设置按钮位置尺寸 */ 69 - (void)layoutSubviews { 70 [super layoutSubviews]; 71 72 // 取出所有按钮 73 for (int i=0; i<self.subviews.count; i++) { 74 HVWLockButton *button = self.subviews[i]; 75 CGFloat buttonWidth = 74; 76 CGFloat buttonHeight = 74; 77 78 // 此按钮所在列号 79 int col = i % BUTTON_COL_COUNT; 80 // 此按钮所在行号 81 int row = i / BUTTON_COL_COUNT; 82 // 等分水平多余空间,计算出间隙 83 CGFloat marginX = (self.frame.size.width - BUTTON_COL_COUNT * buttonWidth) / (BUTTON_COL_COUNT + 1); 84 CGFloat marginY = marginX; 85 86 // x坐标 87 CGFloat buttonX = marginX + col * (buttonWidth + marginX); 88 // y坐标 89 CGFloat buttonY = marginY + row * (buttonHeight + marginY); 90 91 button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight); 92 } 93 } 94 95 #pragma mark - 触摸事件 96 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 97 98 [self touchesMoved:touches withEvent:event]; 99 100 } 101 102 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 103 UITouch *touch = [touches anyObject]; 104 CGPoint touchLocation = [touch locationInView:touch.view]; 105 106 // 检测哪个按钮被点中了 107 for (HVWLockButton *button in self.subviews) { 108 109 // 如果触碰到了此按钮 110 if (CGRectContainsPoint(button.touchFrame, touchLocation)) { 111 button.selected = YES; 112 113 // 如果此按钮没有被触碰过才进行处理 114 if (![self.selectedButtons containsObject:button]) { 115 // 加入到数组 116 [self.selectedButtons addObject:button]; 117 } 118 } 119 120 // 当前触摸位置 121 self.currentTouchLocation = touchLocation; 122 } 123 124 // 重绘 125 [self setNeedsDisplay]; 126 } 127 128 - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 129 // 轨迹序列 130 NSMutableString *passPath = [NSMutableString string]; 131 132 // 合成轨迹序列 133 for (HVWLockButton *button in self.selectedButtons) { 134 // 添加到轨迹序列 135 [passPath appendFormat:@"%d", button.tag]; 136 } 137 138 // 调用代理方法 139 if ([self.delegate respondsToSelector:@selector(hvwLockView:didFinishedWithPath:)]) { 140 [self.delegate hvwLockView:self didFinishedWithPath:passPath]; 141 } 142 143 // 清除选中状态 144 [self.selectedButtons makeObjectsPerformSelector:@selector(setSelected:) withObject:@(NO)]; 145 146 // 清空数组 147 [self.selectedButtons removeAllObjects]; 148 149 // 重绘 150 [self setNeedsDisplay]; 151 } 152 153 154 #pragma mark - 绘图方法 155 - (void)drawRect:(CGRect)rect { 156 UIBezierPath *path = [UIBezierPath bezierPath]; 157 158 // 遍历已选择按钮数组 159 for (int i=0; i<self.selectedButtons.count; i++) { 160 HVWLockButton *button = self.selectedButtons[i]; 161 162 if (0 == i) { 163 [path moveToPoint:button.center]; 164 } else { 165 [path addLineToPoint:button.center]; 166 } 167 } 168 169 if (self.selectedButtons.count) { 170 [path addLineToPoint:self.currentTouchLocation]; 171 } 172 173 // 设置画笔 174 [[UIColor redColor] set]; 175 [path setLineWidth:10]; 176 [path setLineCapStyle:kCGLineCapRound]; 177 [path setLineJoinStyle:kCGLineJoinBevel]; 178 179 [path stroke]; 180 } 181 182 @end
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。