Special effect on UITextView with no background image

Question

I would like my UITextView to have the special shadowed border as in the attached picture.

How can I achieve it in xcode 4.4 without locating a background image?

Answer 1

I'm not sure if this is able only through custom drawing (i.e. Quartz/Core Graphics). I'd still use a pre-rendered image if somehow possible. Check out this post for that.

But this one comes maybe close to the desired effect:

    [yourTextView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
    [yourTextView.layer setBorderColor: [[UIColor grayColor] CGColor]];
    [yourTextView.layer setBorderWidth: 1.0];
    [yourTextView.layer setCornerRadius: 8.0f];
    [yourTextView.layer setMasksToBounds: YES];

don't forget to import:

#import <QuartzCore/QuartzCore.h>

Answer 2

Here is what I have done to achieve the look:

• create a container view, say m wide by n high. Set it to clip subviews, and give its CALayer a corner radius

• create the text box using a rectangular view, set a corner radius, and have its origin.y be some small number - say 8. Adjust the height so its 2x the offset

• create a UIView subclass that uses a CAGradient layer, and have the gradient use a linear gradient starting at the top and becoming lighter as y increases.

• as above, create another gradient view where the gradient starts at the bottom and moves up (the white one) or maybe just use a solid white view

• add the first gradient view to the container view, then the second, then the text box.

The second gradient view needs to fade to a clear color so that it does not block the view underneath it (you can play around with the order of the two 'effects' views.