首先看下我们要制作功能的效果如图所示:
效果图
思路介绍
- 手势密码一般为9宫格模式，通过手势滑动设置一个
多边形(polygon)的密码图片。 - 9宫格的每一个
格子可以用按钮表示节点，也可以用CAShapeLayer来绘制节点。 - 在这里采用
CAShapeLayer来绘制9宫格的节点，手势密码的节点有选中模式、正常模式和警告模式三种状态，特别说明:警告模式是在第二次密码输入与第一次密码不一致，或者解锁密码错误的时候提示的状态。正常模式只是一个空心圆，选中模式是一个内部的实心圆+外部的空心圆，警告模式只是改变选中模式的颜色，所以这里采用两个CAShapeLayer对象来绘制外部空心圆和内部实心圆(outlineLayer和innerCircleLayer)。 - 创建节点类
LockNodeView和密码视图类LockView，LockView采用maskView方式添加密码视图，9宫格用[maskPath appendPath:[UIBezierPath bezierPathWithOvalInRect:frame]来绘制，frame为每个节点的坐标，9个节点通过UIBezierPath统一绘制成一个图形，这样有利于管理。 - 重写视图的
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event和-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event方法，也可以用滑动手势代替。 - 滑动的时候去判断手势坐标滑到了哪一个
节点，并且判断节点是否已经被选中，未选中添加连线。 - 在滑动结束的时候获取保存
节点的数组，连接节点的tag组成一个字符串，作为手势结果密码。
节点类
@interface DYHLockNodeView ()
/**
手势外部的空心圆
*/
@property (nonatomic, strong) CAShapeLayer *outlineLayer;
/**
手势内部的实心圆
*/
@property (nonatomic, strong) CAShapeLayer *innerCircleLayer;
@end
- (void)layoutSubviews {
self.outlineLayer.frame = self.bounds;
UIBezierPath *outlinePath = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
self.outlineLayer.path = outlinePath.CGPath;
//中心圆的直径为外部圆的1/3
CGFloat innerWidth = self.bounds.size.width / 3;
self.innerCircleLayer.frame = CGRectMake(innerWidth, innerWidth, innerWidth, innerWidth);
UIBezierPath *innerPath = [UIBezierPath bezierPathWithOvalInRect:self.innerCircleLayer.bounds];
self.innerCircleLayer.path = innerPath.CGPath;
}
- (void)setStatusNormal {
self.outlineLayer.strokeColor = [UIColor whiteColor].CGColor;
self.innerCircleLayer.fillColor = [UIColor clearColor].CGColor;
}
- (void)setStatusSelected {
self.outlineLayer.strokeColor = LIGHTBLUE.CGColor;
self.innerCircleLayer.fillColor = LIGHTBLUE.CGColor;
}
- (void)setStatusWarning {
self.outlineLayer.strokeColor = [UIColor redColor].CGColor;
self.innerCircleLayer.fillColor = [UIColor redColor].CGColor;
}
密码视图类
初始化添加9宫格节点，然后在layoutSubviews中布局
[self.layer addSublayer:self.polygonLineLayer];
_nodes = [NSMutableArray arrayWithCapacity:9];
for (int i = 0; i < 9; i++) {
DYHLockNodeView *nodeView = [[DYHLockNodeView alloc] init];
nodeView.tag = i;
[_nodes addObject:nodeView];
[self addSubview:nodeView];
}
_selectedNodes = [NSMutableArray arrayWithCapacity:9];
_points = [NSMutableArray array];
绘制九宫格
- (void)layoutSubviews {
//添加一个mask层
self.polygonLineLayer.frame = self.bounds;
CAShapeLayer *maskLayer = [CAShapeLayer new];
maskLayer.frame = self.bounds;
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:self.bounds];
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.lineWidth = 1.0f;
maskLayer.strokeColor = [UIColor blackColor].CGColor;
maskLayer.fillColor = [UIColor blackColor].CGColor;
//每行3个nodeView，没列3个，上下左右间距为一个nodeView的宽
for (int i = 0; i < self.nodes.count; i++) {
DYHLockNodeView *nodeView = self.nodes[i];
CGFloat min = self.bounds.size.width < self.bounds.size.height ? self.bounds.size.width : self.bounds.size.height;
CGFloat width = min / 5;
CGFloat height = width;
int row = i % 3;
int column = i / 3;
CGRect frame = CGRectMake(row * (width * 2), column * (width * 2), width, height);
nodeView.frame = frame;
[maskPath appendPath:[UIBezierPath bezierPathWithOvalInRect:frame]];
}
maskLayer.path = maskPath.CGPath;
self.polygonLineLayer.mask = maskLayer;
}
手势滑动判断滑动位置
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = touches.anyObject;
CGPoint touchPoint = [touch locationInView:self];
// 查找手指滑过的node
NSInteger index = [self indexForNodeAtPoint:touchPoint];
if (index >= 0) {
DYHLockNodeView *node = self.nodes[index];
if (![self addSelectedNode:node]) {
//移动线到手势位置
[self moveLineWithFingerPosition:touchPoint];
}
} else {
[self moveLineWithFingerPosition:touchPoint];
}
}
手势滑动结束
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//手势结束的时候，清除超出节点的线，起点在第一个节点中心，结束也是最后一个节点中心，超出部分不需要绘制
[self removeLastFingerPosition];
if([self.delegate respondsToSelector:@selector(lockView:didEndSwipeWithPassword:)]) {
NSMutableString *password = [NSMutableString new];
for(DYHLockNodeView *nodeView in self.selectedNodes) {
NSString *index = [@(nodeView.tag) stringValue];
[password appendString:index];
}
self.viewState = [self.delegate lockView:self didEndSwipeWithPassword:password];
} else {
self.viewState = DYHLockViewStateSelected;
}
}
