Add blur mask on top and bottom of the screen in Objective-C

Question

I need to add mask on top and buttom of the screen like this.

How can I achieve this ?

Answer 1

if (!UIAccessibilityIsReduceTransparencyEnabled()) {        
        self.BlurView.backgroundColor = [UIColor clearColor];
        UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
        blurEffectView.frame = self.view.bounds;
        [blurEffectView setAlpha:1.0];
        [self.BlurView addSubview:blurEffectView];        
    }

Where self.BlurView is type of UIView .

You can keep this for your upper and bottom view . And can adjust frame blurEffectView.frame according to your upper and bottom dimensions .

Hope this will help you.

Answer 2

1. Set up UIImageView with your background image.

2. Add UIVisualEffectView over the top:

   UIVisualEffectView * vs = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
   vs.frame = self.view.bounds;
   [self.view addSubview:vs];
   

3. Add a UIView over the top, and put your UITableView (or whatever) in that.

4. Add this code:

   CAGradientLayer * layer = [CAGradientLayer layer];
   layer.frame = tableHolder.bounds;
   layer.colors = [NSArray arrayWithObjects:(id)[UIColor blackColor].CGColor, (id)[UIColor clearColor].CGColor, (id)[UIColor clearColor].CGColor, nil];
   layer.locations = @[@0.90,@0.99,@1.0];
   layer.startPoint = CGPointMake(0.0, 1.0f);
   layer.endPoint = CGPointMake(0.0f, 0.0f);
   tableHolder.layer.mask = layer;
   tableHolder.layer.masksToBounds = true;
   [tableHolder.layer insertSublayer:layer atIndex:0];
   

Adjust the variables for your own needs, you'll have to change the locations.

You're not 'blurring' the tops and bottoms, but gradually masking them out via the gradient layer.