iOS滑动解锁、滑动获取验证码效果的实现代码
程序员文章站
2023-12-13 13:44:58
最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示:
这里...
最近短信服务商要求公司的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滑动解锁、滑动获取验证码效果的实现代码,希望对大家有所帮助!