Shadow or Border around a scrollview iphone

Question

i would like to draw a border / shadow around a uiscrollview, i know that i could get there with an additional view or scrollview but dont like the handling an drawbacks but

Answer 1

To get the CGColorRef from an UIColor you can also use this example:

myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;

Answer 2

Dont forget to:

#import <QuartzCore/QuartzCore.h>

If you want to use

myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;

Answer 3

myView.layout.borderColor generates an incompatible pointer warning when using UIColor, and did not change the border for me.

Using CGColorRef worked for me instead:

CGFloat lComponents[4] = {0,0,0,1};
CGColorSpaceRef lColorSpace = CGColorSpaceCreateDeviceRGB();
myView.layer.borderColor = CGColorCreate(lColorSpace, lComponents);
CGColorSpaceRelease(lColorSpace);

Answer 4

If you use the layer property of your scroll view (or any UIView) you can easily get a solid border...

#import <QuartzCore/QuartzCore.h>
...
myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;

You can also use the layer to apply real-time shadows by setting the layer.shadow* properties, but performance can be slow with this technique, so I generally prefer to use the following more complex, but more performant technique. You can create a PNG image with transparency in the middle and shadows around the edge - it needs to have 9 distinct areas: 4 for each corner, 4 for each edge, and a completely transparent 1x1 pixel area in the middle. For example if your shadow extends 6 pixels into your image, your image would be 13x13 with the 6 pixel wide/high borders and the 1x1 area in the middle. Then you set it as a scalable image using:

newImage = [image stretchableImageWithLeftCapWidth:6 topCapHeight:6];

UPDATE: Since iOS 5.0 stretchableImageWithLeftCapWidth:topCapHeight: is deprecated so only use this if you still want to support iOS 4.x devices. If you want to support only iOS 5.0+ devices use this instead:

newImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

Then you put the image on the parent view so it takes up the entire area of the scroll view. If you want the shadows to go OVER your scrollable elements, (so your scroll view looks inset/behind the rest of the page) then place a transparent UIView over the top with the shadow image on it so that it shows through to your scroll view behind it.