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值做相应处理就行了。