1. 程式人生 > >iOS自帶實現高斯模糊效果

iOS自帶實現高斯模糊效果

什麼叫高斯模糊效果,通俗地說,就是毛玻璃效果,從iOS 7以來,就頻繁地被設計使用,如果用得好,效果會顯得非常的好。我們來看一個例子:

圖中下面一小部分就是高斯模糊效果。要實現也很簡單,iOS自身就支援這種效果。

iOS 7 UIToolbar

iOS 7開始,支援用UIToolbar來實現這種效果,程式碼很簡單:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds
.size.height)]; imageView.image = [UIImage imageNamed:@"neo.jpeg"]; [self.view addSubview:imageView]; /* UIBarStyle列舉: UIBarStyleDefault UIBarStyleBlack UIBarStyleBlackOpaque UIBarStyleBlackTranslucent */ UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0
, imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3)]; toolbar.barStyle = UIBarStyleBlackTranslucent; [self.view addSubview:toolbar];

這個style實現出來就是這個效果:

事實上除了UIBarStyleDefault風格是白亮的模糊不太好看外,其他三種風格我都看不出有什麼差別。

我們可以看一下UI層級:

事實上就是在原本的圖片檢視上加了一層UIVisualEffectView,等於是覆蓋了一塊毛玻璃,很好理解,也很好用。

iOS 8 UIBlurEffect

從iOS 8開始,蘋果開始支援一個新的實現方式——UIBlurEffect,蘋果也推薦這種方式,當然如果你的應用要支援iOS 7,那還是用上一種。

這種方式的程式碼一樣很簡單,在程式碼中就直接用到了我們上面層級中看到的UIVisualEffectView,程式碼如下:

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    imageView.image = [UIImage imageNamed:@"neo.jpeg"];
    [self.view addSubview:imageView];

    /* UIBlurEffectStyle列舉
     UIBlurEffectStyleRegular
     UIBlurEffectStyleLight
     UIBlurEffectStyleDark
     UIBlurEffectStyleProminent
     UIBlurEffectStyleExtraLight
    */
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = CGRectMake(0, imageView.frame.size.height * 0.7, imageView.frame.size.width, imageView.frame.size.height * 0.3);
    [self.view addSubview:effectView];

確實這種方式的效果更加自然:

再看一下UI層級:

對比一下兩種實現方式,其實是不一樣的,感興趣的可以研究一下原理。

我們把風格換成UIBlurEffectStyleDark後是這樣的:

和UIToolbar的實現效果相比的話,要說沒區別也有一點區別,總之就是覺得好看一些,所以還是推薦用這種方式。

不得不說毛玻璃(高斯模糊)效果配上好圖片後的效果真的很贊,我可以玩很久,其實實現方式真的很簡單,大家可以多多應用到自己的應用中去,相信一定會加分不少!