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

 更新时间:2016年05月06日 13:59:57   作者:huxinguang_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滑动解锁、滑动获取验证码效果的实现代码,希望对大家有所帮助!

相关文章

  • objective-c实现点到直线的距离及与垂足的交点

    objective-c实现点到直线的距离及与垂足的交点

    这篇文章主要给大家介绍了利用objective-c实现点到直线的距离及与垂足的交点的相关资料,文中给出了详细的实现思路和实现代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • IOS缓存管理之YYCache使用详解

    IOS缓存管理之YYCache使用详解

    这篇文章主要介绍了IOS缓存管理之YYCache使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • swift 单例的实现方法及实例

    swift 单例的实现方法及实例

    这篇文章主要介绍了swift 单例的实现方法及实例的相关资料,需要的朋友可以参考下
    2017-07-07
  • iOS开发中简单实用的几个小技巧

    iOS开发中简单实用的几个小技巧

    大家可能都知道,在开发过程中我们总会遇到各种各样的小问题,有些小问题并不是十分容易解决。在此我就总结一下,我在开发中遇到的各种小问题,以及我的解决方法,也算是些小技巧吧,分享给大家,方便大家在iOS开发的时候能够参考借鉴,下面有需要的朋友一起来看看吧。
    2016-11-11
  • IOS购物车界面实现效果示例

    IOS购物车界面实现效果示例

    本篇文章主要介绍了IOS购物车界面实现效果示例,有需要了解的朋友可参考。希望此文章对各位有所帮助。
    2017-02-02
  • iOS自动进行View标记的方法详解

    iOS自动进行View标记的方法详解

    这篇文章主要给大家介绍了关于iOS自动进行View标记的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 通过UIKit坐标系来全面掌握iOS中的UIScrollView组件

    通过UIKit坐标系来全面掌握iOS中的UIScrollView组件

    iOS开发套件中的UIScrollView组件十分强大,不仅是滚动,缩放操作也能够控制自如,其核心当然是坐标轴上的控制,下面就通过UIKit坐标系来全面掌握iOS中的UIScrollView组件
    2016-05-05
  • iOS 适配iPhone X的方法

    iOS 适配iPhone X的方法

    下面小编就为大家分享一篇iOS 适配iPhone X的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS 判断页面中的该填项是否填完整,改变按钮状态的方法

    iOS 判断页面中的该填项是否填完整,改变按钮状态的方法

    下面小编就为大家分享一篇iOS 判断页面中的该填项是否填完整,改变按钮状态的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS开发教程之WKWebView与JS的交互

    iOS开发教程之WKWebView与JS的交互

    这篇文章主要给大家介绍了关于iOS开发教程之WKWebView与JS的交互的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07

最新评论