CALayer未在设备/模拟器上显示

Question

I've created a custom UITextField which supports partial borders:

@import UIKit;

IB_DESIGNABLE
@interface TextField : UITextField

@property (nonatomic, strong) IBInspectable UIColor* borderColor;
@property (nonatomic, assign) IBInspectable CGFloat borderWidth;

@property (nonatomic, assign) IBInspectable BOOL topBorder;
@property (nonatomic, assign) IBInspectable BOOL rightBorder;
@property (nonatomic, assign) IBInspectable BOOL bottomBorder;
@property (nonatomic, assign) IBInspectable BOOL leftBorder;

@end

Each border is implemented as a CALayer:

@interface TextField ()

@property (nonatomic, strong) CALayer *topBorderLayer;
@property (nonatomic, strong) CALayer *rightBorderLayer;
@property (nonatomic, strong) CALayer *bottomBorderLayer;
@property (nonatomic, strong) CALayer *leftBorderLayer;

@end

When a BOOL value is set to YES , the relevant layer is created and added as a sublayer to the text field.

Eg if we set topBorder to YES :

- (void)setTopBorder:(BOOL)topBorder
{
    if (topBorder) {
        self.topBorderLayer = [CALayer layer];
        self.topBorderLayer.backgroundColor = [self.borderColor CGColor];
        self.topBorderLayer.frame =
        CGRectMake(0, 0, self.frame.size.width, self.borderWidth);
        [self.layer addSublayer:self.topBorderLayer];
    } else {
        [self.topBorderLayer removeFromSuperlayer];
        self.topBorderLayer = nil;
    }

    _topBorder = topBorder;
}

Now, the question.

This is how IB renders my text field if I set all border properties to YES :

And this is how the device / simulator renders it:

The right border is not rendering

Any idea why? Thanks in advance!

Source code is available here: Gist

Thoughts - I

I'm using an empty UIView to create a padding.

 //Padding

 UIView *paddingView = [[UIView alloc] initWithFrame:
                       CGRectMake(0, 0, 15, self.frame.size.height)];
 self.leftView = paddingView;
 self.leftViewMode = UITextFieldViewModeAlways;

Could it be the cause of the issue?

Answer 1

I've switched from CALayer to CoreGraphics .

It gets the job done.

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    if (self.topBorder) {
        CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
        CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMinY(rect));
        CGContextSetStrokeColorWithColor(context, [self.borderColor CGColor] );
        CGContextSetLineWidth(context, self.borderWidth);
        CGContextStrokePath(context);
    }

    if (self.rightBorder) {
        CGContextMoveToPoint(context, CGRectGetMaxX(rect), CGRectGetMinY(rect));
        CGContextAddLineToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
        CGContextSetStrokeColorWithColor(context, [self.borderColor CGColor] );
        CGContextSetLineWidth(context, self.borderWidth);
        CGContextStrokePath(context);
    }

    if (self.bottomBorder) {
        CGContextMoveToPoint(context, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
        CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect));
        CGContextSetStrokeColorWithColor(context, [self.borderColor CGColor] );
        CGContextSetLineWidth(context, self.borderWidth);
        CGContextStrokePath(context);
    }

    if (self.leftBorder) {
        CGContextMoveToPoint(context, CGRectGetMinX(rect), CGRectGetMaxY(rect));
        CGContextAddLineToPoint(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
        CGContextSetStrokeColorWithColor(context, [self.borderColor CGColor] );
        CGContextSetLineWidth(context, self.borderWidth);
        CGContextStrokePath(context);
    }
}

Now it renders correctly on both IB and device/simulator.