支付宝登陆界面(手势解锁的实现)

//1.下面是实现的步骤,基本上下面的注释应该都写明白了,多谢大牛们指点,如果需要素材和源工程文件,可以索要,谢谢支持 ?

//2.在最下面附有效果图

#import "ViewController.h"

#import "FFFGestureView.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *smallView;

@property (weak, nonatomic) IBOutlet FFFGestureView *gestureView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Home_refresh_bg"]];

self.gestureView.myblock = ^(UIImage *image,NSString *pass){

NSString *turePass = @"012";

if([pass isEqualToString:turePass]){

self.smallView.image = nil;

return YES;

}else{

self.smallView.image = image;

return NO;

}

};

}

***************************************************************************

#import <UIKit/UIKit.h>

@interface FFFGestureView : UIView

@property (nonatomic,copy) BOOL(^myblock)(UIImage *,NSString *);

@end

***************************************************************************

#import "FFFGestureView.h"

#import "SVProgressHUD.h"

#define SUMCOUNT 9

@interface FFFGestureView ()

//定义可变数组加载需要的button

@property (nonatomic,strong) NSArray *buttons;

//设置数组接收画的线

@property (nonatomic,strong) NSMutableArray *lineButton;

//定义一个点,保存手指当前的位置

@property(nonatomic,assign) CGPoint currentPoint;

@end

@implementation FFFGestureView

-(NSMutableArray *)lineButton{

if(_lineButton==nil){

_lineButton = [NSMutableArray array];

}

return _lineButton;

}

//懒加载button

-(NSArray *)buttons{

if(_buttons==nil){

NSMutableArray *arrayM = [NSMutableArray array];

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

UIButton *button = [[UIButton alloc] init];

button.tag = i;

//            button.backgroundColor = [UIColor redColor];

[button setUserInteractionEnabled:NO];

[button setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];

[button setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateHighlighted];

[button setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateSelected];

[self addSubview:button];

[arrayM addObject:button];

}

_buttons = [arrayM copy];

}

return _buttons;

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

//    获取touch对象

UITouch *touch = [touches anyObject];

//    获取点击的点

CGPoint point = [touch locationInView:touch.view];

//    遍历所有的按钮

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

UIButton *button = self.buttons[i];

//        按钮的frame是否包含了点击的点

if(CGRectContainsPoint(button.frame, point)){

//        开始高亮状态

button.highlighted = YES;

//            判断这个按钮是不是已经添加到了数组当中,如果没有在添加

if(![self.lineButton containsObject:button]){

[self.lineButton addObject:button];

}

}

}

}

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

//    获取touch对象

UITouch *touch = [touches anyObject];

//    获取点击的点

CGPoint point = [touch locationInView:touch.view];

//    获取移动的时候手指位置

self.currentPoint = point;

//    遍历所有的按钮

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

UIButton *button = self.buttons[i];

//        按钮的frame是否包含了点击的点

if(CGRectContainsPoint(button.frame, point)){

//        开始高亮状态

button.highlighted = YES;

//            判断这个按钮是不是已经添加到了数组当中,如果没有在添加

if(![self.lineButton containsObject:button]){

[self.lineButton addObject:button];

}

}

}

[self setNeedsDisplay];

}

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

//    解决错误的时候,最后手指的位置不连接

self.currentPoint = [[self.lineButton lastObject] center];

[self setNeedsDisplay];

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

UIButton *button = self.lineButton[i];

button.selected = YES;

button.highlighted = NO;

}

//    在恢复之前不能进行连线

[self setUserInteractionEnabled:NO];

NSString *passWord = @"";

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

//        拼接按钮的tag

passWord = [passWord stringByAppendingString:[NSString stringWithFormat:@"%ld",[self.lineButton[i] tag]]];

}

//    输出当前VIew作为image

UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);

//    获取上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

//    渲染

[self.layer renderInContext:ctx];

//    通过上下文获取图片

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

//    关闭上下文

UIGraphicsEndImageContext();

if(self.myblock){

if(self.myblock(image,passWord)){

[SVProgressHUD showSuccessWithStatus:@"密码正确"];

}else{

[SVProgressHUD showErrorWithStatus:@"密码错误"];

}

}

//    显示错误的样式 1秒钟

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

//        恢复之后再把用户交互打开

[self setUserInteractionEnabled:YES];

[self clearScreen];

});

}

-(void)clearScreen{

[self.lineButton removeAllObjects];

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

UIButton *button = self.buttons[i];

button.highlighted = NO;

button.selected = NO;

}

//    恢复原始状态

[self setNeedsDisplay];

}

-(void)drawRect:(CGRect)rect{

//    创建路径对象

UIBezierPath *path = [UIBezierPath bezierPath];

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

if(i==0){

[path moveToPoint:[self.lineButton[i] center]];

}else{

[path addLineToPoint:[self.lineButton[i] center]];

}

}

if(self.lineButton.count){

//     连接到手指的位置

[path addLineToPoint:self.currentPoint];

}

//    设置颜色

[[UIColor redColor] set];

//    设置线宽

