欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS滑动解锁、滑动获取验证码效果的实现代码

程序员文章站 2023-12-02 18:24:04
 最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里...

 最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示:

iOS滑动解锁、滑动获取验证码效果的实现代码

这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码:

先子类化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滑动解锁、滑动获取验证码效果的实现代码,希望对大家有所帮助!