Effect of blur (frosted glass) in iOS SDK details, iossdk

Effect of blur (frosted glass) in iOS SDK details, iossdk

Original blog, reprinted, please indicate the source
Http://blog.csdn.net/hello_hwc? Viewmode = list

Preface:
Before iOS 8, some Github libraries are generally used to implement fuzzy effects. Of course, you can customize them yourself. The principle is to use Core Image for some digital Image processing (because of the electronic background, I did this course and used matrices ). However, after iOS 8, this was quite simple, because Apple made public several private APIs.

Demo Effect

Three types of Blur

Vibrancy (that is, add some content to emphasize on Blur)

Demo download link

Http://download.csdn.net/detail/hello_hwc/8678439

Add Blur

The principle is simple.

• UIBlurEffect initializes a blurEffect
• Create a visualiztview that defines the blur region.
• Add this View as a Subview to the view for blur

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];    UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];    [bluredEffectView setFrame:  CGRectInset(self.imageview.bounds, 20, 20);];    bluredEffectView.layer.cornerRadius = 15;    bluredEffectView.layer.masksToBounds = YES;    [self.imageview addSubview:bluredEffectView];

Among them, there are three types of Blur, which correspond to the three types in the Demo diagram above:

• Dark
• Light
• ExtraLihgt

Note the following points:

1. Do not set alpha for visualView <1
2. You can set Mask for visualView to customize the blurred area.

Add Vibrancy

The principle of adding Vibrancy is to add another VisualView Based on Blur and add the desired control to the contentView of the VisualView.

   UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];    UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];    [bluredEffectView setFrame:CGRectMake(30,self.imageview.bounds.size.height - 50,self.imageview.bounds.size.width - 60, 40)];    bluredEffectView.layer.cornerRadius = 15;    bluredEffectView.layer.masksToBounds = YES;    [self.imageview addSubview:bluredEffectView];    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];    UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];    [vibrancyEffectView setFrame:self.imageview.bounds];    [bluredEffectView.contentView addSubview:vibrancyEffectView];    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,self.imageview.bounds.size.width - 60, 40)];    label.text = @"Highlight";    label.textAlignment = NSTextAlignmentCenter;    label.textColor = [UIColor blackColor];    [label setTextColor:[UIColor blackColor]];    [vibrancyEffectView.contentView addSubview:label];

Effect

Briefly introduce some design principles of the Demo I wrote.

The Model is saved by two arrays.

-(NSArray *)blurEffectArray{    return @[[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark],             [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight],             [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight],             ];}-(NSArray *)titleArray{    return @[@"Dark",@"Light",@"ExtraLight"];}

The current selection effect is obtained/set by CurrentIndex, and the Model and View are synchronized in the set function of CurrentIndex.

-(void)setCurrentIndex:(NSInteger)currentIndex{    if (self.visualview != nil) {        [self.visualview removeFromSuperview];    }    self.visualview = [[UIVisualEffectView alloc] initWithEffect:[[self blurEffectArray] objectAtIndex:currentIndex]];    self.visualview.frame = CGRectInset(self.imageview.bounds, 20, 20);    self.visualview.layer.cornerRadius = 15;    self.visualview.layer.masksToBounds = YES;    self.navigationItem.title = [[self titleArray] objectAtIndex:currentIndex];    [self.imageview addSubview:self.visualview];    _currentIndex = currentIndex;}

Gesture touch, just change CurrentIndex

- (IBAction)swipt:(UISwipeGestureRecognizer *)sender {    self.currentIndex = (self.currentIndex + 1)%[self blurEffectArray].count;}

During initialization, specify the initial Index

- (void)viewDidLoad {    [super viewDidLoad];    self.imageview.userInteractionEnabled = YES;    self.currentIndex = 0;    // Do any additional setup after loading the view, typically from a nib.}