iOS滑動解鎖、滑動擷取驗證碼效果的實現代碼_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值做相應處理就行了。

以上所述是小編給大家介紹的iOS滑動解鎖、滑動擷取驗證碼效果的實現代碼，希望對大家有所協助！