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

 最近短信服务商要求公司的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滑动解锁、滑动获取验证码效果的实现代码，希望对大家有所帮助！