Trying to create a custom horizontal UIPickerView using UIScrollView - how do I fade the edges out like in UIPickerView?

Question

In iOS 7, the UIPickerViews have a nice shadow on the text as it gets closer to the edges:

enter image description here

If I'm using a UIScrollView, is it possible to achieve a similar effect where the text at the edges is slightly shadowed/blended into the background?

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

See here and here for my answers to similar questions.

My solution was to subclass UIScrollView, and create a mask layer in the layoutSubviews method.

The code in the above answers is also here on github.

Hope that helps!

edited May 23 '17 at 12:14

Community

1
1

answered Nov 06 '13 at 05:46

Steph Sharp

11,462
5
44
81

Steph's solution is by far the cleanest. – hatfinch Nov 06 '13 at 10:31

score 0 · Answer 2 · answered Nov 05 '13 at 14:40

I did a similar thing with this class to fade the left and right edges of a scrolling marquee. Much less hassle than using two images as you can resize or recolor it easily:

@interface MarqueeFadeOverlay : UIView
@property(assign, nonatomic) CGGradientRef gradientLayer;
- (id)initWithFrame:(CGRect)frame andEndFadeWidth:(float)fadeWidth andFadeBarColor:(UIColor *)color;
@end

@implementation MarqueeFadeOverlay {
  UIColor *fadeBarColor;
  float endFadeWidth;
}

- (id)initWithFrame:(CGRect)frame andEndFadeWidth:(float)fadeWidth andFadeBarColor:(UIColor *)color {
    self = [super initWithFrame:frame];
    if (self) {
        endFadeWidth = fadeWidth;
        fadeBarColor = color;
        [self setOpaque:NO];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextDrawLinearGradient(context, self.gradientLayer, CGPointMake(0.0, 0.0),
    CGPointMake(self.frame.size.width, 0.0), kCGGradientDrawsBeforeStartLocation);
}

- (CGGradientRef)gradientLayer {
    if (_gradientLayer == nil) {
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGFloat *colorComponents = [self rgbaFrom:fadeBarColor];
        if (endFadeWidth == 0) endFadeWidth = 0.1;
        CGFloat locations[] = {0.0, endFadeWidth, 1.0 - endFadeWidth, 1.0};
        CGFloat colors[] = {colorComponents[0], colorComponents[1], colorComponents[2], 1.00,
            colorComponents[0], colorComponents[1], colorComponents[2], 0,
            colorComponents[0], colorComponents[1], colorComponents[2], 0,
            colorComponents[0], colorComponents[1], colorComponents[2], 1.00};

        _gradientLayer = CGGradientCreateWithColorComponents(colorSpace, colors, locations, sizeof(colors) / (sizeof(colors[0]) * 4));
       CGColorSpaceRelease(colorSpace);
   }
   return _gradientLayer;
}

-(CGFloat *)rgbaFrom:(UIColor *)color {
   CGColorRef colorRef = [color CGColor];
   return (CGFloat *) CGColorGetComponents(colorRef); 

}

You just init one with a frame, a fade width between 0 and 1 and a color to match the background, and add to the parent view.

score -1 · Answer 3 · answered Nov 05 '13 at 13:47

-1

I would place two custom overlay views for this that you place on top of the scroll view. The views could either contain a pre-made image with a gradient from full white to an alpha of 0, or you could draw the image in code, either with Core Graphics or a CAGradientLayer.

If you set userInteractionEnabled = NO; on the views, they won't interfere with the touch handling.

answered Nov 05 '13 at 13:47

Ole Begemann

135,006
31
278
256

Would that not cause a gradient rectangle? The text is the only part being blended in the above screenshot – Doug Smith Nov 05 '13 at 14:21
Which is exactly the effect you would achieve with a gradient that blends from alpha=1 to alpha=0. – Ole Begemann Nov 05 '13 at 18:00
On the text, not on an arbritrary rectangle. – Doug Smith Nov 05 '13 at 20:33

Trying to create a custom horizontal UIPickerView using UIScrollView - how do I fade the edges out like in UIPickerView?

3 Answers3