iphone - Drawing Shadowed Rectangle at iOS

Question

I am trying to draw an image like below with libraries in iOS; but i couldn't.

I think it is very easy to draw but i couldn't achieve. After i accomplish to draw i will place a label over 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 negate your path and draw a drop shadow below it, clipped to your original path.

You can take a look at PaintCode and it will show you the code. It has a 15-min demo mode if you don't want to purchase it, that should be enough for your needs.

Answer 3

You could try this:

#import <QuartzCore/QuartzCore.h>

and in your code , after making the your view set these:

self.layer.cornerRadius = x;

self.layer.masksToBounds = TRUE;

This allows you to have rounded corners on your view. And if you calculate the radius to match your view , 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 helpful to you.

Answer 4

Try the below code where myView is the UIView to 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.-