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.

Answer 3

I can think of a way to achieve this effect. But what you need is not a blur mask, you need to use a clipping mask.

1- present a modal view controller with a view that contains a UIVisualEffectView in the back, and a scrollview/tableview/collection view in the front that is offset 40px (or however much you want) from the top and bottom. 2- Add a mask to the scroll view using a black and white image tailored to the task, you can add the mask using the following code:

var maskImage = UIImage(name: "yourMask")
var maskLayer = CALayer()
maskLayer.frame = scrollView.bounds()
maskLayer.contents = maskImage.CGImage
scrollview.layer.mask = maskLayer

3- Alternatively, you can also use CAGradientLayer to achieve the same effect (this would work better with scaling as well). There's plenty of solutions on stack overflow on how to create a gradient layer, like this one: Create gradient image programmatically in iOS

Having said that I don't understand why your question is down voted. I think it's a perfectly good question to make.

Hope this helps!