iOS滑動(dòng)解鎖、滑動(dòng)獲取驗(yàn)證碼效果的實(shí)現(xiàn)代碼
最近短信服務(wù)商要求公司的app在獲取短信驗(yàn)證碼時(shí)加上校驗(yàn)碼,目前比較流行的是采用類似滑動(dòng)解鎖的方式,我們公司采取的就是這種方式,設(shè)計(jì)圖如下所示:

這里校驗(yàn)內(nèi)部的處理邏輯不作介紹,主要分享一下界面效果的實(shí)現(xiàn), 下面貼出代碼:
先子類化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 @"滑動(dòng)解鎖/獲取驗(yàn)證碼"
#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
再實(shí)例化CheckCodeSlider,這里隨便在一個(gè)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];
//這里創(chuàng)建了一個(gè)跟滑塊相同的imageview覆蓋在文字上面,并在sliderValueChanged方法中讓其跟著滑塊滑動(dòng)。
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);
}
}
這樣就可以實(shí)現(xiàn)上圖中的效果,只需要在sliderValueChanged根據(jù)slider的value值做相應(yīng)處理就行了。
以上所述是小編給大家介紹的iOS滑動(dòng)解鎖、滑動(dòng)獲取驗(yàn)證碼效果的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助!
- IOS仿今日頭條滑動(dòng)導(dǎo)航欄
- ios scrollview嵌套tableview同向滑動(dòng)的示例
- iOS使用pageViewController實(shí)現(xiàn)多視圖滑動(dòng)切換
- 詳解iOS中position:fixed吸底時(shí)的滑動(dòng)出現(xiàn)抖動(dòng)的解決方案
- 微信小程序在ios下Echarts圖表不能滑動(dòng)的問題解決
- 微信瀏覽器彈出框滑動(dòng)時(shí)頁(yè)面跟著滑動(dòng)的實(shí)現(xiàn)代碼(兼容Android和IOS端)
- iOS 頁(yè)面滑動(dòng)與標(biāo)題切換顏色漸變的聯(lián)動(dòng)效果實(shí)例
- IOS開發(fā)中禁止NavigationController的向右滑動(dòng)返回
- iOS開發(fā)上下滑動(dòng)UIScrollview隱藏或者顯示導(dǎo)航欄的實(shí)例
- iOS實(shí)現(xiàn)無限滑動(dòng)效果
相關(guān)文章
IOS 陀螺儀開發(fā)(CoreMotion框架)實(shí)例詳解
這篇文章主要介紹了IOS 陀螺儀開發(fā)實(shí)例詳解的相關(guān)資料,介紹了螺旋儀參數(shù)意義及CoreMotion框架,需要的朋友可以參考下2016-10-10
IOS實(shí)戰(zhàn)之自定義轉(zhuǎn)場(chǎng)動(dòng)畫詳解
這篇文章主要介紹了IOS實(shí)戰(zhàn)之自定義轉(zhuǎn)場(chǎng)動(dòng)畫,CAAnimation的子類,用于做轉(zhuǎn)場(chǎng)動(dòng)畫,能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果,感興趣的小伙伴們可以參考一下2016-02-02
iOS中UIWebView網(wǎng)頁(yè)加載組件的基礎(chǔ)及使用技巧實(shí)例
UIWebView是開發(fā)中很常用的應(yīng)用內(nèi)調(diào)用網(wǎng)頁(yè)瀏覽的控件,這里整理了一些iOS中UIWebView網(wǎng)頁(yè)加載組件的基礎(chǔ)及使用技巧實(shí)例 ,需要的朋友可以參考下2016-06-06
iOS9蘋果將原h(huán)ttp協(xié)議改成了https協(xié)議的方法
這篇文章主要介紹了iOS9蘋果將原h(huán)ttp協(xié)議改成了https協(xié)議的方法的相關(guān)資料,需要的朋友可以參考下2016-01-01

