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