iOS开发-支付宝手势解锁实现展示

关注

原创最新推荐文章于 2026-04-20 10:08:32 发布 899 阅读 AI 写同款· GEO 优化 ›

支付宝手势解锁功能仿制指南本文还有配套的精品资源，点击获取简介：手势解锁是一种广泛应用于移动设备的安全机制，本篇文章将介绍如何在iOS平台上仿制支付宝的手势解锁功能。主要涉及触摸事件处理、自定义视图绘图，以及如何在视图中绘制手势路径和验证解锁手势。还包括如何初始化视图、存储和加载用户的手势路径，以及优化用户体验的其他功能。 1. 触摸事件处理触摸事件处理是移动应用开发中不可或缺的一部... 阅读详情

仿造支付宝写的一个手势解锁的Demo,那么废话不多说直接上代码!

// ViewController.h

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

// ViewController.m

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import "ViewController.h"

#import "ZZLockView.h"

@interface ViewController ()<ZZLockViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// 设置背景

[self setUpBackImg];

// 添加lockView

[self setUpLockView];

}

/**

* 设置背景

- (void)setUpBackImg

{

UIImageView *bgImg = [[UIImageView alloc] initWithFrame:self.view.frame];

bgImg.image = [UIImage imageNamed:@"Home_refresh_bg"];

[self.view addSubview:bgImg];

}

/**

* 添加lockView

- (void)setUpLockView

{

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

lockView.delegate = self;

lockView.backgroundColor = [UIColor clearColor];

lockView.center = CGPointMake(self.view.frame.size.width * 0.5, self.view.frame.size.height * 0.5);

lockView.bounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

[self.view addSubview:lockView];

}

/**

* 代理方法

- (void)lockView:(ZZLockView *)lockView didFinishPath:(NSString *)path

{

NSLog(@"拿到我们的path进行操作进行对比");

}

@end

// ZZLockView.h

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import <UIKit/UIKit.h>

@class ZZLockView;

@protocol ZZLockViewDelegate <NSObject>

@optional

- (void)lockView:(ZZLockView *)lockView didFinishPath:(NSString *)path;

@end

@interface ZZLockView : UIView

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

@end

// ZZLockView.m

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import "ZZLockView.h"

#import "ZZCircleBtn.h"

@interface ZZLockView()

@property (nonatomic, strong) NSMutableArray *selectedButtons;

@property (nonatomic, assign) CGPoint currentMovePoint;

@end

@implementation ZZLockView

- (NSMutableArray *)selectedButtons

{

if (!_selectedButtons) {

_selectedButtons = [NSMutableArray array];

}

return _selectedButtons;

}

/**

* 初始化

- (instancetype)initWithFrame:(CGRect)frame

{

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

[self setUp];

}

return self;

}

/**

* 无论你从什么创建Xib\代码创建都可以

- (instancetype)initWithCoder:(NSCoder *)aDecoder

{

if (self = [super initWithCoder:aDecoder]) {

[self setUp];

}

return self;

}

/**

* 添加按钮

- (void)setUp

{

for (int index = 0; index < 9; index++) {

#pragma mark --- 封装一层封装一层circleBtn

// 创建背景

ZZCircleBtn *btn = [ZZCircleBtn buttonWithType:UIButtonTypeCustom];

// 绑定tag得到路径(所以这里我们在数组中存的直接是这个按钮\当然你存按钮的中点也是可以的但是路径呢？)

btn.tag = index;

// 添加按钮

[self addSubview:btn];

}

/**

* 已经添加那么在这里设置他的frame

- (void)layoutSubviews

{

for (int index = 0; index < self.subviews.count; index++) {

// 取出按钮

ZZCircleBtn *btn = self.subviews[index];

int totolColumns = 3;

int col = index % totolColumns;

int row = index / totolColumns;

CGFloat btnW = 74;

CGFloat btnH = 74;

CGFloat marginX = (self.frame.size.width - totolColumns * btnW) / (totolColumns + 1);

CGFloat marginY = marginX;

CGFloat btnX = marginX + col * (marginX + btnW);

CGFloat btnY = marginY + row * (marginY + btnH);

btn.frame = CGRectMake(btnX, btnY, btnW, btnH);

}

#pragma mark ---- 私有方法

/**

* 根据touches的集合获得对应触摸点的位置

- (CGPoint)pointWithTouches:(NSSet *)touches

{

// 1.取出按钮的点

UITouch *touch = [touches anyObject];

return [touch locationInView:touch.view];

}

/**

* 根据我们的触摸点判断是不是选中的按钮

- (ZZCircleBtn *)buttonWithPoint:(CGPoint)point

{

// 遍历 CGRectContainsPoint(btn.frame, pos) 返回BOOL值看这个点在不在这个范围内

for (ZZCircleBtn *btn in self.subviews) {

#pragma mark ---- 判断到圆心的才连接

CGFloat wh = 24;

CGFloat frameX = btn.center.x - wh * 0.5;

CGFloat frameY = btn.center.y - wh * 0.5;

if (CGRectContainsPoint(CGRectMake(frameX, frameY, wh, wh), point)) {

return btn;

}

return nil;

}

#pragma mark ---- 触摸方法

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

{

// 0.我们一按下去就把这个点清空

self.currentMovePoint = CGPointZero;

// 1.获得触摸点

CGPoint pos = [self pointWithTouches:touches];

// 2.获得触摸的按钮

ZZCircleBtn *btn = [self buttonWithPoint:pos];

if (btn && btn.selected == NO) {

// 3.按钮被选中

btn.selected = YES;

// 4.添加到数组中(如果你直接这么写一看就没经验 [self.selectedButtons addObject:btn]; btn 可能为空所有以后数组和字典中添加东西一定判断为不为空)

[self.selectedButtons addObject:btn];

}

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

{

// 1.获得触摸点

CGPoint pos = [self pointWithTouches:touches];

// 2.获得触摸的按钮

ZZCircleBtn *btn = [self buttonWithPoint:pos];

if (btn && btn.selected == NO) {

// 3.按钮被选中

btn.selected = YES;

// 4.添加到数组中(如果你直接这么写一看就没经验 [self.selectedButtons addObject:btn]; btn 可能为空所有以后数组和字典中添加东西一定判断为不为空)

[self.selectedButtons addObject:btn];

} else { // 没有摸到按钮

self.currentMovePoint = pos;

}

// 5.刷新

[self setNeedsDisplay];

}

/**

* 触摸结束

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

{

if ([self.delegate respondsToSelector:@selector(lockView:didFinishPath:)]) {

// 得到画的路径

NSMutableString *path = [NSMutableString string];

for (ZZCircleBtn *btn in self.selectedButtons) {

[path appendFormat:@"%ld",btn.tag];

}

NSLog(@"%@",path);

[self.delegate lockView:self didFinishPath:path];

}

// 取消选中的所有按钮\能尽量优化的时候就应该优化那么这里没必要遍历所有的子控件

for (ZZCircleBtn *btn in self.selectedButtons) {

btn.selected = NO;

}

// 让所有的按钮都执行这个方法 \ 注意最后一个返回值一定要包装成对象就行

// [self.selectedButtons makeObjectsPerformSelector:@selector(setSelected:) withObject:@(NO)];

[self.selectedButtons removeAllObjects];

[self setNeedsDisplay];

}

/**

* 触摸被打破我们直接调用touchesEnded的方法

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

{

[self touchesEnded:touches withEvent:event];

}

#pragma mark --- 绘图

- (void)drawRect:(CGRect)rect

{

if (self.selectedButtons.count == 0) return;

UIBezierPath *path = [UIBezierPath bezierPath];

for (int index = 0; index < self.selectedButtons.count; index++) {

ZZCircleBtn *btn = self.selectedButtons[index];

if (index == 0) {

[path moveToPoint:btn.center];

} else {

[path addLineToPoint:btn.center];

}

// 如果当前点没有那么我们就要清除

if (CGPointEqualToPoint(self.currentMovePoint, CGPointZero) == NO) {

[path addLineToPoint:self.currentMovePoint];

}

// 设置连接样式

path.lineJoinStyle = kCGLineJoinBevel;

path.lineWidth = 10;

[[UIColor colorWithRed:32/255.0 green:210/255.0 blue:254/255.0 alpha:0.7] set];

[path stroke];

}

@end

// ZZCircleBtn.h

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import <UIKit/UIKit.h>

@interface ZZCircleBtn : UIButton

@end

// ZZCircleBtn.m

// Quartz 2D - 手势解锁

// Created by 周昭 on 16/4/12.

#import "ZZCircleBtn.h"

@implementation ZZCircleBtn

/**

* 初始化

- (instancetype)initWithFrame:(CGRect)frame

{

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

[self setUp];

}

return self;

}

/**

* 无论你从什么创建Xib\代码创建都可以

- (instancetype)initWithCoder:(NSCoder *)aDecoder

{

if (self = [super initWithCoder:aDecoder]) {

[self setUp];

}

return self;

}

/**

* 添加按钮

- (void)setUp

{

// 直接让按钮不能响应事件否则按钮长按会变色

self.userInteractionEnabled = NO;

// 设置默认按钮图片

[self setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];

// 设置选中是按钮的图片(为什么是selected？当你的按钮离开的时候就不是highlighted所以要选中)

[self setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];

}

@end

收录于

iOS-自定义控件

iOS-MVC思想

iOS-项目实战展示

标签

#Quartz 2D #支付宝手势解锁 #手势解锁 #自定义控件 #绘图

Dify安装使用说明 dify可以说是一个功能不错的LLMOps，可以通过dify集中管理模型，可以通过界面创建AI应用，可以上传文档形成知识库，可以创建自定义工具（API），并可以对外提供API。相关功能类似Openai的GPTs或智谱的智能体，其他大厂的大模型也有类似功能，不过貌似只有dify是开源的。这就为个人本地部署AI应用提供了便利。阅读详情

iOS开发-支付宝手势解锁实现展示

相关推荐