iOS滑动解锁、滑动获取验证码效果的实现代码
2016-05-06 13:59
941 查看
最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示:
这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码:
先子类化UISlider
#import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:193/255.0 green:193/255.0 blue:193/255.0 alpha:1] #define SliderLabelBorderColor [UIColor colorWithRed:193/255.0 green:193/255.0 blue:193/255.0 alpha:1].CGColor #define SliderMinimumTrackTintColor [UIColor redColor] #define SliderLabelFont 14 #define SliderLabelText @"滑动解锁/获取验证码" #define ThumbImageWidth 40 #define ThumbImageHeight 40 @interface CheckCodeSlider : UISlider @end //******************************************************* #import "CheckCodeSlider.h" @implementation CheckCodeSlider //覆写父类UISlider的方法改变滑条frame - (CGRect)trackRectForBounds:(CGRect)bounds{ return CGRectMake(0, 0, SliderWidth, SliderHeight); } @end 再实例化CheckCodeSlider,这里随便在一个ViewController里写的 #import "ViewController.h" #import "CheckCodeSlider.h" @interface ViewController (){ UIImageView *imgView; } @property (nonatomic ,strong)CheckCodeSlider *slider; @property (nonatomic ,strong)UILabel *label; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; [self createSlider]; } - (void)createSlider{ _slider = [[CheckCodeSlider alloc]initWithFrame:CGRectMake(0, 0, SliderWidth, SliderHeight)]; _slider.center = self.view.center; _slider.minimumTrackTintColor = [UIColor clearColor]; _slider.maximumTrackTintColor = [UIColor clearColor]; _slider.layer.masksToBounds = YES; _slider.layer.cornerRadius = SliderHeight/2; [_slider setThumbImage:[UIImage imageNamed:@"滑块按钮"] forState:UIControlStateNormal]; [_slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:_slider]; _label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, SliderWidth, SliderHeight)]; _label.center = self.view.center; _label.text = SliderLabelText; _label.font = [UIFont systemFontOfSize:SliderLabelFont]; _label.textAlignment = NSTextAlignmentCenter; _label.textColor = SliderLabelTextColor; _label.layer.masksToBounds = YES; _label.layer.cornerRadius = SliderHeight/2; _label.layer.borderWidth = 1; _label.layer.borderColor = SliderLabelBorderColor; [self.view addSubview:_label]; //这里创建了一个跟滑块相同的imageview覆盖在文字上面,并在sliderValueChanged方法中让其跟着滑块滑动。 imgView = [[UIImageView alloc]initWithFrame:CGRectMake(_slider.frame.origin.x-2, _slider.frame.origin.y-2, ThumbImageWidth+4, ThumbImageHeight+4)]; imgView.image = [UIImage imageNamed:@"滑块按钮"]; [self.view addSubview:imgView]; } - (void)sliderValueChanged:(UISlider *)slider{ [_slider setValue:slider.value animated:NO]; if (slider.value >0) { _slider.minimumTrackTintColor = SliderMinimumTrackTintColor; }else{ _slider.minimumTrackTintColor = [UIColor clearColor]; } imgView.center = CGPointMake(_slider.frame.origin.x+slider.value*(SliderWidth-ThumbImageWidth)+ThumbImageWidth/2, _slider.frame.origin.y+ThumbImageHeight/2); if (!slider.isTracking && slider.value != 1) { [_slider setValue:0 animated:YES]; if (slider.value >0) { _slider.minimumTrackTintColor = SliderMinimumTrackTintColor; }else{ _slider.minimumTrackTintColor = [UIColor clearColor]; } imgView.frame = CGRectMake(_slider.frame.origin.x-2, _slider.frame.origin.y-2, ThumbImageWidth+4, ThumbImageHeight+4); } }
这样就可以实现上图中的效果,只需要在sliderValueChanged根据slider的value值做相应处理就行了。
以上所述是小编给大家介绍的iOS滑动解锁、滑动获取验证码效果的实现代码,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- java自动生成验证码插件-kaptcha
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- CSS中的滑动门技术
- 如何识别高级的验证码的技术总结第1/4页
- NGUI实现滑动翻页效果实例代码
- PHP 验证码不显示只有一个小红叉的解决方法
- asp汉字中文图片验证码
- asp.net生成字母和数字混合图形验证码
- PHP实现简单汉字验证码
- php生成动态验证码gif图片
- php生成验证码函数
- 基于JavaScript短信验证码如何实现
- php 验证码制作(网树注释思想)
- 基于C#实现12306的动态验证码变成静态验证码的方法