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í)頁面跟著滑動(dòng)的實(shí)現(xiàn)代碼(兼容Android和IOS端)
- iOS 頁面滑動(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)文章
objective-c實(shí)現(xiàn)點(diǎn)到直線的距離及與垂足的交點(diǎn)
這篇文章主要給大家介紹了利用objective-c實(shí)現(xiàn)點(diǎn)到直線的距離及與垂足的交點(diǎn)的相關(guān)資料,文中給出了詳細(xì)的實(shí)現(xiàn)思路和實(shí)現(xiàn)代碼,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04swift 單例的實(shí)現(xiàn)方法及實(shí)例
這篇文章主要介紹了swift 單例的實(shí)現(xiàn)方法及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-07-07iOS開發(fā)中簡(jiǎn)單實(shí)用的幾個(gè)小技巧
大家可能都知道,在開發(fā)過程中我們總會(huì)遇到各種各樣的小問題,有些小問題并不是十分容易解決。在此我就總結(jié)一下,我在開發(fā)中遇到的各種小問題,以及我的解決方法,也算是些小技巧吧,分享給大家,方便大家在iOS開發(fā)的時(shí)候能夠參考借鑒,下面有需要的朋友一起來看看吧。2016-11-11IOS購(gòu)物車界面實(shí)現(xiàn)效果示例
本篇文章主要介紹了IOS購(gòu)物車界面實(shí)現(xiàn)效果示例,有需要了解的朋友可參考。希望此文章對(duì)各位有所幫助。2017-02-02iOS自動(dòng)進(jìn)行View標(biāo)記的方法詳解
這篇文章主要給大家介紹了關(guān)于iOS自動(dòng)進(jìn)行View標(biāo)記的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04通過UIKit坐標(biāo)系來全面掌握iOS中的UIScrollView組件
iOS開發(fā)套件中的UIScrollView組件十分強(qiáng)大,不僅是滾動(dòng),縮放操作也能夠控制自如,其核心當(dāng)然是坐標(biāo)軸上的控制,下面就通過UIKit坐標(biāo)系來全面掌握iOS中的UIScrollView組件2016-05-05iOS 判斷頁面中的該填項(xiàng)是否填完整,改變按鈕狀態(tài)的方法
下面小編就為大家分享一篇iOS 判斷頁面中的該填項(xiàng)是否填完整,改變按鈕狀態(tài)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01