效果图.png
1、实现
- 1.自定义解锁视图LockView
#import <UIKit/UIKit.h>
@interface LockView : UIView
@end
// .m文件实现
#import "LockView.h"
#define kColsCount 3
#define kBtnCount 9
#define kMargin 20
@interface LockView ()
@property (nonatomic, strong) NSMutableArray *selectedBtns; // 记录当前所有选中的按钮
@property (nonatomic, assign) CGPoint currentPoint; // 当前选中按钮的Point
@end
@implementation LockView
- (void)drawRect:(CGRect)rect{
if (_selectedBtns.count <= 0) {
return;
}
UIBezierPath *path = [[UIBezierPath alloc] init];
for (int i = 0; i< self.selectedBtns.count; i++) {
UIButton *btn = self.selectedBtns[i];
if (i == 0) {
[path moveToPoint:btn.center];
}else{
[path addLineToPoint:btn.center];
}
}
path.lineWidth = 15;
path.lineJoinStyle = kCGLineCapRound;
// 我在绘画结束后，将属性currentPoint设为CGPointZero了，因为如果如果在距前一个选中点绘画过程中，并没有连接下一个点，改线段不应该绘画
if (self.currentPoint.x != CGPointZero.x && self.currentPoint.y != CGPointZero.y) {
[path addLineToPoint:self.currentPoint];
}
[[UIColor greenColor] set];
[path stroke];
}
/**
* 懒加载
*
* @return 返回当前选中按钮
*/
- (NSArray *)selectedBtns{
if (_selectedBtns == nil) {
_selectedBtns = [NSMutableArray array];
}
return _selectedBtns;
}
/**
* 添加所有子控件按钮
*/
- (void)addAllButtons{
for (int i = 0; i<kBtnCount; i++) {
UIButton *btn = [[UIButton alloc] init];
btn.tag = i;
UIImage *imageNormal = [UIImage imageNamed:@"gesture_node_normal"];
btn.adjustsImageWhenHighlighted = NO; // 去除高亮调整图片
[btn setImage:imageNormal forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
/*
// 使用按钮点击时间，点击下去是鼠标抬起才会设置选中，但是不符合我的要求，我要的是鼠标进过就选中，所有就需要在视图上看如果经过按钮区域就选中即可。
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];
*/
btn.userInteractionEnabled = NO; // 设置按钮不能用户交互，然后在touchMoved方法中判断按钮选中状态
[self addSubview:btn];
}
}
//- (void)btnClick:(UIButton *)btn{
// btn.selected = YES;
//}
/**
* 布局子控件
*/
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat w = (self.frame.size.width - (kColsCount+1)*kMargin) / kColsCount;
CGFloat h = w;
CGFloat btnW = 74;
CGFloat btnH = 74;
CGFloat x = 0.0;
CGFloat y = 0.0;
for (int i = 0; i<self.subviews.count; i++) {
int col = i % kColsCount;
int row = i / kColsCount;
x = (kMargin + w) * col + kMargin;
y = (h + kMargin) * row + kMargin;
UIButton *btn = self.subviews[i];
btn.frame = CGRectMake(x, y, btnW, btnH);
}
}
/**
* initWithFrame:添加子控件
*/
- (nonnull instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self addAllButtons]; // 添加子控件
}
return self;
}
// xib加载完调用，添加子控件
- (void)awakeFromNib{
[self addAllButtons]; // 添加子控件
}
// 在移动中，判断点是否在按钮上，在，选中按钮，并将其添加到选中按钮的数组中记录下来.
- (void)touchesMoved:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint curP = [touch locationInView:self];
_currentPoint = curP;
// 转换点到按钮相对
for (UIButton *btn in self.subviews) {
CGPoint point = [self convertPoint:curP toView:btn];
BOOL isContainP = [btn pointInside:point withEvent:event];
if (isContainP && btn.selected == NO) {
btn.selected = YES;
[self.selectedBtns addObject:btn];
}
}
// 重绘
[self setNeedsDisplay];
}
- (void)touchesEnded:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
// 绘画结束，将属性currentPoint设为CGPointZero了，因为如果如果在距前一个选中点绘画过程中，并没有连接下一个点，改线段不应该绘画
_currentPoint = CGPointZero;
[self setNeedsDisplay];
}
@end
- 2.布局解锁视图，在控制器的view中，拖拽一个view控件，然后修改custom Class 为 LockView，运行就可以看见解锁视图效果了
