Adding inner shadow on uitextfield and uitextview

Question

I am trying to add inner shadow on few UITextField and UITextView. I have set cornerRadius property for these controls to 1.0. and I am using the code which is mentioned below to create the inner shadow. But problem is that the shadow appears with the steep rectangular corners while the text view and the text field are with rounded corners.

I am calling following method in my viewcontroller class to add the shadow on my text field.

[self addInnerShadow:myTextField.frame];


- (void)addInnerShadow:(CGRect)frame

{

CAShapeLayer* shadowLayer = [CAShapeLayer layer];    
[shadowLayer setFrame:frame];    
[shadowLayer setShadowColor:[[UIColor blackColor] CGColor]];    
[shadowLayer setShadowOffset:CGSizeMake(0.0f, 0.0f)];    
[shadowLayer setShadowOpacity:1.0f];    
[shadowLayer setShadowRadius:5];

[shadowLayer setFillRule:kCAFillRuleEvenOdd]; 

CGMutablePathRef path = CGPathCreateMutable();    
CGPathAddRect(path, NULL, CGRectInset(CGRectMake(0, 0, frame.size.width, frame.size.height),-5, -5));    
CGMutablePathRef someInnerPath = CGPathCreateMutable();    
CGPathAddRect(someInnerPath, NULL, CGRectInset(CGRectMake(0, 0, frame.size.width, frame.size.height), 0, 0));

CGPathAddPath(path, NULL, someInnerPath);    
CGPathCloseSubpath(path);    
[shadowLayer setPath:path];    
CGPathRelease(path);

CAShapeLayer* maskLayer = [CAShapeLayer layer];    
[maskLayer setPath:someInnerPath];    
[shadowLayer setMask:maskLayer];    
[[self.view layer] addSublayer:shadowLayer];

}

score 0 · Answer 1 · answered Jan 09 '14 at 13:34

This

CGContextRef context = UIGraphicsGetCurrentContext();


// Shadow 
UIColor* shadow4 = [[UIColor blackColor] colorWithAlphaComponent: 0.81];
CGSize shadow4Offset = CGSizeMake(0.1, 2.1);
CGFloat shadow4BlurRadius = 5;


 UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(20.5, 26.5,    200, 40) cornerRadius: 4];
 [[UIColor whiteColor] setFill];
 [rectanglePath fill];


 CGRect rectangleBorderRect = CGRectInset([rectanglePath bounds], -shadow4BlurRadius, -   shadow4BlurRadius);
 rectangleBorderRect = CGRectOffset(rectangleBorderRect, -shadow4Offset.width, -    shadow4Offset.height);
 rectangleBorderRect = CGRectInset(CGRectUnion(rectangleBorderRect, [rectanglePath bounds]), -1,    -1);

 UIBezierPath* rectangleNegativePath = [UIBezierPath bezierPathWithRect: rectangleBorderRect];
 [rectangleNegativePath appendPath: rectanglePath];
 rectangleNegativePath.usesEvenOddFillRule = YES;

 CGContextSaveGState(context);
{
CGFloat xOffset = shadow4Offset.width + round(rectangleBorderRect.size.width);
CGFloat yOffset = shadow4Offset.height;
CGContextSetShadowWithColor(context,
    CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)),
    shadow4BlurRadius,
    shadow4.CGColor);

[rectanglePath addClip];
CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(rectangleBorderRect.size.width), 0);
[rectangleNegativePath applyTransform: transform];
[[UIColor grayColor] setFill];
[rectangleNegativePath fill];
}
CGContextRestoreGState(context);

[[UIColor blackColor] setStroke];
rectanglePath.lineWidth = 0.5;
[rectanglePath stroke];

Will produce this. You can manipulate this to get your desired effect.

Text Field in code

score 0 · Answer 2 · answered Jan 09 '14 at 14:04

Create path with UIBezierPath

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:frame
                                       byRoundingCorners:UIRectCornerAllCorners
                                       cornerRadii:CGSizeMake(5.0, 5.0)];

And than use it with Layer.

Adding inner shadow on uitextfield and uitextview

2 Answers2