使用iOS 8 SDK新增毛玻璃(Blur)效果
蘋果在iOS 7中將介面改為扁平化,並大量使用了毛玻璃效果,下圖所示為控制中心的毛玻璃效果。
但是iOS 7 SDK本身並未向開發者公開提供毛玻璃效果的API,因此開發者只能去自己實現毛玻璃效果或者找第三方類庫解決。而現在,iOS 8 SDK中直接提供了UIBlurEffect類與UIVisualEffectView類,可以實現毛玻璃效果。這兩個類的使用方法非常簡單,步驟是:
1. 建立UIBlurEffect類的例項,並指定某一種毛玻璃效果。
2. 建立UIVisualEffectView類的例項,將步驟1中的UIBlurEffect類的例項應用到UIVisualEffectView類的例項上。
3. 將UIVisualEffectView類的例項置於待毛玻璃化的檢視之上即可。
下面以一個簡單的例子來演示,效果如下圖所示。
首先建立一個新的專案,在專案中隨便新增一個圖片檔案。在Main.storyboard中拖入一個UIImageView,設定其內容為剛加入的圖片。為了實現毛玻璃效果,我們需要在此UIImageView的上方放置一個UIVisualEffectView。在Xcode的Object Library中找到Visual Effect View with Blur。
這裡Visual Effect View with Blur就是一個UIVisualEffectView的例項,注意到UIVisualEffectView繼承自UIView,因此它就是一個檢視,可以直接拖拽到介面中。
所有位於UIVisualEffectView下方的檢視,以及UIVisualEffectView的contentView中的檢視會被毛玻璃化。
值得一提的是,如果位於下方的檢視的內容是動態的,那麼毛玻璃效果也會跟隨動畫發生變化。我們可以給上面的UIImageView新增動畫:
override func viewWillAppear(animated: Bool) { leadingCons.constant = 0 UIView.animateWithDuration(5.0, animations: { () -> Void in self.leadingCons.constant = 200 self.imageView.layoutIfNeeded() }) }
上面的程式碼會讓UIImageView向右移動,執行後可以看到毛玻璃檢視的內容也會跟隨發生變化。
如果需要用程式碼實現毛玻璃效果,則程式碼為:
override func viewDidLoad() {
super.viewDidLoad()
let blurEffect = UIBlurEffect(style: .Light)
let blurView = UIVisualEffectView(effect: blurEffect)
view.addSubview(blurView)
}
其中UIBlurEffect構造方法中需要傳入UIBlurEffectStyle列舉引數:
enum UIBlurEffectStyle : Int {
case ExtraLight
case Light
case Dark
}
專案程式碼:
最後需要注意的是,UIBlurEffect類與UIVisualEffectView類只適用於iOS 8 SDK,因此如果你的app需要在iOS 7系統上執行的話,還需要另想辦法哦。