add FlickerAnimation,underline

xjh093 · Oct 17, 2018 · 880de7d · 880de7d
1 parent ca7dd52
commit 880de7d
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 26 deletions.
diff --git a/JHVerificationCodeView.podspec b/JHVerificationCodeView.podspec
@@ -1,7 +1,7 @@
 
 Pod::Spec.new do |s|
   s.name         = "JHVerificationCodeView"
-  s.version      = "1.2.0"
+  s.version      = "1.3.0"
   s.summary      = "A simple Verification Code View."
   s.homepage     = "https://github.com/xjh093/JHVerificationCodeView"
   s.license      = "MIT"

diff --git a/....xcodeproj/project.xcworkspace/xcuserdata/mac1.xcuserdatad/UserInterfaceState.xcuserstate b/....xcodeproj/project.xcworkspace/xcuserdata/mac1.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/...cationCodeView.xcodeproj/xcuserdata/mac1.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist b/...cationCodeView.xcodeproj/xcuserdata/mac1.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Bucket
+   type = "1"
+   version = "2.0">
+</Bucket>
diff --git a/JHVerificationCodeView/.DS_Store b/JHVerificationCodeView/.DS_Store
diff --git a/JHVerificationCodeView/JHVerificationCodeView/JHVerificationCodeView.h b/JHVerificationCodeView/JHVerificationCodeView/JHVerificationCodeView.h
@@ -54,7 +54,7 @@ typedef NS_ENUM(NSUInteger, JHVCConfigInputType) {
 @property (strong,  nonatomic) UIColor          *inputBoxColor;
 ///单个输入框输入时的颜色
 @property (strong,  nonatomic) UIColor          *inputBoxHighlightedColor;
-///光标颜色
+///光标颜色, Default is blueColor
 @property (strong,  nonatomic) UIColor          *tintColor;
 ///显示 或 隐藏
 @property (assign,  nonatomic) BOOL             secureTextEntry;
@@ -66,8 +66,14 @@ typedef NS_ENUM(NSUInteger, JHVCConfigInputType) {
 @property (nonatomic,  assign) JHVCConfigInputType  inputType;
 ///自动弹出键盘
 @property (nonatomic,  assign) BOOL             autoShowKeyboard;
-///
-@property (nonatomic,  assign) BOOL             useTextColor;
+///光标闪烁动画, Default is YES
+@property (nonatomic,  assign) BOOL             showFlickerAnimation;
+///显示下划线
+@property (nonatomic,  assign) BOOL             showUnderLine;
+///下划线尺寸
+@property (nonatomic,  assign) CGSize           underLineSize;
+///下划线颜色, Default is lightGrayColor
+@property (nonatomic,  strong) UIColor          *underLineColor;
 @end
 
 @interface JHVerificationCodeView : UIView

diff --git a/JHVerificationCodeView/JHVerificationCodeView/JHVerificationCodeView.m b/JHVerificationCodeView/JHVerificationCodeView/JHVerificationCodeView.m
@@ -29,13 +29,18 @@
 
 #import "JHVerificationCodeView.h"
 
+#define kFlickerAnimation @"kFlickerAnimation"
+
 @implementation JHVCConfig
 
 - (instancetype)init{
     if (self = [super init]) {
         _inputBoxBorderWidth = 1.0/[UIScreen mainScreen].scale;
         _inputBoxSpacing = 5;
         _inputBoxColor = [UIColor lightGrayColor];
+        _tintColor = [UIColor blueColor];
+        _showFlickerAnimation = YES;
+        _underLineColor = [UIColor lightGrayColor];
     }
     return self;
 }
@@ -49,6 +54,10 @@ @interface JHVerificationCodeView()
 
 @implementation JHVerificationCodeView
 
+- (void)dealloc{
+    [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
 - (instancetype)initWithFrame:(CGRect)frame config:(JHVCConfig *)config{
     if (self = [super initWithFrame:frame]) {
         _config = config;
@@ -97,6 +106,19 @@ - (void)jhSetupViews:(CGRect)frame
     }
     inputBoxHeight = _config.inputBoxHeight;
 
+    if (_config.showUnderLine) {
+        if (_config.underLineSize.width <= 0) {
+            CGSize size = _config.underLineSize;
+            size.width = inputBoxWidth;
+            _config.underLineSize = size;
+        }
+        if (_config.underLineSize.height <= 0) {
+            CGSize size = _config.underLineSize;
+            size.height = 1;
+            _config.underLineSize = size;
+        }
+    }
+
     for (int i = 0; i < _config.inputBoxNumber; ++i) {
         UITextField *textField = [[UITextField alloc] init];
         textField.frame = CGRectMake(_config.leftMargin+(inputBoxWidth+inputBoxSpacing)*i, (CGRectGetHeight(frame)-inputBoxHeight)*0.5, inputBoxWidth, inputBoxHeight);
@@ -111,7 +133,20 @@ - (void)jhSetupViews:(CGRect)frame
             textField.layer.borderColor = _config.inputBoxColor.CGColor;
         }
         if (_config.tintColor) {
-            textField.tintColor = _config.tintColor;
+            if (inputBoxWidth > 2 && inputBoxHeight > 8) {
+                CGFloat w = 2, y = 4, x = (inputBoxWidth-w)/2, h = inputBoxHeight-2*y;
+                [textField.layer addSublayer:({
+                    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x,y,w,h)];
+                    CAShapeLayer *layer = [CAShapeLayer layer];
+                    layer.path = path.CGPath;
+                    layer.fillColor = _config.tintColor.CGColor;
+                    [layer addAnimation:[self xx_alphaAnimation] forKey:kFlickerAnimation];
+                    if (i != 0) {
+                        layer.hidden = YES;
+                    }
+                    layer;
+                })];
+            }
         }
         if (_config.secureTextEntry) {
             textField.secureTextEntry = _config.secureTextEntry;
@@ -122,6 +157,17 @@ - (void)jhSetupViews:(CGRect)frame
         if (_config.textColor) {
             textField.textColor = _config.textColor;
         }
+        if (_config.showUnderLine) {
+            CGFloat x = (inputBoxWidth-_config.underLineSize.width)/2.0;
+            CGFloat y = (inputBoxHeight-_config.underLineSize.height);
+            CGRect frame = CGRectMake(x, y, _config.underLineSize.width, _config.underLineSize.height);
+
+            UIView *underLine = [[UIView alloc] init];
+            underLine.frame = frame;
+            underLine.backgroundColor = _config.underLineColor;
+            [textField addSubview:underLine];
+
+        }
 
         textField.tag = i;
         textField.userInteractionEnabled = NO;
@@ -136,7 +182,9 @@ - (void)jhSetupViews:(CGRect)frame
     _textView.frame = CGRectMake(0, CGRectGetHeight(frame), 0, 0);
     _textView.secureTextEntry = YES;
     [self addSubview:_textView];
-    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textChange:) name:UITextViewTextDidChangeNotification object:_textView];
+
+    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(xx_textChange:) name:UITextViewTextDidChangeNotification object:_textView];
+    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(xx_didBecomeActive) name:UIApplicationDidBecomeActiveNotification object:nil];
 
     if (_config.autoShowKeyboard) {
         dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
@@ -145,23 +193,58 @@ - (void)jhSetupViews:(CGRect)frame
     }
 }
 
