iOS 九宫格手势密码

立即下载用AI写一个

发布时间：2017-08-31

5人 | 浏览：6486次 | 收藏 |

技术：iOS

运行环境：iOS8+

概述

主要针对常用的手势密码，详细看实现

详细

### 一、准备工作
- 需要准备什么环境
`xcode`，`iOS8+`
- 本例子实现什么功能
主要实现手势密码设置，验证

### 二、程序实现
- 程序目录
![](/contentImages/image/20170831/2fzCsFFkJpULLjprNMc.png)
- 实现思路及设计与代码

- 1 、分析问题
`
要实现该功能，难点在于，我们该怎么去实现线条的绘制。既然是手势移动，那么我们肯定会在移动过程中一直进行绘制，这样的话，我们就有两种选择：
`
```
1 touch事件 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
在移动过程中获取位置坐标，然后进行绘制
2 UIPanGestureRecognizer  摇动或者拖拽手势
```
`
移动的方式有了，那么我们还缺什么呢，当然是绘制线路的选择方式，这里我们也有两种方式
`

`
1、通过 UIBezierPath 
 UIBezierPath 解释：UIBezierPath是Core Graphics框架关于path的一个封装。可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状。
下面是简单的绘制了一个矩形
`
```
- (void)drawRect:(CGRect)rect 
{
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0 alpha:1];
    [color set]; //设置线条颜色

UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(120, 120, 100, 50)];

aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

[aPath stroke];
}
```
`
2 、通过CGContext 或者 CGPath(路径)  
相信大家对CGContext比较熟悉也用的比较多，可以用来画各种图形，那么CGPath呢，我个人感觉和CGContext差不多，只是调用的方法可能不一样
`
`后面才发现，UIBezierPath其实就是对CGPathRef的封装`

`下面为大家开启三个传送门，可以更好的了解了解`
[Core Graphics框架 : 一个让程序猿成为视觉设计师的框架](http://codecloud.net/20881.html)
[Quartz 2D绘图基础：CGContextRef](http://book.51cto.com/art/201404/436843.htm)
[CGContextRef，CGPath 和 UIBezierPath的区别](http://blog.csdn.net/zhzmaren/article/details/51323640)

```
CGContextRef contextRef = UIGraphicsGetCurrentContext();
```
`说完上面两个方法后，下面就是怎么利用所绘制的路线呢？这里有两个思路`
`1 我们可以将当前view上面加一个UIImageview，其大小和当前view一样，我们在移动的时候，不停为其设置image，代码如下`
```
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.drawLineImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:_drawLineImageView];
}
//根据颜色绘制图片
- (UIImage *)imageWithColor:(UIColor *)color{
    UIImage *image = nil;
    
    if (self.addPasswords.count > 0)
    {
        UIButton * startButton = self.addPasswords[0];
    
        UIGraphicsBeginImageContext(self.drawLineImageView.bounds.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetStrokeColorWithColor(context, color.CGColor);
        CGContextSetLineWidth(context, 5);
        
        CGContextMoveToPoint(context, startButton.center.x, startButton.center.y);
        
        for (UIButton *button in self.addPasswords)
        {
            CGPoint point = button.center;
            CGContextAddLineToPoint(context, point.x, point.y);
            CGContextMoveToPoint(context, point.x, point.y);
        }
        
        CGContextAddLineToPoint(context, self.endPoint.x, self.endPoint.y);
        
        CGContextStrokePath(context);
        
        image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        return image;
    }
    
    return nil;
}
``` 
`
2 就是调用  - (void)drawRect:(CGRect)rect  函数，在view上绘制当前路径，当然必须调用 [self setNeedsDisplay] ，来实时绘制
`

针对以上的方案，我选择的是`touch`事件和`CGContext`并且设置图片的`image`的方法

### 三、运行效果
- 下载demo，直接运行即可
- 运行时的截图
![](/contentImages/image/20170831/3yiP18J70eJtDgiuevL.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

iOS 九宫格手势密码

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子