在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!