UITextView bottom shadow on text

Question

Maybe you know the solution, how to add shadow on textView like:

So I need a transparent textView, where I can see view in the background

Answer 1

Apple provides CAReplicatorLayer which you can use to do automatic mirroring of a layer (amonst other things). This even works for video layers, and is very efficient (executing its drawing directly on the GPU).

The CAReplicatorLayer class creates a specified number of copies of its sublayers (the source layer), each copy potentially having geometric, temporal and color transformations applied to it.

There is a WWDC video ( Core Animation Essentials around 51:00) which talks briefly about how to use this, as well as an OSX demo project called ReplicatorDemo .

A quick search reveals a blog post that gives an example of reflecting a layer, although I haven't checked the quality of the code/technique.

Answer 2

I think you can combine the below methods (it is not tested!):

How do I use the NSString draw functionality to create a UIImage from text

UIImage * textImage = [self imageFromText:text];

//You may play with the scale value
UIImage *textImageMirrored = [UIImage imageWithCGImage:[textImage CGImage] scale:1.0 orientation:UIImageOrientationDownMirrored]; 

And then use this mirrored image in the correct position.
UIImageView *textShadow = [[UIImageView alloc] initWithImage:textImageMirrored];
textShadow.opacity = 0.6; //or so

Answer 3

I've done this in the past on a white background by making an white image with a gradient that starts full opaque and fades to clear. I overlaid this on top of my the bottom edge of my table view. It gave the appearance of the table view fading to white at the bottom edge.

I solved the "bottom" issue by just having the image slide down as I reached the very bottom of the scrolling content of the table so the last bits wouldn't fade.

If you have a complicated, moving or varied background, this might not be the best option, but for a simple background is worked well.

Answer 4

I find the best sulution. I use mask layer and CAGradientLayer. So if we use it for UITextView our layer will be dinamically. I create UIView, add my UITextView on this UIView and use layer for UIView

//this float need for creating second sublayer, for scrollIndicator
CGFloat layerWidth = 8.f;
CAGradientLayer *gl1 = [CAGradientLayer layer];
id col1 = (id)[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0]CGColor];
id col2 = (id)[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.0]CGColor];
gl1.colors = @[col2, col1, col1, col2];
gl1.locations = @[@0.0, @0.0, @0.85, @1.0];
//underTextView - this is my UIView
gl1.frame = CGRectMake(0, 0, self.underTextView.width - layerWidth, self.underTextView.height);
//layer for scrollIndicator - it must be visible always good
CAGradientLayer *gl2 = [CAGradientLayer layer];
gl2.colors = @[col1, col1];
gl2.locations = @[@0.0, @1.0];
gl2.frame = CGRectMake(self.underTextView.width - layerWidth, 0, layerWidth, self.underTextView.height);
//create main layer
CAGradientLayer *gl = [CAGradientLayer layer];
[gl addSublayer:gl1];
[gl addSublayer:gl2];
//add to mask of UIView
self.underTextView.layer.mask = gl;

So then I change locations of colors in CAGradientLayer in method - (void)scrollViewDidScroll:(UIScrollView *)scrollView for top and bottom gradient. So when I open textView I see good text on top and transparent in bottom, when scrolling I have transparent in top and in bottom, when scroll to bottom - transparent in top and opaque in bottom

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat layerWidth = 8.f;
CAGradientLayer *gl1 = [CAGradientLayer layer];
id col1 = (id)[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0]CGColor];
id col2 = (id)[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.0]CGColor];
gl1.colors = @[col2, col1, col1, col2];
if (self.mainTextView.contentOffset.y < 5)
    gl1.locations = @[@0.0, @0.0, @0.85, @1.0];
if (self.mainTextView.contentOffset.y >=5 && self.mainTextView.contentOffset.y < 20) {
    CGFloat number = (self.mainTextView.contentOffset.y - 5) * 0.01;
    gl1.locations = @[@0.0, [NSNumber numberWithFloat:number], @0.85, @1.0];
}
if (self.mainTextView.contentOffset.y >= 20  && self.mainTextView.contentOffset.y < self.mainTextView.contentSize.height - self.mainTextView.height - 20)
    gl1.locations = @[@0.0, @0.15, @0.85, @1.0];
if (self.mainTextView.contentOffset.y >= (self.mainTextView.contentSize.height - self.mainTextView.height - 20) && self.mainTextView.contentOffset.y < (self.mainTextView.contentSize.height - self.mainTextView.height - 5)) {
    CGFloat number = 1 - (self.mainTextView.contentSize.height - self.mainTextView.contentOffset.y - self.mainTextView.height - 5) * 0.01;
    gl1.locations = @[@0.0, @0.15, [NSNumber numberWithFloat:number], @1.0];
}
if (self.mainTextView.contentOffset.y >= self.mainTextView.contentSize.height - self.mainTextView.height - 5)
    gl1.locations = @[@0.0, @0.15, @1.0, @1.0];
gl1.frame = CGRectMake(0, 0, self.underTextView.width - layerWidth, self.underTextView.height);
CAGradientLayer *gl2 = [CAGradientLayer layer];
gl2.colors = @[col1, col1];
gl2.locations = @[@0.0, @1.0];
gl2.frame = CGRectMake(self.underTextView.width - layerWidth, 0, layerWidth, self.underTextView.height);
CAGradientLayer *gl = [CAGradientLayer layer];
[gl addSublayer:gl1];
[gl addSublayer:gl2];
self.underTextView.layer.mask = gl;
}