手势解锁

ViewController.m

//

//  ViewController.m

//  6A08.手势解锁

//

//  Created by huan on 16/2/1.

//  Copyright © 2016年 huanxi. All rights reserved.

//

#import "ViewController.h"

#import "CZLockView.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"]];

CZLockView *lockView = [[CZLockView alloc] init];

CGFloat screenW = [UIScreen mainScreen].bounds.size.width;

lockView.bounds = CGRectMake(0, 0, screenW, screenW);

lockView.backgroundColor = [UIColor clearColor];

lockView.center = self.view.center;

[self.view addSubview:lockView];

/**

* A.默认排版

*1.自定义一个View

*2.添加到控制器view

*3.自定义view添加按钮

* B.设置选中的按钮

1.判断当前这个触摸点在不在按钮的范围内,如果存在按钮范围内,设置按钮的选取状态

* C.设置按钮间的连线 UIBezierPath

* 1.记录所有选中按钮 放一个数组

* 2.遍历选中按钮的数组 进行绘制“线”

* 3.手指抬开的时候,取消连线

* D.添加最后一点的连线

* 1.添加一个属性记录最后的接触点

* 2.在drawRect方法,画线的时候,追加一个点

* E.选完密码后通知控制器

* 1.添加代理

* 2.拼接选中按钮的索引[touchesEnd] 012345

* 3.通知代理

*/

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

CZLockView.h

#import <UIKit/UIKit.h>

@class CZLockView;

@protocol CZLockViewDelegate<NSObject>

-(void)lockView:(CZLockView *)lockView didSeletedPassword:(NSString *)password;

@end

@interface CZLockView : UIView

@property (nonatomic, weak) id<CZLockViewDelegate>delegate;

@end

CZLockView.m

//

//  CZLockView.m

//  6A08.手势解锁

//

//  Created by huan on 16/2/1.

//  Copyright © 2016年 huanxi. All rights reserved.

//

#import "CZLockView.h"

@interface CZLockView()

/**

* 选中的所有的按钮

*/

@property (nonatomic, strong) NSMutableArray *selectedBtns;

@property (nonatomic, assign) CGPoint lastPoint;

@end

@implementation CZLockView

-(NSMutableArray *)selectedBtns{

if (!_selectedBtns) {

_selectedBtns = [NSMutableArray array];

}

return _selectedBtns;

}

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

*/

- (void)drawRect:(CGRect)rect {

// Drawing code

//遍历所有有选中的按钮

NSInteger selectedCount = self.selectedBtns.count;

//CGPathAddLineToPoint(CGMutablePathRef _Nullable, const CGAffineTransform * _Nullable, CGFloat, CGFloat): no current point. 出现这样的问题,第一if语句可以解决。

if (selectedCount == 0) {

return;

}

//创建一个路径

UIBezierPath *path = [UIBezierPath bezierPath];

for (NSInteger i = 0; i < selectedCount; i++) {

CGPoint btnCenter = [self.selectedBtns[i] center];

if (i == 0) {

[path moveToPoint:btnCenter];

}else{

[path addLineToPoint:btnCenter];

}

}

//追加一个点的路径

[path addLineToPoint:self.lastPoint];

path.lineWidth = 5;

//连接点样式

path.lineCapStyle = kCGLineCapRound;

path.lineJoinStyle = kCGLineJoinRound;

[[UIColor greenColor] set];

//渲染

[path stroke];

}

-(instancetype)initWithFrame:(CGRect)frame{

//初始化按钮

if (self = [super initWithFrame:frame]) {

[self setupBtns];

}

return self;

}

-(void)setupBtns{

//添加9个按钮

for (NSInteger i = 0; i < 9; i++) {

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

//绑定tag

btn.tag = i;

//设置默认图片

[btn setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];

//设置选中的图片

[btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];

//设置按钮不可用

btn.userInteractionEnabled = NO;

[self addSubview:btn];

}

}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

//    1.判断当前这个触摸点在不在按钮的范围内,如果存在按钮范围内,设置按钮的选取状态

//1.1 获取当前触摸点

UITouch *touch = [touches anyObject];

CGPoint touchP = [touch locationInView:touch.view];

//1.2 判断当前这个触摸点在不在按钮的范围内

//遍历所有的按钮

for (UIButton *btn in self.subviews) {

// 放在一个选中按钮的数组

if (CGRectContainsPoint(btn.frame, touchP)) {

if (btn.selected == NO) {

[self.selectedBtns addObject:btn];

}

//设置选中状态

btn.selected = YES;

NSLog(@"YES....");

}else{

//记录最后触摸点

self.lastPoint = touchP;

}

}

//重绘

[self setNeedsDisplay];

}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

NSLog(@"选中按钮的个数 %ld", self.selectedBtns.count);

//拼接选中按钮的索引

NSMutableString *password = [NSMutableString string];

for (UIButton *selected in self.selectedBtns) {

[password appendFormat:@"%ld",selected.tag];

}

NSLog(@"password :%@", password);

//   手指抬开的时候,取消连线

//取消所有按钮的选中状态为NO

//    [self.selectedBtns makeObjectsPerformSelector:@selector(setSelected:) withObject:@NO];//   这行代码并不能恢复按钮状态

for (UIButton *btn in self.subviews) {

// 放在一个选中按钮的数组

//设置选中状态

btn.selected = NO;

NSLog(@"YES....");

}

