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

A.需求

1.九宫格手势解锁

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

 

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

 

 

B.实现

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

 

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

 

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

 //
 //  ViewController.m
 //  HVWLockView
 //
 //  Created by hellovoidworld on 15/1/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "ViewController.h"

 @interface ViewController ()

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     // 设置背景
     self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Home_refresh_bg"]];
 }

 /** 设置状态栏样式 */
 - (UIStatusBarStyle)preferredStatusBarStyle {
     return UIStatusBarStyleLightContent;
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 @end

 

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

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

 //
 //  HVWLockView.m
 //  HVWLockView
 //
 //  Created by hellovoidworld on 15/1/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWLockView.h"
 #import "HVWLockButton.h"

 #define BUTTON_COUNT 9
 #define BUTTON_COL_COUNT 3

 @implementation HVWLockView

 #pragma mark - 初始化方法
 /** 使用文件初始化 */
 - (id)initWithCoder:(NSCoder *)aDecoder {
     if (self = [super initWithCoder:aDecoder]) {
         [self initView];
     }
     return self;
 }

 /** 使用代码初始化 */
 - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
         [self initView];
     }
     return self;
 }

 /** 初始化view内的控件(按钮) */
 - (void) initView {
     for (int i=; i<BUTTON_COUNT; i++) {
         HVWLockButton *button = [HVWLockButton buttonWithType:UIButtonTypeCustom];

         // 取消点击时间
         button.userInteractionEnabled = NO;

         // 设置指标tag，用来记录轨迹
         button.tag = i;

         // 设置普通状态图片
         [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];

         // 设置选中状态图片
         [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];

         // 加入按钮到lock view
         [self addSubview:button];
     }
 }

 /** 设置按钮位置尺寸 */
 - (void)layoutSubviews {
     [super layoutSubviews];

     // 取出所有按钮
     for (int i=; i<self.subviews.count; i++) {
         HVWLockButton *button = self.subviews[i];
         CGFloat buttonWidth = ;
         CGFloat buttonHeight = ;

         // 此按钮所在列号
         int col = i % BUTTON_COL_COUNT;
         // 此按钮所在行号
         int row = i / BUTTON_COL_COUNT;
         // 等分水平多余空间，计算出间隙
         CGFloat marginX = (self.frame.size.width - BUTTON_COL_COUNT * buttonWidth) / (BUTTON_COL_COUNT + );
         CGFloat marginY = marginX;

         // x坐标
         CGFloat buttonX = marginX + col * (buttonWidth + marginX);
         // y坐标
         CGFloat buttonY = marginY + row * (buttonHeight + marginY);

         button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
     }
 }

 @end

 

out:

 

 

5.实现触摸事件方法

（1）点击开始，使被点击的按钮改变为选中状态（改变图片）

（2）点击拖曳中，同样使被触碰到的按钮改变为选中状态

（3）点击结束，清空选中状态

（4）小修改：把HVWLockView背景改为透明

 

HVWLockView：

 #pragma mark - 触摸事件
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint touchLocation = [touch locationInView:touch.view];

     // 检测哪个按钮被点中了
     for (HVWLockButton *button in self.subviews) {
         if (CGRectContainsPoint(button.frame, touchLocation)) {
             button.selected = YES;
         }
     }

 }

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint touchLocation = [touch locationInView:touch.view];

     // 检测哪个按钮被点中了
     for (HVWLockButton *button in self.subviews) {
         if (CGRectContainsPoint(button.frame, touchLocation)) {
             button.selected = YES;
         }
     }
 }

 - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
     // 消除所有按钮选中状态
     for (HVWLockButton *button in self.subviews) {
         button.selected = NO;
     }
 }

 

out:

 

6.画出连接线

