注意:本篇所講的內(nèi)容是基于iOS8以上系統(tǒng)的。
iOS7開(kāi)始的毛玻璃效果到現(xiàn)在已經(jīng)3年了,但是如此酷炫的效果第喳,你們除了系統(tǒng)導(dǎo)航欄和tab欄以外,還會(huì)在其它地方添加使用嗎踱稍?
其實(shí)很多地方加入這個(gè)效果都會(huì)讓你的app錦上添花曲饱,例如tableView的section header。在- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
這個(gè)代理方法中返回UIVisualEffectView
就可以實(shí)現(xiàn)這個(gè)效果珠月,舉個(gè)栗子:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIVisualEffectView *view = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
view.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 40);
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 0, CGRectGetWidth(self.view.frame) - 10, 45)];
label.text = @"哈哈啊哈哈哈哈";
[view.contentView addSubview:label];
return view;
}
還有一個(gè)典型的應(yīng)用是全屏的遮罩扩淀。例如需要彈出提示窗的或是菜單的時(shí)候,可以將原來(lái)半透明的黑色背景換成毛玻璃效果啤挎,像這樣:
UIVisualEffectView
的使用也極其簡(jiǎn)單驻谆,初始化的時(shí)候通過(guò)initWithEffect:這個(gè)方法為他指定模糊效果即可。三種Blur效果大家可以自己嘗試對(duì)比。
觀察細(xì)致的小伙伴可能注意到上面那張圖片中的文字也是有特殊效果的胜臊,可以透出背景的顏色勺卢,這是如何做到的呢?這實(shí)際上是將承載文字的Label放在了一個(gè)UIVisualEffectView
中象对,而這個(gè)UIVisualEffectView
的effect就是UIVibrancyEffect
黑忱。拿上面圖片的效果舉例,具體實(shí)現(xiàn)是這樣:
1勒魔、創(chuàng)建一個(gè)背景遮罩View
UIVisualEffectView *vfv = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
2甫煞、再創(chuàng)建另一個(gè)UIVisualEffectView
用于承載Label實(shí)現(xiàn)文字的穿透效果
UIVisualEffectView *tev = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)vfv.effect]];
3、創(chuàng)建一個(gè)label冠绢,將label添加到tev上面危虱,將tev添加到vfv上面
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(40, 100, 200, 200)];
lbl.text = @"觀察細(xì)致的小伙伴可能注意到上面那張圖片中的文字也是有特殊效果的,可以透出背景的顏色唐全,這是如何做到的呢?";
lbl.numberOfLines = 0;
[tev.contentView addSubview:lbl];
[vfv.contentView addSubview:tev];
順利的話你應(yīng)該已經(jīng)看到酷炫的效果了