最近短信服務商要求公司的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滑動解鎖、滑動獲取驗證碼效果的實現代碼，希望對大家有所幫助！
新聞熱點
疑難解答
