Draw a shaded rectangle in iOS

Question

I am trying to make an image as shown below with libraries in iOS; but i could not.

I think it is very easy to draw, but I could not achieve. After I completed the drawing, I placed an inscription above it.

Answer 1

Use this as your drawRect method:

 - (void)drawRect:(CGRect)rect //// General Declarations CGContextRef context = UIGraphicsGetCurrentContext(); //// Shadow Declarations UIColor* shadow = [UIColor blackColor]; CGSize shadowOffset = CGSizeMake(1, 1); CGFloat shadowBlurRadius = 2; //// Frames CGRect frame = rect; //// Abstracted Graphic Attributes CGRect shadowBoxRect = CGRectMake(CGRectGetMinX(frame) + 0, CGRectGetMinY(frame) + 0, 40, 40); CGFloat shadowBoxCornerRadius = 4; //// ShadowBox Drawing UIBezierPath* shadowBoxPath = [UIBezierPath bezierPathWithRoundedRect: shadowBoxRect cornerRadius: shadowBoxCornerRadius]; [[UIColor lightGrayColor] setFill]; [shadowBoxPath fill]; ////// ShadowBox Inner Shadow CGRect shadowBoxBorderRect = CGRectInset([shadowBoxPath bounds], -shadowBlurRadius, -shadowBlurRadius); shadowBoxBorderRect = CGRectOffset(shadowBoxBorderRect, -shadowOffset.width, -shadowOffset.height); shadowBoxBorderRect = CGRectInset(CGRectUnion(shadowBoxBorderRect, [shadowBoxPath bounds]), -1, -1); UIBezierPath* shadowBoxNegativePath = [UIBezierPath bezierPathWithRect: shadowBoxBorderRect]; [shadowBoxNegativePath appendPath: shadowBoxPath]; shadowBoxNegativePath.usesEvenOddFillRule = YES; CGContextSaveGState(context); { CGFloat xOffset = shadowOffset.width + round(shadowBoxBorderRect.size.width); CGFloat yOffset = shadowOffset.height; CGContextSetShadowWithColor(context, CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)), shadowBlurRadius, shadow.CGColor); [shadowBoxPath addClip]; CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(shadowBoxBorderRect.size.width), 0); [shadowBoxNegativePath applyTransform: transform]; [[UIColor grayColor] setFill]; [shadowBoxNegativePath fill]; } CGContextRestoreGState(context); } 

Answer 2

Inner shadows are hard to do with CoreGraphics - basically, you need to undo your path and draw below the shadows attached to the original path.

You can look at PaintCode and it will show you the code. It has a 15-minute demo mode, if you do not want to buy it, this should be enough for your needs.

Answer 3

You can try the following:

 #import <QuartzCore/QuartzCore.h> 

and in your code, after creating your view, set the following:

 self.layer.cornerRadius = x; self.layer.masksToBounds = TRUE; 

This allows you to have rounded corners on your screen. And if you calculate the radius according to your idea, you should get the desired look.

  - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor grayColor]; } return self; } - (void)drawRect:(CGRect)rect { CGContextRef context =UIGraphicsGetCurrentContext(); CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); // And draw with a blue fill color CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); // Draw them with a 2.0 stroke width so they are a bit more visible. CGContextSetLineWidth(context, 2.0); CGContextAddRect(context, self.bounds); CGContextStrokePath(context); // Close the path CGContextClosePath(context); // Fill & stroke the path CGContextDrawPath(context, kCGPathFillStroke); self.layer.cornerRadius = self.bounds.size.width/12; self.layer.masksToBounds = TRUE; } 

I think it will be useful for you.

Answer 4

Try the code below, where myView is the UIView for which you want to set the shadow.

 myView.layer.cornerRadius = 5.0f; myView.layer.masksToBounds = YES; [myView.layer setShadowColor:[[UIColor blackColor] colorWithAlphaComponent: 0.5]]; [myView.layer setShadowOffset:CGSizeMake(0, -1)]; 

Hope this helps.