iOS实现九宫格手势解锁-优快云博客

本文介绍如何在iOS平台上创建一个九宫格手势解锁功能，通过自定义UIView子类YFNineFunctionView，加载并布局按钮，实现手势解锁交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于没有图片素材实现效果比较简单》

重新添加一个继承与UIView 的类

YFNineFunctionView.h

初始化时加载按钮，并设置属性

- (instancetype)init
{
    self = [super init];
    if (self) {
        //初始化时加载视图
        [self setUpView];
    }
    return self;
}
//加载九个视图按钮，并且设置按钮属性
-(void)setUpView{
    for (int i = 0; i < 9; i++) {
    UIButton *btn  = [UIButton buttonWithType:UIButtonTypeSystem];
        btn.userInteractionEnabled = NO;
        [btn.layer setMasksToBounds:YES];
        //设置圆形按钮
        btn.layer.cornerRadius = 40;
        btn.userInteractionEnabled = NO;
        //设置边框
        btn.layer.borderWidth = 2.0;
        //[btn.layer setBorderWidth:2.0];
        //a设置边框颜色
        CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
        CGColorRef color = CGColorCreate(colorSpaceRef, (CGFloat[]){217/255.0,240/255.0,255/255.0,1});
        btn.layer.borderColor = color;
        [self addSubview:btn];
    }
}

在layoutSubviews中布局按钮位置

-(void)layoutSubviews{
    [super layoutSubviews];
    float Width = 80;
    float Height = 80;
    float margon = 30;
    for (int i = 0; i < 9; i++) {
    UIButton *btn = (UIButton *)self.subviews[i];
    btn.tag = i+1;
    btn.frame = CGRectMake((i/3)*(Width + margon), (i%3)*(Width + margon), Width, Height);
}
}

处理视图的一系列触摸事件

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)even{
    
    CGPoint point = [self getCurrentPoint:touches];
    UIButton *btn = [self getCurrentButton:point];
    if (btn&&btn.selected != YES) {
        btn.selected = YES;
        [self.buttons addObject:btn];
    }
    [self setNeedsDisplay];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    CGPoint point = [self getCurrentPoint:touches];
    UIButton *btn = [self getCurrentButton:point];
    if (btn&&btn.selected != YES) {
        btn.selected = YES;
        [self.buttons addObject:btn];
    }
    [self setNeedsDisplay];
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
}
//获得点击点
-(CGPoint)getCurrentPoint:(NSSet*)touches{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:touch.view];
    return point;
}
//获得点击处的按钮
-(UIButton *)getCurrentButton:(CGPoint)point{
    for (UIButton *btn in self.subviews) {
        //判断point是否在按钮内
        if (CGRectContainsPoint(btn.frame, point)) {
            
            
            return btn;
        }
    }
    
    return nil;
}

绘制线条

//绘图
-(void)drawRect:(CGRect)rect{
    //获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    for (int i = 0; i < self.buttons.count; i++) {
        UIButton *btn=self.buttons[i];
    if (0==i) {
        //设置起点（注意连接的是中点）
        //            CGContextMoveToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
            CGContextMoveToPoint(ctx, btn.center.x, btn.center.y);
    }else
        {
        //            CGContextAddLineToPoint(ctx, btn.frame.origin.x, btn.frame.origin.y);
        CGContextAddLineToPoint(ctx, btn.center.x, btn.center.y);
    }
     }
    CGContextSetLineWidth(ctx, 10);
       CGContextSetRGBStrokeColor(ctx, 20/255.0, 107/255.0, 153/255.0, 1);
    CGContextStrokePath(ctx);
}

FNineFunctionView

YFNineFunctionView