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滑动解锁、滑动获取验证码效果的实现代码,希望对大家有所帮助!

(0)

相关推荐

  • iOS 生成图片验证码绘制实例代码

    登录注册时用的验证码效果图 ViewDidload调用即可 _pooCodeView = [[PooCodeView alloc] initWithFrame:CGRectMake(50, 100, 82, 32)]; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapClick:)]; [_pooCodeView addGestureReco

  • iOS获取验证码倒计时效果

    本文实例为大家分享了iOS倒计时获取验证码的具体代码,供大家参考,具体内容如下 1. 倒计时发送验证码,界面跳转计时会重置 /**重新发送短信的计时*/ -(void)fireTimer{ __block int timeout=180; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispatch_source_t _timer = dispatc

  • iOS发送验证码倒计时应用

    app注册的时候,经常会遇到发送验证码的功能,当点击发送验证码的时候,那个button就开始了倒计时,当计时结束才可以重新发送,效果如下: 具体代码实现如下: - (IBAction)sendMes:(UIButton *)sender { __block int timeout = 10 ; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispat

  • iOS 生成图片验证码(实用功能)

    1.数据源 codeArray = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G"

  • Swift实现iOS应用中短信验证码倒计时功能的实例分享

    在开始之前,我们先来了解一个概念 属性观测器(Property Observers): 属性观察器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性观察器,甚至新的值和现在的值相同的时候也不例外. 可以为属性添加如下的一个或全部观察器: willSet在新的值被设置之前调用 didSet在新的值被设置之后立即调用 接下来开始我们的教程,先展示一下最终效果: 首先声明一个发送按钮: 复制代码 代码如下: var sendButton: UIButton! 在viewDidLoad方法中给发

  • 利用iOS绘制图片生成随机验证码示例代码

    先来看看效果图 实现方法 .h文件 @property (nonatomic, retain) NSArray *changeArray; @property (nonatomic, retain) NSMutableString *changeString; @property (nonatomic, retain) UILabel *codeLabel; -(void)changeCode; @end .m文件 @synthesize changeArray = _changeArray;

  • iOS本地动态生成验证码的方法

    前几天app注册被人攻击了,从网上找了这个先保存下.... 用于ios本地动态生成验证码,效果如下: 导入CoreGraphics.framework 用于绘制图形 封装UIView,便捷使用,代码如下: AuthcodeView.h #import <UIKit/UIKit.h> @interface AuthcodeView : UIView @property (strong, nonatomic) NSArray *dataArray;//字符素材数组 @property (stron

  • iOS滑动解锁、滑动获取验证码效果的实现代码

    最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1

  • vue实现倒计时获取验证码效果

    本文实例为大家分享了vue实现倒计时获取验证码效果的具体代码,供大家参考,具体内容如下 效果: 代码: <template> <div> <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button> </div> </template> <script&

  • Android RecycleView滑动停止后自动吸附效果的实现代码(滑动定位)

    最近有个需求 要求列表 滑动后第一条 需要和顶部对齐 上网找了找  发现 官方支持 Recycle + LinearSnapHelper 可以实现 但我实际操作加上后 发现会卡顿 滑动卡顿 没有以前那种流畅感了 想了想  算了 懒得看源码  还是自己写一个得了 效果图 : 代码如下 注释很清楚了 package com.example.testapp import androidx.appcompat.app.AppCompatActivity import android.os.Bundle

  • IOS实现签到特效(散花效果)的实例代码

    本文讲述了IOS实现签到特效(散花效果)实例代码.分享给大家供大家参考,具体如下: 散花特效 #import <Foundation/Foundation.h> /// 领取奖励成功 @interface RewardSuccess : NSObject /** * 成功动画 */ + (void)show; @end #import "RewardSuccess.h" #import "RewardSuccessWindow.h" #define Em

  • vue+jquery+lodash实现滑动时顶部悬浮固定效果

    本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果. 前期准备: 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 引入lodash.js npm install lodash -D fixTop.vue组件的 <template> <div class=

  • Android利用CountDownTimer实现点击获取验证码倒计时效果

    本文实例为大家分享了Android点击获取验证码倒计时的具体代码,供大家参考,具体内容如下 package com.loaderman.countdowntimerdemo; import android.os.Bundle; import android.os.CountDownTimer; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextV

  • iOS UISegmentControl实现自定义分栏效果

    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图的效果但是很多用处 一般这两个分栏是两个tableView,需要左右滑动来响应分栏 下面来讲述这样的效果是怎么实现的呢? 主要那里有一根短红线,需要滑动 来切换tableView 先自定义一个SegmentView .h //定义block,用来传递点击的第几个按钮 typedef void (^PassValueBl

  • iOS简单实现轮播图效果

    本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下 平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张.我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理) 看一下效果: 完成这种轮播图,我们的 View 需要如下的属性和方法 @i

  • Android获取验证码倒计时实现代码

    本文实例为大家分享了Android获取验证码倒计时的具体代码,供大家参考,具体内容如下 1. 验证码输入框和获取验证码按钮布局 xml代码: <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/white" android:orientation="horizontal&q

  • uni-app实现获取验证码倒计时功能

    本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码,供大家参考,具体内容如下 实现的效果 页面部分是一个三目运算,codeTime是倒计时的时间. <template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'获取验证码':codeTime+

随机推荐