iOS滑动解锁/滑动获取验证码效果实现

最新推荐文章于 2026-05-17 13:04:47 发布

原创

最新推荐文章于 2026-05-17 13:04:47 发布 · 1w 阅读

标签

#iOS #滑动 #解锁 #验证码 #动画

收录于

本文介绍了如何在iOS应用中实现滑动解锁/滑动获取验证码的界面效果。通过子类化UISlider并实例化CheckCodeSlider，结合sliderValueChanged方法处理滑动事件，可以创建出与设计图一致的交互体验。

最近短信服务商要求公司的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{