Added variable input field view

Author: TimOliver

TOPasscodeViewController/Models/TOPasscodeCircleImage.h

@@ -12,7 +12,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface TOPasscodeCircleImage : UIImage
 
-+ (UIImage *)circleImageOfSize:(CGFloat)size inset:(CGFloat)inset padding:(CGFloat)padding;
++ (UIImage *)circleImageOfSize:(CGFloat)size inset:(CGFloat)inset padding:(CGFloat)padding antialias:(BOOL)antialias;
 + (UIImage *)hollowCircleImageOfSize:(CGFloat)size strokeWidth:(CGFloat)strokeWidth padding:(CGFloat)padding;
 
 @end

TOPasscodeViewController/Models/TOPasscodeCircleImage.m

@@ -10,15 +10,18 @@
 
 @implementation TOPasscodeCircleImage
 
-+ (UIImage *)circleImageOfSize:(CGFloat)size inset:(CGFloat)inset padding:(CGFloat)padding
++ (UIImage *)circleImageOfSize:(CGFloat)size inset:(CGFloat)inset padding:(CGFloat)padding antialias:(BOOL)antialias
 {
     UIImage *image = nil;
     CGSize imageSize = (CGSize){size + (padding * 2), size + (padding * 2)};
 
     UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0f);
     {
         CGContextRef context = UIGraphicsGetCurrentContext();
-        CGContextSetShouldAntialias(context, NO);
+
+        if (!antialias) {
+            CGContextSetShouldAntialias(context, NO);
+        }
 
         CGRect rect = (CGRect){padding + inset, padding + inset, size - (inset * 2), size - (inset * 2)};
         UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect:rect];

TOPasscodeViewController/Views/TOPasscodeFixedInputView.m

