最近短信服务商要求公司的app在获取短信验证码时加上校验码，目前比较流行的是采用类似滑动解锁的方式，我们公司采取的就是这种方式，设计图如下所示：
这里校验内部的处理逻辑不作介绍，主要分享一下界面效果的实现, 下面贴出代码：
先子类化uislider
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
#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滑动解锁、滑动获取验证码效果的实现代码，希望对大家有所帮助！