path.lineWidth = 10;

//    设置连接处的样式

[path setLineJoinStyle:kCGLineJoinRound];

//    设置头尾的样式

[path setLineCapStyle:kCGLineCapRound];

//    渲染

[path stroke];

}

-(void)layoutSubviews{

[super layoutSubviews];

CGFloat w = 74;

CGFloat h = w;

CGFloat margin = (self.frame.size.width-3*w)/4;

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

UIButton *button = self.buttons[i];

CGFloat row = i % 3;

CGFloat col = i / 3;

CGFloat x = row * (margin + w) + margin;

CGFloat y = col * (margin + h) + margin;

button.frame = CGRectMake(x, y, w, h);

}

}

@end

时间: 2024-10-13 22:28:48

支付宝登陆界面(手势解锁的实现)的相关文章

Swift实现手势解锁&amp;界面跳转&amp;读取SQLite数据库

按钮是根据屏幕大小自动布局,所以不会因为设备不同导致错位 数据库操作是GitHub上的SQLiteDB 下面是Storyboard的设计图 下面是实现的代码 // // ViewController.swift // // // Created by XWJACK on 15/12/15. // Copyright © 2015年 XWJACK. All rights reserved. // import UIKit class ViewController: UIViewController

(素材源码)猫猫学IOS(三十五)UI之Quartz2D仿真支付宝手势解锁_代理获得密码。

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 源码:http://download.csdn.net/detail/u013357243/8669765 效果: 代码: NYLockView.h // // NYLockView.h // 手势解锁 // // Created by apple on 15-5-6. // Copyright (c) 2015年 znyca

iOS开发之手势解锁

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

手势解锁步骤的基本思路

------------- 基本思路 -------------- - 1. 搭建界面,九宫格算法 - 2. 处理按钮选中状态 - 3. 按钮之间画线 - 4. 手指和按钮之间画线 - 5. 判断解锁密码是否正确 ------------- 基本思路 -------------- 1. 拖拽图片素材 2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果 self.view.backgroundColor = [UIColor colorWithPatter

UI进阶--Quartz2D和触摸事件的简单使用:手势解锁

需求:实现一个简易的手势解锁应用,具体效果如下图所示: 实现步骤: 1.代码创建界面,自定义一个view,设置view的背景,颜色等属性: 2.在自定义的view中,定义2个属性,一个是存储被选中按钮的可变数组,另外一个是最后的触摸点(CGPoint); 3.重写initWithFrame方法,在这里,自定义一个方法给initWithFrame方法调用即可,这个自定义的方法里,初始化9个按钮,设置每个按钮的tag,正常状态下的图片以及选中状态的图片,并设置和用户的交互为NO: 4.在自定义的vi

手势解锁的实现思路

------------- 基本思路 -------------- - 1. 搭建界面,九宫格算法 - 2. 处理按钮选中状态 - 3. 按钮之间画线 - 4. 手指和按钮之间画线 - 5. 判断解锁密码是否正确 ------------- 基本思路 -------------- 1. 拖拽图片素材 2. 设置控制器 view 的背景色为"HomeButtomBG"图片平铺后的效果 self.view.backgroundColor = [UIColor colorWithPatter

iOS开发UI篇—实现一个简单的手势解锁应用(基本)

iOS开发UI篇—实现一个简单的手势解锁应用(基本) 一.实现效果 实现效果图: 二.手势解锁应用分析 1.监听手指在view上的移动,首先肯定需要自定义一个view,重写touch began,touch move等方法,当手指移动到圈上时,让其变亮.可以通过button按钮来实现. 2.界面搭建 背景图片(给控制器的view添加一个imageview,设置属性背景图片) 九个按钮(把九个按钮作为一个整体,使用一个大的view来管理这些小的view,这些小的view就是9个button.如果使

iOS开发UI篇—实现一个简单的手势解锁应用(完善)

iOS开发UI篇—实现一个简单的手势解锁应用(完善) 一.需要实现的效果 二.应用完善 1.绘制不处于按钮范围内的连线 2.解决bug(完善) bug1:如果在began方法中通知view绘图,那么会产生bug.因为,当前点没有清空,在手指移开之后要清空当前点.可以在绘制前进行判断,如果当前点是(0,0)那么就不划线.或者在began方法中不进行重绘. bug2:无限菊花.自定义view的背景色为默认的(黑色),只要重写了drawrect方法,view默认的背景颜色就是黑色的,因为上下文默认的颜

自定义手势解锁锁控件

一.控件的使用 模仿市面上app的手势解锁功能,实现的小控件,将控件封装到了一个UIView上 二.核心原理技术 1.触摸事件 (1)UIView的触摸三个触摸响应事件:开始.移动.结束 (2)CGRectContainsPoint 判断触摸点的位置 2.Quartz2D绘图 (1)drawRect 的重绘 (2)UIBezierPath 贝塞尔曲线 3.block成功和失败的回调 三.实现思路 1.解锁键盘中的9个小图标,会根据验证过程而变化颜色,所以考虑用UIButton实现,因为UIBut