//移除所有选中的按钮

[self.selectedBtns removeAllObjects];

//重绘

[self setNeedsDisplay];

}

-(void)layoutSubviews{

[super layoutSubviews];

//重新布局9个按钮

CGFloat btW = 74;

CGFloat btH = 74;

NSInteger btnCount = self.subviews.count;

CGFloat padding = (self.frame.size.width - 3 * btW)/4;

for (NSInteger i = 0; i < btnCount; i++) {

UIButton *btn = self.subviews[i];

//当前按钮所处的列

NSInteger column = i % 3;

// 当前按钮所处的行

NSInteger row = i/3;

//计算每一个按钮的位置

// x = 间距 + (按钮的宽度 +间距)*列

CGFloat btnX = padding +(btW + padding) *column;

// y = 间距 +(按钮的高度 + 间距)*行

CGFloat btnY = padding + (btH + padding) *row;

btn.frame = CGRectMake(btnX, btnY, btW, btH);

}

}

@end

时间: 2024-10-11 13:12:33

手势解锁的相关文章

九点(九宫格)式手势解锁自定义view

周末闲着没事,写了个手势解锁的view,实现起来也蛮快的,半天多一点时间就完事.把源码和资源贴出来,给大家分享,希望对大家有用. 效果,就跟手机上的九点手势解锁一样,上个图吧: 过程嘛感觉确实没啥好讲的了,涉及的知识以前的博客都说过了,无非就是canva,paint,touch事件这些,画画圆圈画画线条,剩下的就是细节处理逻辑了.都在代码里,所以这里就主要是贴资源吧. 这个自定义view就一个类,源码如下: package com.cc.library.view; import android.

iOS开发之手势解锁

本文主要介绍通过手势识别实现手势解锁功能,这个方法被广泛用于手机解锁,密码验证,快捷支付等功能实现.事例效果如下所示. 首先,我们先分析功能的实现过程,首先我们需要先看大致的实现过程: 1.加载九宫格页面 2.实现按钮被点击及滑动过程中按钮状态的改变 3.实现滑动过程中的连线 4.绘制完毕后判定密码是否正确, 5.密码判定后实现跳转. 下面我们就来用代码实现上述五个过程. 1.加载九宫格界面 1.1九宫格内控件的分布 3*3 ,我们可以自定义view(包含3*3个按钮),添加到viewContr

(素材源码)猫猫学IOS(三十五)UI之Quartz2D仿真支付宝手势解锁_代理获得密码。

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 源码:http://download.csdn.net/detail/u013357243/8669765 效果: 代码: NYLockView.h // // NYLockView.h // 手势解锁 // // Created by apple on 15-5-6. // Copyright (c) 2015年 znyca

【iOS开发之旅】手势解锁

BOERLockView.h // // BOERLockView.h // BoerScore // // Created by ChenQianPing on 16/2/18. // Copyright © 2016年 boer. All rights reserved. // #import <UIKit/UIKit.h> @class BOERLockView; @protocol BOERLockViewDelegate <NSObject> // 结束手势解锁代理事件

手势解锁步骤的基本思路

------------- 基本思路 -------------- - 1. 搭建界面,九宫格算法 - 2. 处理按钮选中状态 - 3. 按钮之间画线 - 4. 手指和按钮之间画线 - 5. 判断解锁密码是否正确 ------------- 基本思路 -------------- 1. 拖拽图片素材 2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果 self.view.backgroundColor = [UIColor colorWithPatter

UI进阶--Quartz2D和触摸事件的简单使用:手势解锁

需求:实现一个简易的手势解锁应用,具体效果如下图所示: 实现步骤: 1.代码创建界面,自定义一个view,设置view的背景,颜色等属性: 2.在自定义的view中,定义2个属性,一个是存储被选中按钮的可变数组,另外一个是最后的触摸点(CGPoint); 3.重写initWithFrame方法,在这里,自定义一个方法给initWithFrame方法调用即可,这个自定义的方法里,初始化9个按钮,设置每个按钮的tag,正常状态下的图片以及选中状态的图片,并设置和用户的交互为NO: 4.在自定义的vi

2016-1-10 手势解锁demo的实现

一:实现自定义view,在.h,.m文件中代码如下: #import <UIKit/UIKit.h> @class ZLLockView; @protocol ZLLockViewDelegate <NSObject> - (void)lockView:(ZLLockView *)lockView didSelectedPwd: (NSString *)pwd; @end @interface ZLLockView : UIView @property (nonatomic, we

微信小程序开发教程-手势解锁

手势解锁是app上常见的解锁方式,相比输入密码方式操作起来要方便许多.下面展示如何基于微信小程序实现手机解锁.最终实现效果如下图: 整个功能基于canvas实现,首先添加画布组件,并设定样式 <!--index.wxml--> <view class="container"> <canvas canvas-id="id-gesture-lock" class="gesture-lock" bindtouchstart

手势解锁的实现思路

------------- 基本思路 -------------- - 1. 搭建界面,九宫格算法 - 2. 处理按钮选中状态 - 3. 按钮之间画线 - 4. 手指和按钮之间画线 - 5. 判断解锁密码是否正确 ------------- 基本思路 -------------- 1. 拖拽图片素材 2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果 self.view.backgroundColor = [UIColor colorWithPatter