+- (CABasicAnimation *)xx_alphaAnimation{
+    CABasicAnimation *alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
+    alpha.fromValue = @(1.0);
+    alpha.toValue = @(0.0);
+    alpha.duration = 1.0;
+    alpha.repeatCount = CGFLOAT_MAX;
+    alpha.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
+    return alpha;
+}
+
 - (void)xx_tap{
     [_textView becomeFirstResponder];
 }
 
-- (void)dealloc{
-    [[NSNotificationCenter defaultCenter] removeObserver:self];
+- (void)xx_didBecomeActive{
+    // restart Flicker Animation
+    if (_config.showFlickerAnimation && _textView.text.length < self.subviews.count) {
+        UITextField *textField = self.subviews[_textView.text.length];
+        CALayer *layer = textField.layer.sublayers[0];
+        [layer removeAnimationForKey:kFlickerAnimation];
+        [layer addAnimation:[self xx_alphaAnimation] forKey:kFlickerAnimation];
+    }
 }
 
-- (void)textChange:(NSNotification *)noti
+- (void)xx_textChange:(NSNotification *)noti
 {
+    NSLog(@"%@",noti.object);
     if (_textView != noti.object) {
         return;
     }
 
-    //去空格
+    NSInteger count = _config.inputBoxNumber;
+
+    // set default
+    for (int i = 0; i < count; ++i) {
+        UITextField *textField = self.subviews[i];
+        textField.text = @"";
+
+        if (_config.inputBoxColor) {
+            textField.layer.borderColor = _config.inputBoxColor.CGColor;
+        }
+        if (_config.showFlickerAnimation) {
+            CALayer *layer = textField.layer.sublayers[0];
+            layer.hidden = YES;
+            [layer removeAnimationForKey:kFlickerAnimation];
+        }
+    }
+
+    // trim space
     NSString *text = [_textView.text stringByReplacingOccurrencesOfString:@" " withString:@""];
-    //保留数字和字母
+    // number & alphabet
+
     NSMutableString *mstr = @"".mutableCopy;
     for (int i = 0; i < text.length; ++i) {
         unichar c = [text characterAtIndex:i];
@@ -184,22 +267,14 @@ - (void)textChange:(NSNotification *)noti
     }
 
     text = mstr;
-    if (text.length > 6) {
-        text = [text substringToIndex:6];
+    if (text.length > count) {
+        text = [text substringToIndex:count];
     }
     _textView.text = text;
 
     NSLog(@"%@",text);
 
-    for (int i = 0; i < 6; ++i) {
-        UITextField *textField = self.subviews[i];
-        textField.text = @"";
-
-        if (_config.inputBoxColor) {
-            textField.layer.borderColor = _config.inputBoxColor.CGColor;
-        }
-    }
-
+    // set value
     for (int i = 0; i < text.length; ++i) {
         unichar c = [text characterAtIndex:i];
         UITextField *textField = self.subviews[i];
@@ -210,7 +285,15 @@ - (void)textChange:(NSNotification *)noti
         }
     }
 
-    if (text.length == 6) {
+    // Flicker Animation
+    if (_config.showFlickerAnimation && text.length < self.subviews.count) {
+        UITextField *textField = self.subviews[text.length];
+        CALayer *layer = textField.layer.sublayers[0];
+        layer.hidden = NO;
+        [layer addAnimation:[self xx_alphaAnimation] forKey:kFlickerAnimation];
+    }
+
+    if (text.length == count) {
         [self xx_finish];
     }
 }

diff --git a/JHVerificationCodeView/ViewController.m b/JHVerificationCodeView/ViewController.m
@@ -84,7 +84,7 @@ - (void)jhSetupViews
         config.inputBoxSpacing = 5;
         config.inputBoxWidth   = 33;
         config.inputBoxHeight  = 28;
-        config.tintColor       = [UIColor blackColor];
+        config.tintColor       = [UIColor greenColor];
         config.secureTextEntry = NO;
         config.inputBoxColor   = [UIColor brownColor];
         config.font            = [UIFont boldSystemFontOfSize:16];
@@ -124,8 +124,8 @@ - (void)jhSetupViews
         config.inputBoxSpacing = -1;
         config.inputBoxWidth   = 33;
         config.inputBoxHeight  = 28;
-        config.tintColor       = [UIColor blackColor];
-        config.secureTextEntry = NO;
+        config.tintColor       = [UIColor redColor];
+        config.secureTextEntry = YES;
         config.inputBoxColor   = [UIColor brownColor];
         config.font            = [UIFont boldSystemFontOfSize:16];
         config.textColor       = [UIColor grayColor];
@@ -150,6 +150,47 @@ - (void)jhSetupViews
         })];
     }
 
