iOS 在Xib中给验证码Button添加边框并实现验证码倒计时效果

最近项目里的登录界面是用Xib拖的。项目很赶没办法。关于验证码遇到的细节上的小问题给大家分享下:

  • 给验证码Button加个边框、并设置边框颜色和宽度

  • 实现验证码倒计时操作

一、给验证码Button加个边框、并设置边框颜色和宽度

Paste_Image.png

这块验证码,使用Button拖的,想要实现边框效果,要实现下面两部:

1、在如图位置添加相应属性。这里千万别写错。写错就会没效果,代码如下:

layer.borderWidth Number 1
layer.borderColorWithUIColor Color 自定义的颜色

Paste_Image.png

2、在项目中添加CALayer的Category

CALayer+LayerColor.h


//
//  CALayer+LayerColor.h
//
//  Created by TL on 2017/4/1.
//  Copyright © 2017年 TL. All rights reserved.
//

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (LayerColor)

@end


CALayer+LayerColor.m


//
//  CALayer+LayerColor.m
//
//  Created by TL on 2017/4/1.
//  Copyright © 2017年 TL. All rights reserved.
//

#import "CALayer+LayerColor.h"

@implementation CALayer (LayerColor)


- (void)setBorderColorWithUIColor:(UIColor *)color
{
    self.borderColor = color.CGColor;
}

@end



完成这些后,就可以实现验证码Button的边框效果啦。

二、实现验证码倒计时操作


- (IBAction)getVerificationCode:(id)sender {
    
    
    __block NSInteger time = 59; //倒计时时间
    
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_source_t _timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, queue);
    
    dispatch_source_set_timer(_timer,dispatch_walltime(NULL, 0),1.0*NSEC_PER_SEC, 0); //每秒执行
    
    dispatch_source_set_event_handler(_timer, ^{
        
        if(time <= 0){ //倒计时结束,关闭
            
            dispatch_source_cancel(_timer);
            dispatch_async(dispatch_get_main_queue(), ^{
                
                //设置按钮的样式
                [self.verificationBtn setTitle:@"重新获取" forState:UIControlStateNormal];
                [self.verificationBtn setTitleColor:RGBA(188, 188, 188, 1) forState:UIControlStateNormal];//[ColorManager colorWithHexString:@"FB8557"]
                self.verificationBtn.userInteractionEnabled = YES;
            });
            
        }else{
            
            int seconds = time % 60;
            dispatch_async(dispatch_get_main_queue(), ^{
                
                //设置按钮显示读秒效果
                [self.verificationBtn setTitle:[NSString stringWithFormat:@"重新获取(%.2d)", seconds] forState:UIControlStateNormal];
                [self.verificationBtn setTitleColor:[ColorManager colorWithHexString:@"979797"] forState:UIControlStateNormal];
                self.verificationBtn.userInteractionEnabled = NO;
            });
            time--;
        }
    });
    dispatch_resume(_timer);
    
    
}

附赠colorWithHexString颜色方法的实现:


+ (UIColor *)colorWithHexString:(NSString *)stringToConvert
{
    NSString *cString = [[stringToConvert stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];
    
    
    if ([cString length] < 6)
        return DEFAULT_VOID_COLOR;
    if ([cString hasPrefix:@"#"])
        cString = [cString substringFromIndex:1];
    if ([cString length] != 6)
        return DEFAULT_VOID_COLOR;
    
    NSRange range;
    range.location = 0;
    range.length = 2;
    NSString *rString = [cString substringWithRange:range];
    
    range.location = 2;
    NSString *gString = [cString substringWithRange:range];
    
    range.location = 4;
    NSString *bString = [cString substringWithRange:range];
    
    
    unsigned int r, g, b;
    [[NSScanner scannerWithString:rString] scanHexInt:&r];
    [[NSScanner scannerWithString:gString] scanHexInt:&g];
    [[NSScanner scannerWithString:bString] scanHexInt:&b];
    
    return [UIColor colorWithRed:((float) r / 255.0f)
                           green:((float) g / 255.0f)
                            blue:((float) b / 255.0f)
                           alpha:1.0f];
}

附赠RGBA颜色方法的实现:


//RGBA
#define RGBA(R/*红*/, G/*绿*/, B/*蓝*/, A/*透明*/)   [UIColor colorWithRed:(float)R/255.f green:(float)G/255.f blue:(float)B/255.f alpha:A]
//RGB
#define RGB(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]

这时候你的验证码会有 闪烁效果 ,不要怕,改变验证码Button的Type为Custom即可,直接上图:

Paste_Image.png

没有一蹴而就的天才,只有不断点亮天赋的勤者

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,251评论 4 61
  • 你看 快看 看那肆意席卷而来 带着怒气的风 拉扯着乌云姑娘的手 扬着沙尘 放纵的击打着它 是因为觊觎枝叶的美貌吗 ...
    哓霞阅读 338评论 0 1
  • 门开着,隔着门上挡蚊子的纱帘感受夹着热浪的风一阵阵袭来,内心有点燥热。还好屋子右边有几颗白杨树,风一吹沙沙作响,树...
    娜娜在成长阅读 1,348评论 4 105
  • 第一次对印度产生好奇,是因为妹尾河童老师那本堪称经典的《窥视印度》,这本书文字与手绘图相映成趣,卖椰子、甘蔗汁、奶...
    浅小丁阅读 681评论 0 1