[iOS UI进阶 - 5.0] 手势解锁Demo

A.需求

1.九宫格手势解锁

2.使用了绘图和手势事件

code source: https://github.com/hellovoidworld/GestureUnlockDemo

B.实现

  • 使用按钮来处理每个圆点
  • 使用代码生成按钮
  • 取消按钮点击事件
  • 设置普通状态和选中状态的背景图片
  • CGRectContainsPoint,移动到按钮范围内改变按钮为选中状态
  • 按钮的连接:使用数组存储被选中的所有按钮,画上连线
  • 已经连线的按钮不需要再连线
  • 触摸结束清空连线和按钮选中状态
  • 移动中也要画出线,最后的点用来辅助画移动中的线
  • 解决bug:每次触摸开始重置当前画笔位置
  • 设置触摸触发选中的按钮内部范围
  • 使用tag记录按钮的选中顺序轨迹,触摸结束取得轨迹
  • 封装整个手势解锁view成为一个自定义控件
  • 封装按钮称为自定类

1.准备基础界面,使用一个UIView作为解锁画面

2.在控制器ViewController设置一下背景图片和状态栏

 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

3.自定义解锁画面的类HVWLockView

4.使用代码初始化HVWLockView的子控件—按钮,设置按钮的样式、位置尺寸

 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

out:

5.实现触摸事件方法

(1)点击开始,使被点击的按钮改变为选中状态(改变图片)

(2)点击拖曳中,同样使被触碰到的按钮改变为选中状态

(3)点击结束,清空选中状态

(4)小修改:把HVWLockView背景改为透明

HVWLockView:

 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 }

out:

6.画出连接线

(1)优化:将按钮封装为一个类HVWLockButton

 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

(2)使用一个数组来存储已经被选择的按钮

(3)把触碰到的按钮到加入到上述数组中

(4)在绘图方法中把数组内的按钮用线连起来

(5)使用一个成员变量来存储当前触摸位置,画出最后触摸的按钮到现触摸点的线

(6)重复触碰同一个按钮的时候,不用重绘和计算

(7)创建一个代理方法,在触摸结束的时候输出轨迹序列

(8)精简一下代码

  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

out:

2015-01-12 16:39:23.794 HVWLockView[10274:184387] 手势解锁的输出序列:01246

时间: 01-11

[iOS UI进阶 - 5.0] 手势解锁Demo的相关文章

iOS UI进阶-6.0 手势

在开发过程中,经常会用到,需要关闭某个页面的手势返回功能. // 禁用返回手势 - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; // 禁用 返回手势 if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.navigationController.inter

[iOS UI进阶 - 4.0] 涂鸦app Demo

A.需求 1.超简易画图,只有一种画笔 2.清屏功能 3.回退功能 4.保存功能 5.使用了cocos2D code source: https://github.com/hellovoidworld/PaintDemo B.实现方法1 1.基本界面 (1)3个按钮:清屏.回退.保存 (2)绘图view 2.画线 (1)使用数组存储绘图点:存储一条线的数组.存储所有线的总数组 (2)在touch的开始.拖曳.结束记录触摸位置,触发重绘 3.清屏 删除总数组 4.回退 删除最后画的一条线:删除相应

[iOS UI进阶 - 3.0] 触摸事件的基本处理

A.需要掌握和练习的 1.介绍事件类型2.通过按钮的事件处理引出view的事件处理3.响应者对象 --> UIResponder --> UIView4.view的拖拽* 实现触摸方法,打印查看* 介绍touches和UIEvent参数* 扩展:点哪去哪5.涂鸦6.手势解锁7.事件的产生和传递8.响应者链条 9.手势 B.概念 1.iOS有3种主要事件 触摸事件 加速计事件 远程控制事件 2.响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事

[iOS UI进阶 - 2.0] 彩票Demo v1.0

A.需求 1.模仿"网易彩票"做出有5个导航页面和相应功能的Demo 2.v1.0 版本搭建基本框架 B.搭建基本框架 1.拖入TaBarController,5个NavigationController和对应的5个UIViewController 2.配置图标和启动画面 AppIcon直接拖入图片 LaunchImage在Xcode6中需要先更改启动图使用图库的图片,而不是LaunchImage.xib 2.引入图片包 4. 按照模块分类代码包 3.底部导航--自定义TabBar (

iOS UI进阶-1.0 Quartz2D

概述 Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统.Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 代码实现 绘制线条 #import "LineView.h" @implementation LineView -(void)drawRect:(CGRect)rect { // Drawing code // 1.获得图形上下文 CGContextRef

[iOS UI进阶 - 3.2] 手势识别器UIGestureRecognizer

A.系统提供的手势识别器 1.敲击手势 UITapGestureRecognizer numberOfTapsRequired: 敲击次数 numberOfTouchesRequired: 同时敲击触碰数(手指数) 1 - (void) testTap { 2 // 创建手势识别器 3 UITapGestureRecognizer *tapRec = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapR

iOS UI进阶-1.0网易彩票框架搭建

仿网易彩票,最终要做成的效果如下: 一.分层搭建 1.新建一个项目,Lottery.只支持7.1以上坚屏. 2.将素材全部图片全部拉到相应的文件夹里. 3.选中Lottery--右键Show in Finder ,在Lottery文件夹下新建一个Classes,并分别分层成MVC文件夹. 4.把Classes拉到Lottery项目里,整个框架结构如 二.UI搭建 分层好之后,接下来,我们搭建一下界面.使用Storyboard进行搭建. 1.点击Main.storyboard,删除原来的界面,分别

iOS UI进阶-4.0 地图与定位

在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院 在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能,必须基于2个框架进行开发 Map Kit :用于地图展示 Core Location :用于地理定位 2个热门专业术语 LBS :Location Based Service SoLoMo :Social Local Mobile(索罗门)

iOS UI进阶-2.0 CALayer

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层.在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 @property(nonatomic,readonly,retain) CALayer *layer; 当UIView需要显示到屏幕上时,会调用drawRect