@@ -106,7 +106,7 @@ - (void)setCircleViewsForLength:(NSInteger)length
 - (void)setCircleImagesForDiameter:(CGFloat)diameter
 {
     self.circleImage = [TOPasscodeCircleImage hollowCircleImageOfSize:diameter strokeWidth:1.0f padding:1.0f];
-    self.highlightedCircleImage = [TOPasscodeCircleImage circleImageOfSize:diameter inset:0.5f padding:1.0f];
+    self.highlightedCircleImage = [TOPasscodeCircleImage circleImageOfSize:diameter inset:0.5f padding:1.0f antialias:NO];
 
     for (TOPasscodeCircleView *circleView in self.circleViews) {
         [self setImagesOfCircleView:circleView];
@@ -124,6 +124,7 @@ - (void)setImagesOfCircleView:(TOPasscodeCircleView *)circleView
 - (NSArray<TOPasscodeCircleView *> *)circleViews
 {
     if (_circleViews) { return _circleViews; }
+    _circleViews = [NSArray array];
     [self setCircleViewsForLength:self.length];
     [self setCircleImagesForDiameter:self.circleDiameter];
     return _circleViews;

TOPasscodeViewController/Views/TOPasscodeInputField.h

@@ -11,8 +11,8 @@
 NS_ASSUME_NONNULL_BEGIN
 
 typedef NS_ENUM(NSInteger, TOPasscodeInputFieldStyle) {
-    TOPasscodeInputFieldStyleFixed,    // The passcode explicitly requires a specific number of characters
-    TOPasscodeInputFieldStyleVariable  // The passcode can be any arbitrary numher of characters
+    TOPasscodeInputFieldStyleFixed,    // The passcode explicitly requires a specific number of characters (Shows hollow circles)
+    TOPasscodeInputFieldStyleVariable  // The passcode can be any arbitrary number of characters (Shows an empty rectangle)
 };
 
 @interface TOPasscodeInputField : UIVisualEffectView <UIKeyInput>

TOPasscodeViewController/Views/TOPasscodeInputField.m

@@ -73,7 +73,7 @@ - (void)layoutSubviews
 - (void)updateCircleImagesForDiameter:(CGFloat)diameter
 {
     self.circleImage = [TOPasscodeCircleImage hollowCircleImageOfSize:diameter strokeWidth:1.0f padding:1.0f];
-    self.highlightedCircleImage = [TOPasscodeCircleImage circleImageOfSize:diameter inset:0.5f padding:1.0f];
+    self.highlightedCircleImage = [TOPasscodeCircleImage circleImageOfSize:diameter inset:0.5f padding:1.0f antialias:NO];
 
     for (TOPasscodeCircleView *circleView in self.fixedCircleViews) {
         circleView.circleImage = self.circleImage;

TOPasscodeViewController/Views/TOPasscodeKeypadView.m

@@ -163,7 +163,7 @@ - (UIImage *)buttonImage
 - (UIImage *)tappedButtonImage
 {
     if (!_tappedButtonImage) {
-        _tappedButtonImage = [TOPasscodeCircleImage circleImageOfSize:self.buttonDiameter inset:self.buttonStrokeWidth * 0.5f padding:1.0f];
+        _tappedButtonImage = [TOPasscodeCircleImage circleImageOfSize:self.buttonDiameter inset:self.buttonStrokeWidth * 0.5f padding:1.0f antialias:NO];
     }
 
     return _tappedButtonImage;

TOPasscodeViewController/Views/TOPasscodeVariableInputField.h

@@ -8,7 +8,7 @@
 
 #import <UIKit/UIKit.h>
 
-@interface TOPasscodeVariableInputField : UIView
+@interface TOPasscodeVariableInputField : UIImageView
 
 /* The thickness of the stroke around the view (Default is 1.5) */
 @property (nonatomic, assign) CGFloat outlineThickness;
@@ -28,7 +28,7 @@
 /* The maximum number of circles to show (This will indicate the view's width) (Default is 10) */
 @property (nonatomic, assign) NSInteger maximumVisibleLength;
 
-/* Set the number of characters entered into this view (May be larger than `maximumVisibleLenght`) */
+/* Set the number of characters entered into this view (May be larger than `maximumVisibleLength`) */
 @property (nonatomic, assign) NSInteger length;
 
 /* Set the number of characters represented by this field, animated if desired */

TOPasscodeViewController/Views/TOPasscodeVariableInputField.m

@@ -7,23 +7,203 @@
 //
 
 #import "TOPasscodeVariableInputField.h"
+#import "TOPasscodeCircleImage.h"
+
+@interface TOPasscodeVariableInputField ()
+
+@property (nonatomic, strong) UIImage *backgroundImage; // The outline image for this view
+@property (nonatomic, strong) UIImage *circleImage;     // The circle image representing a single character
+
+@property (nonatomic, strong) NSMutableArray<UIImageView *> *circleViews;
+
+@end
 
 @implementation TOPasscodeVariableInputField
 
+#pragma mark - Class Creation -
+
 - (instancetype)initWithFrame:(CGRect)frame
 {
     if (self = [super initWithFrame:frame]) {
-        _outlineThickness = 1.5f;
-        _outlineCornerRadius = 15.0f;
-        _circleDiameter = 13.0f;
-        _circleSpacing = 10.0f;
+        _outlineThickness = 1.0f;
+        _outlineCornerRadius = 5.0f;
+        _circleDiameter = 11.0f;
+        _circleSpacing = 7.0f;
         _outlinePadding = (CGSize){10,10};
-        _maximumVisibleLength = 10.0f;
+        _maximumVisibleLength = 10;
     }
 
     return self;
 }
 
+#pragma mark - View Setup -
+- (void)setUpImageForCircleViews
+{
+    if (self.circleImage != nil) { return; }
+
+    self.circleImage = [TOPasscodeCircleImage circleImageOfSize:_circleDiameter inset:0.0f padding:1.0f antialias:YES];
+    for (UIImageView *circleView in self.circleViews) {
+        circleView.image = self.circleImage;
+        [circleView sizeToFit];
+    }
+}
+
+- (void)setUpCircleViewsForLength:(NSInteger)length
+{
+    // Set up the number of circle views if needed
+    if (self.circleViews.count == length) { return; }
+
+    if (self.circleViews == nil) {
+        self.circleViews = [NSMutableArray arrayWithCapacity:_maximumVisibleLength];
+    }
+
+    // Reduce the number of views
+    while (self.circleViews.count > length) {
+        UIImageView *circleView = self.circleViews.lastObject;
+        [circleView removeFromSuperview];
+        [self.circleViews removeLastObject];
+    }
+
+    // Increase the number of views
+    while (self.circleViews.count < length) {
+        UIImageView *circleView = [[UIImageView alloc] initWithImage:self.circleImage];
+        circleView.alpha = 0.0f;
+        [self addSubview:circleView];
+        [self.circleViews addObject:circleView];
+    }
+}
+
+- (void)setUpBackgroundImage
+{
+    if (self.backgroundImage != nil) { return; }
+
+    self.backgroundImage = [[self class] backgroundImageWithThickness:_outlineThickness cornerRadius:_outlineCornerRadius];
+    self.image = self.backgroundImage;
+}
+
+#pragma mark - View Layout -
+
+- (void)sizeToFit
+{
+    CGRect frame = self.frame;
+
+    // Calculate the width
+    frame.size.width = self.outlineThickness * 2.0f;
+    frame.size.width += (self.outlinePadding.width * 2.0f);
+    frame.size.width += (self.maximumVisibleLength * (self.circleDiameter+2.0f)); // +2 for padding
+    frame.size.width += (self.maximumVisibleLength - 1) * self.circleSpacing;
+
+    // Height
+    frame.size.height = self.outlineThickness * 2.0f;
+    frame.size.height += self.outlinePadding.height * 2.0f;
+    frame.size.height += self.circleDiameter;
+
+    self.frame = frame;
+}
+
+- (void)layoutSubviews
+{
+    [super layoutSubviews];
+
+    // Genearate the background image if we don't have one yet
+    [self setUpBackgroundImage];
+
+    // Set up the circle view image
+    [self setUpImageForCircleViews];
+
+    // Set up the circle views
+    [self setUpCircleViewsForLength:self.maximumVisibleLength];
+
+    // Layout the circle views for the current length
+    CGRect frame = CGRectZero;
+    frame.size = self.circleImage.size;
+    frame.origin.y = CGRectGetMidY(self.bounds) - (frame.size.height * 0.5f);
+    frame.origin.x = self.outlinePadding.width + self.outlineThickness;
+
+    for (UIImageView *circleView in self.circleViews) {
+        circleView.frame = frame;
+        frame.origin.x += frame.size.width + self.circleSpacing;
+    }
+}
+
+#pragma mark - Accessors -
+
+- (void)setOutlineThickness:(CGFloat)outlineThickness
+{
+    if (_outlineThickness == outlineThickness) { return; }
+    _outlineThickness = outlineThickness;
+    self.backgroundImage = nil;
+    [self setNeedsLayout];
+}
+
+- (void)setOutlineCornerRadius:(CGFloat)outlineCornerRadius
+{
+    if (_outlineCornerRadius == outlineCornerRadius) { return; }
+    _outlineCornerRadius = outlineCornerRadius;
+    self.backgroundImage = nil;
+    [self setNeedsLayout];
+}
+
+- (void)setCircleDiameter:(CGFloat)circleDiameter
+{
+    if (_circleDiameter == circleDiameter) { return; }
+    _circleDiameter = circleDiameter;
+    [self setUpImageForCircleViews];
+}
+
+- (void)setLength:(NSInteger)length
+{
+    [self setLength:length animated:NO];
+}
+
+- (void)setLength:(NSInteger)length animated:(BOOL)animated
+{
+    if (length == _length) { return; }
+
+    void (^animationBlock)() = ^{
+        NSInteger i = 0;
+        for (UIImageView *circleView in self.circleViews) {
+            circleView.alpha = i < length ? 1.0f : 0.0f;
+        }
+    };
+
+    if (!animated) {
+        animationBlock();
+        return;
+    }
+
+    [UIView animateWithDuration:0.4f animations:animationBlock];
+}
+
+#pragma mark - Image Creation -
 
++ (UIImage *)backgroundImageWithThickness:(CGFloat)thickness cornerRadius:(CGFloat)radius
+{
+    CGFloat inset = thickness / 2.0f;
+    CGFloat dimension = (radius * 2.0f) + 2.0f;
+
+    CGRect frame = CGRectZero;
+    frame.origin = CGPointMake(inset, inset);
+    frame.size = CGSizeMake(dimension, dimension);
+
+    CGSize canvasSize = frame.size;
+    canvasSize.width += thickness;
+    canvasSize.height += thickness;
+
+    UIGraphicsBeginImageContextWithOptions(canvasSize, NO, 0.0f);
+    {
+        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:radius];
+        path.lineWidth = thickness;
+        [[UIColor blackColor] setStroke];
+        [path stroke];
+    }
+
+    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+
+    UIEdgeInsets insets = UIEdgeInsetsMake(radius+1, radius+1, radius+1, radius+1);
+    image = [image resizableImageWithCapInsets:insets];
+    return [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+}
 
 @end