iOS实现九宫格连线手势解锁

本文实例为大家分享了iOS实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下

Demo下载地址:手势解锁

效果图:

核心代码:

//
// ClockView.m
// 手势解锁
//
// Created by llkj on 2017/8/24.
// Copyright © 2017年 LayneCheung. All rights reserved.
//

#import "ClockView.h"

@interface ClockView ()

//存放当前选中的按钮
@property (nonatomic, strong) NSMutableArray *selectBtnArry;

//当前手指所在点
@property (nonatomic, assign) CGPoint curP;

@end

@implementation ClockView

- (void)awakeFromNib{

 [super awakeFromNib];

 //初始化
 [self setUp];
}

- (NSMutableArray *)selectBtnArry{

 if (_selectBtnArry == nil) {
  _selectBtnArry = [NSMutableArray array];
 }
 return _selectBtnArry;
}

- (void)setUp{

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

  //创建按钮
  UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

  btn.tag = i;

  btn.userInteractionEnabled = NO;

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

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

  [self addSubview:btn];
 }
}

//获取当前点
- (CGPoint)getCurrentPoint:(NSSet *)point{

 UITouch *touch = [point anyObject];
 return [touch locationInView:self];

}

//返回按钮
- (UIButton *)btnRectContainsPoint:(CGPoint)point{

 //遍历brn判断当前点在不在btn上
 for (UIButton *btn in self.subviews) {
  if (CGRectContainsPoint(btn.frame, point)) {
   return btn;
  }
 }
 return nil;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

 //1.获取当前点
 CGPoint curP = [self getCurrentPoint:touches];

 //2.判断当前点在不在btn上
 UIButton *btn = [self btnRectContainsPoint:curP];
 if (btn && btn.selected == NO) {
  btn.selected = YES;

  //保存选中的按钮
  [self.selectBtnArry addObject:btn];
 }

}

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

 //1.获取当前点
 CGPoint curP = [self getCurrentPoint:touches];
 self.curP = curP;

 //2.判断当前点在不在btn上
 UIButton *btn = [self btnRectContainsPoint:curP];
 if (btn && btn.selected == NO) {
  btn.selected = YES;

  //保存选中的按钮
  [self.selectBtnArry addObject:btn];
 }
 //重绘
 [self setNeedsDisplay];
}

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

 NSMutableString *str = [NSMutableString string];
 //1.取消所有选中的按钮
 for (UIButton *btn in self.selectBtnArry) {
  btn.selected = NO;
  [str appendFormat:@"%ld", btn.tag];
 }
 //2.清空路径
 [self.selectBtnArry removeAllObjects];
 [self setNeedsDisplay];

 //查看是否是第一次设置密码
 NSString *keyPwd = [[NSUserDefaults standardUserDefaults] objectForKey:@"keyPwd"];
 if (!keyPwd) {
  [[NSUserDefaults standardUserDefaults] setObject:str forKey:@"keyPwd"];
  [[NSUserDefaults standardUserDefaults] synchronize];

  UIAlertView *alertV = [[UIAlertView alloc] initWithTitle:@"第一次设置密码成功" message:nil delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
  [alertV show];
  NSLog(@"第一次输入密码");
 }else{

  if ([keyPwd isEqualToString:str]) {
   NSLog(@"密码正确");
   UIAlertView *alertV = [[UIAlertView alloc] initWithTitle:@"手势输入正确" message:nil delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
   [alertV show];

  }else{
   NSLog(@"密码错误");
   UIAlertView *alertV = [[UIAlertView alloc] initWithTitle:@"手势输入错误" message:nil delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
   [alertV show];
  }
 }
 //3.查看当前选中按钮的顺序
 NSLog(@"选中按钮顺序为:%@",str);
}

- (void)drawRect:(CGRect)rect{

 if (self.selectBtnArry.count) {
  //1.创建路径
  UIBezierPath *path = [UIBezierPath bezierPath];

  //2.取出所有保存的按钮
  for (int i = 0; i < self.selectBtnArry.count; i ++) {
   UIButton *btn = self.selectBtnArry[i];

   //当前按钮是不是第一个按钮
   if (i == 0) {
    //设置成路径的起点
    [path moveToPoint:btn.center];
   } else {
    //添加一根线到按钮中心
    [path addLineToPoint:btn.center];
   }
  }

  //添加一根线到当前手指所在点
  [path addLineToPoint:self.curP];

  //设置线宽/颜色
  [path setLineWidth:5];
  [[UIColor whiteColor] set];
  [path setLineJoinStyle:kCGLineJoinRound];

  //3.绘制路径
  [path stroke];
 }

}
- (void)layoutSubviews{

 [super layoutSubviews];

 CGFloat x = 0;
 CGFloat y = 0;

 CGFloat btnWH = 75;

 int column = 3;
 int margin = (self.bounds.size.width - (column * btnWH)) / (column + 1);

 int currentColumn = 0;
 int currentRow = 0;

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

  // 求当前所在的列
  currentColumn = i % column;

  // 求当前所在的行
  currentRow = i / column;

  x = margin + (btnWH + margin) * currentColumn;

  y = margin + (btnWH + margin) * currentRow;

  UIButton *btn = self.subviews[i];

  btn.frame = CGRectMake(x, y, btnWH, btnWH);
 }
}
@end

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • IOS自定义UIButton九宫格效果

    此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少.因此,主要利用UIButton阐述的: 实列不复杂,就两三个步骤完成: 一.定义宽度与高度(self.view) #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width #define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height #define JHRGB(r,g,b) [UIColor co

  • IOS 九宫格布局实现方法

    以前刚开始搞iOS的时候大部分都是通过计算frame来布局视图,搞着搞着貌似都是用自动布局来搞定了,因为自动布局实在太方便.太好用了,所以当我昨天突然回看以前代码的时候突然看到了以前写的九宫格布局,感觉很多东西都忘了,所以今天特意在这里记录一下,并且通过几个简单的宏定义来完成布局的需求,具体大家看代码吧,都有注释 很好懂: // // ButtonContainerView.h // chemuchao // // Created by 遇见远洋 on 16/3/7. // Copyright

  • iOS仿邮箱大师的九宫格手势密码解锁

    本文实例为大家分享了iOS手势密码解锁的相关代码,供大家参考,具体内容如下 // // LockView.m // 手势解锁 // // Created by Daniel on 16/4/4. // Copyright © 2016年 Daniel. All rights reserved. // #import "LockView.h" @interface LockView () /** 保存已选中的按钮 */ @property(nonatomic, strong) NSMut

  • 使用Swift代码实现iOS手势解锁、指纹解锁实例详解

    一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB

  • iOS实现九宫格自动生成视图

    在移动开发里有相当多的时候需要使控件呈现九宫格格式的分布,最常见的如 图案解锁界面: 相册管理界面: 单独创建一个这样界面的步骤相当繁琐,要创建父视图用于控制每一个单独的控件,而控件添加的时候还要判断每一格的位置,而且代码复用性不高,因为每一种九宫格视图的控件边距,控件的宽高不同. 所以,是否可以写一个这样的模块,只需要提供一个子控件的frame就能够生成一个完整的九宫格视图呢? 以下是我的思路: 首先肯定是用一个类来管理整个模块的,所以创建一个UISodokuView类继承于UIScrollV

  • iOS实现手势解锁操作

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

  • 关于iOS自带九宫格拼音键盘和Emoji表情之间的一些坑

    发现问题 最近产品提了一个需求:要求某个"输入框"禁止输入 Emoji 表情,我们能想到的方案是:在 UITextField 的 textField:shouldChangeCharactersInRange:replacementString: 代理方法中判断即将输入的字符串是否包含 Emoji 表情,如果包含,就在该方法中返回 NO,不允许输入. 关于如何判断一字符串是否包含 Emoji 表情的方法,网上已经有很多代码片段,一般是通过 Unicode 编码范围来判断 ,详见这里:h

  • 深入解析iOS应用开发中九宫格视图布局的相关计算方法

    来看一个简单的例子: 复制代码 代码如下: /*  * 总列数  */ NSUInteger totalloc = 3; /*  * View的宽高  */ CGFloat shopW = 80; CGFloat shopH = 100; /*  * 每个View之间的间隔  */ CGFloat margin = (self.view.frame.size.width - totalloc * shopW) / (totalloc + 1); /*  * View的总个数  */ NSUInt

  • 详解iOS应用UI开发中的九宫格坐标计算与字典转换模型

    九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 复制代码 代码如下: // //  YYViewC

  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了iOS实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下 Demo下载地址:手势解锁 效果图: 核心代码: // // ClockView.m // 手势解锁 // // Created by llkj on 2017/8/24. // Copyright © 2017年 LayneCheung. All rights reserved. // #import "ClockView.h" @interface ClockView () //存放当前选中的按钮

  • Android实现九宫格手势解锁

    本文为大家分享了Android九宫格手势解锁的具体代码,供大家参考,具体内容如下 这里是使用的开源库GestureLibray 里面有关于这个东西的介绍和接入方式,这里就不累赘了,我只是说下里面没有的. 关于这个库的使用: protected void initViews() { //设置模式 LockMode lockMode = (LockMode) getIntent().getSerializableExtra(Config.INTENT_SECONDACTIVITY_KEY); //是

  • Android 5秒学会使用手势解锁功能

    Android手势解锁 本文讲述的是一个手势解锁的库,可以定制显示隐藏宫格点.路径.并且带有小九宫格显示图,和震动!让你学会使用这个简单,高效的库! 先来一波效果效果展示: 手势解锁效果 今天给大家介绍的是本人良心制作的一个手势解锁开源库,大家有什么建议和想法都可以发到我的邮箱: diosamolee2014@gmail.com 或者评论,我会为大家提供我力所能及的帮助! GitHub地址: https://github.com/Diosamo/Gesture_Lock 添加依赖: 添加的gra

  • Unity实现移动端手势解锁功能

    本文实例为大家分享了Unity实现移动端手势解锁的具体代码,供大家参考,具体内容如下 一.效果演示 二.实现思路 --当鼠标选中一个密码按钮时开始记录输入的数字和鼠标的起始位置 --当鼠标按下过程中,始终根据记录的鼠标起始位置和当前鼠标的位置两个点绘制线段并添加到线段的列表中,并一直清空掉列表中除了最后一个线段外的其余线段 --当鼠标按下过程中,如果有覆盖到其他的密码按钮,则根据起始的密码按钮与当前的密码按钮两个点绘制线段并重新记录输入的数字和鼠标起始位置 三.实现过程 --创建9个密码块,并依

  • JS前端使用Canvas快速实现手势解锁特效

    目录 前言 Demo 需要实现的功能 初始化数据和页面渲染 touchstart 手指开始触摸事件 touchmove 监听手指滑动事件 touchend 监听手指触摸结束事件 页面滚动处理 连接的两颗星星之间有其他星星时 前言 之前在公司开发活动项目的时候,遇到一个项目需求要让用户使用手势画星位图来解锁星座运势,一看设计稿,这不就是我们平时的手机屏幕解锁吗?于是上网搜了一些关于手势解锁的文章,没找到可以直接复用的,于是只能自己打开canvas教程,边学习边设计实现了这个功能,同时兼容了移动端和

  • jQuery实现手势解锁密码特效

    本文实例为大家分享了jQuery实现手势解锁密码的具体代码,供大家参考,具体内容如下 效果预览图: 验证成功:(可以进行页面挑战等...) 验证失败: HTML: <div id="gesturepwd" style="position: absolute;width:440px;height:440px;left:50%;top:50%; margin-left:-220px;margin-top:-220px"></div> 首次渲染:

  • IOS 开发之swift中手势的实例详解

    IOS 开发之swift中手势的实例详解 手势操作主要包括如下几类 手势 属性 说明 点击 UITapGestureRecognizer numberOfTapsRequired:点击的次数:numberOfTouchesRequired:点击时有手指数量 设置属性 numberOfTapsRequired 可以实现单击,或双击的效果 滑动 UISwipeGestureRecognizer direction:滑动方向 direction 滑动方向分为上Up.下Down.左Left.右Right

  • IOS中的七种手势小结

    今天为大家介绍一下IOS 的七种手势,手势在开发中经常用到,所以就简单 通俗易懂的说下, 话不多说,直接看代码: // 初始化一个UIimageView UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 300, 300)]; imageView.image = [UIImage imageNamed:@"12.jpg"]; // UIImageView的用户交互是默认关闭的,

随机推荐