自定义滑动获取验证码控件

CheckCodeSliderView.h文件

@interface CheckCodeSlider : UISlider

@end

@interface CheckCodeSliderView : UIView

-(void)showCheckCodeSlider;

@property (nonatomic,copy) void (^hideCheckViewBlock)(void);

@end

 

CheckCodeSliderView.m文件

#import "CheckCodeSliderView.h"

#define SliderLabelTextColor [UIColor colorWithRed:42/255.0 green:42/255.0 blue:42/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 colorWithRed:122/255.0 green:194/255.0 blue:60/255.0 alpha:1]
#define SliderLabelFont 14
#define SliderLabelText @"请按住滑块，拖到最右边获取验证码"
#define ThumbImageWidth 50
#define ThumbImageHeight 40

@implementation CheckCodeSlider

//覆写父类UISlider的方法改变滑条frame
- (CGRect)trackRectForBounds:(CGRect)bounds{
    
    return CGRectMake(0, 0, bounds.size.width, bounds.size.height);
}

@end

@interface CheckCodeSliderView (){
    
    UIImageView *imgView;
}
@property (nonatomic ,strong)CheckCodeSlider *slider;
@property (nonatomic ,strong)UILabel *label;
@property (nonatomic ,assign)CGFloat sliderRectWidth;
@property (nonatomic ,assign)CGFloat sliderRectHeight;
@end

@implementation CheckCodeSliderView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        
        _sliderRectWidth = frame.size.width;
        _sliderRectHeight = frame.size.height;
        
        [self createSlider];
        
    }
    return self;
}
- (void)createSlider{
    
    _slider = [[CheckCodeSlider alloc]initWithFrame:CGRectMake(0, 0, _sliderRectWidth,_sliderRectHeight)];
    _slider.minimumTrackTintColor = [UIColor clearColor];
    _slider.maximumTrackTintColor = [UIColor colorWithRed:239 / 255.0 green:228 / 255.0 blue:222 / 255.0 alpha:1.0];
    _slider.layer.masksToBounds = YES;
    _slider.layer.cornerRadius = 18.0f;
    [_slider setThumbImage:[UIImage imageNamed:@"s-sliderBtn"] forState:UIControlStateNormal];
    [_slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
    [self addSubview:_slider];
    
    _label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, _sliderRectWidth,_sliderRectHeight)];
//    _label.center = self.center;
    _label.text = SliderLabelText;
    _label.font = [UIFont systemFontOfSize:SliderLabelFont];
    _label.textAlignment = NSTextAlignmentCenter;
    _label.textColor = SliderLabelTextColor;
    _label.layer.masksToBounds = YES;
    _label.layer.cornerRadius = _sliderRectHeight/2;
    _label.layer.borderWidth = 1;
    _label.layer.borderColor = SliderLabelBorderColor;
    [self addSubview:_label];
    
    //这里创建了一个跟滑块相同的imageview覆盖在文字上面，并在sliderValueChanged方法中让其跟着滑块滑动。
    
    imgView = [[UIImageView alloc]initWithFrame:CGRectMake(_slider.frame.origin.x, _slider.frame.origin.y, ThumbImageWidth, ThumbImageHeight)];
    imgView.image = [UIImage imageNamed:@"s-sliderBtn"];
    [self 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.frame = CGRectMake(_slider.frame.origin.x+slider.value*(_sliderRectWidth-ThumbImageWidth), _slider.frame.origin.y, ThumbImageWidth, ThumbImageHeight);
    
    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, _slider.frame.origin.y, ThumbImageWidth, ThumbImageHeight);
    }
    else if (slider.isTracking && slider.value == 1)
    {
        imgView.image = [UIImage imageNamed:@"s-sliderSuccess"];
    }
    else if(!slider.isTracking && slider.value == 1)
    {
        self.hideCheckViewBlock();
    }
}
-(void)showCheckCodeSlider
{
        self.hidden = NO;
        imgView.image = [UIImage imageNamed:@"s-sliderBtn"];
        _slider.minimumTrackTintColor = [UIColor clearColor];
        [_slider setValue:0 animated:YES];
        imgView.frame = CGRectMake(_slider.frame.origin.x, _slider.frame.origin.y, ThumbImageWidth, ThumbImageHeight);
}
@end

 

使用：

#import "CheckCodeSliderView.h"

@property(nonatomic,strong) CheckCodeSliderView *checkCodeView;

//创建滑块
    _checkCodeView = [[CheckCodeSliderView alloc]initWithFrame:CGRectMake(20, SCREEN_HEIGHT/2, SCREEN_WIDTH-40, 40)];
    _checkCodeView.backgroundColor = [UIColor colorWithRed:150/255.0 green:170/255.0 blue:189/255.0 alpha:1];
    WS(ws);
    [_checkCodeView setHideCheckViewBlock:^{
        
       ws.checkCodeView.hidden = YES;
        //其它操作可以写在这里
    }];
    [self.view addSubview:_checkCodeView];