+    // example 4
+    {
+        UILabel *label = [[UILabel alloc] init];
+        label.frame = CGRectMake(0, 390, kScreenWidth, 30);
+        label.textAlignment = 1;
+        label.text = @"InputType: Alphabet";
+        [self.view addSubview:label];
+
+        JHVCConfig *config     = [[JHVCConfig alloc] init];
+        config.inputBoxNumber  = 4;
+        config.inputBoxSpacing = 4;
+        config.inputBoxWidth   = 33;
+        config.inputBoxHeight  = 28;
+        config.tintColor       = [UIColor blueColor];
+        config.secureTextEntry = YES;
+        config.inputBoxColor   = [UIColor clearColor];
+        config.font            = [UIFont boldSystemFontOfSize:16];
+        config.textColor       = [UIColor grayColor];
+        config.inputType       = JHVCConfigInputType_Alphabet;
+
+        config.inputBoxBorderWidth  = 1;
+        config.showUnderLine = YES;
+        config.underLineSize = CGSizeMake(33, 2);
+        config.underLineColor = [UIColor brownColor];
+
+        [self.view addSubview:({
+
+            UILabel *label = [[UILabel alloc] init];
+            label.frame = CGRectMake(0, 450, kScreenWidth, 30);
+            label.textAlignment = 1;
+            [self.view addSubview:label];
+
+            JHVerificationCodeView *codeView =
+            [[JHVerificationCodeView alloc] initWithFrame:CGRectMake(10, 420, kScreenWidth-20, 30)
+                                                   config:config];
+            codeView.finishBlock = ^(NSString *code) {
+                label.text = code;
+            };
+            codeView;
+        })];
+    }
 }
 
 - (void)didReceiveMemoryWarning {

diff --git a/image.png b/image.png