（1）优化：将按钮封装为一个类HVWLockButton

 //
 //  HVWLockButton.m
 //  HVWLockView
 //
 //  Created by hellovoidworld on 15/1/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWLockButton.h"

 @implementation HVWLockButton

 /** 使用文件创建会调用 */
 - (id)initWithCoder:(NSCoder *)aDecoder {
     if (self = [super initWithCoder:aDecoder]) {
         [self initLockButton];
     }
     return self;
 }

 /** 使用代码创建会调用 */
 - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
         [self initLockButton];
     }
     return self;
 }

 /** 初始化 */
 - (void) initLockButton {
     // 取消交互事件（点击）
     self.userInteractionEnabled = NO;

     // 设置普通状态图片
     [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];

     // 设置选中状态图片
     [self setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
 }

 @end

 

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

（3）把触碰到的按钮到加入到上述数组中

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

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

（6）重复触碰同一个按钮的时候，不用重绘和计算

（7）创建一个代理方法，在触摸结束的时候输出轨迹序列

（8）精简一下代码

 

 //
 //  HVWLockView.m
 //  HVWLockView
 //
 //  Created by hellovoidworld on 15/1/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWLockView.h"
 #import "HVWLockButton.h"

 #define BUTTON_COUNT 9
 #define BUTTON_COL_COUNT 3

 @interface HVWLockView()

 /** 已选择按钮数组 */
 @property(nonatomic, strong) NSMutableArray *selectedButtons;

 /** 触摸位置 */
 @property(nonatomic, assign) CGPoint currentTouchLocation;

 @end

 @implementation HVWLockView

 /** 初始化数组 */
 - (NSMutableArray *)selectedButtons {
     if (nil == _selectedButtons) {
         _selectedButtons = [NSMutableArray array];
     }
     return _selectedButtons;
 }

 #pragma mark - 初始化方法
 /** 使用文件初始化 */
 - (id)initWithCoder:(NSCoder *)aDecoder {
     if (self = [super initWithCoder:aDecoder]) {
         [self initView];
     }
     return self;
 }

 /** 使用代码初始化 */
 - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
         [self initView];
     }
     return self;
 }

 /** 初始化view内的控件(按钮) */
 - (void) initView {
     // 设置透明背景
     self.backgroundColor = [[UIColor alloc] initWithRed: green: blue: alpha:];

     for (int i=; i<BUTTON_COUNT; i++) {
         HVWLockButton *button = [HVWLockButton buttonWithType:UIButtonTypeCustom];

         // 设置指标tag，用来记录轨迹
         button.tag = i;

         // 加入按钮到lock view
         [self addSubview:button];
     }
 }

 /** 设置按钮位置尺寸 */
 - (void)layoutSubviews {
     [super layoutSubviews];

     // 取出所有按钮
     for (int i=; i<self.subviews.count; i++) {
         HVWLockButton *button = self.subviews[i];
         CGFloat buttonWidth = ;
         CGFloat buttonHeight = ;

         // 此按钮所在列号
         int col = i % BUTTON_COL_COUNT;
         // 此按钮所在行号
         int row = i / BUTTON_COL_COUNT;
         // 等分水平多余空间，计算出间隙
         CGFloat marginX = (self.frame.size.width - BUTTON_COL_COUNT * buttonWidth) / (BUTTON_COL_COUNT + );
         CGFloat marginY = marginX;

         // x坐标
         CGFloat buttonX = marginX + col * (buttonWidth + marginX);
         // y坐标
         CGFloat buttonY = marginY + row * (buttonHeight + marginY);

         button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
     }
 }

 #pragma mark - 触摸事件
 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

     [self touchesMoved:touches withEvent:event];

 }

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
     UITouch *touch = [touches anyObject];
     CGPoint touchLocation = [touch locationInView:touch.view];

     // 检测哪个按钮被点中了
     for (HVWLockButton *button in self.subviews) {

         // 如果触碰到了此按钮
         if (CGRectContainsPoint(button.touchFrame, touchLocation)) {
             button.selected = YES;

             // 如果此按钮没有被触碰过才进行处理
             if (![self.selectedButtons containsObject:button]) {
                 // 加入到数组
                 [self.selectedButtons addObject:button];
             }
         }

         // 当前触摸位置
         self.currentTouchLocation = touchLocation;
     }

     // 重绘
     [self setNeedsDisplay];
 }

 - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
     // 轨迹序列
     NSMutableString *passPath = [NSMutableString string];

     // 合成轨迹序列
     for (HVWLockButton *button in self.selectedButtons) {
         // 添加到轨迹序列
         [passPath appendFormat:@"%d", button.tag];
     }

     // 调用代理方法
     if ([self.delegate respondsToSelector:@selector(hvwLockView:didFinishedWithPath:)]) {
         [self.delegate hvwLockView:self didFinishedWithPath:passPath];
     }

     // 清除选中状态
     [self.selectedButtons makeObjectsPerformSelector:@selector(setSelected:) withObject:@(NO)];

     // 清空数组
     [self.selectedButtons removeAllObjects];

     // 重绘
     [self setNeedsDisplay];
 }

 #pragma mark - 绘图方法
 - (void)drawRect:(CGRect)rect {
     UIBezierPath *path = [UIBezierPath bezierPath];

     // 遍历已选择按钮数组
     for (int i=; i<self.selectedButtons.count; i++) {
            HVWLockButton *button = self.selectedButtons[i];

         if ( == i) {
             [path moveToPoint:button.center];
         } else {
             [path addLineToPoint:button.center];
         }
     }

     if (self.selectedButtons.count) {
         [path addLineToPoint:self.currentTouchLocation];
     }

     // 设置画笔
     [[UIColor redColor] set];
     [path setLineWidth:];
     [path setLineCapStyle:kCGLineCapRound];
     [path setLineJoinStyle:kCGLineJoinBevel];

     [path stroke];
 }

 @end

 

out:

 

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