前言:
之前項目中有用到過Objective-C的的模糊效果,感覺很是不錯,而且iOS8之后官方SDK也直接提供了可以實現毛玻璃效果的三個類:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView。通過這三個類可以很容易的去實現毛玻璃效果。
最近在熟悉Swift,所以今天說的是使用Swift去實現這種效果。
前提:
我們去實現的模糊效果有個前提,就是需要背景有一個色調,這樣才能使毛玻璃有一個明顯的效果,這里我直接在底部添加一個背景圖片吧
我們就在這張背景圖片上去實現模糊效果。
//MARK: ******* 創建背景圖片 *************
func createBackgroundImageView() { self.imageView1 = UIImageView(frame: self.view.bounds) imageView1.layer.borderColor = UIColor.black.cgColor imageView1.layer.borderWidth = 2 imageView1.layer.cornerRadius = 5 imageView1.clipsToBounds = true imageView1.image = UIImage(named: "05") self.view.addSubview(imageView1) }
1、UIBlurEffect類(用作創建一個模糊效果)
SDK中提供的模糊效果有5種,其中兩種是iOS10之后添加的,我們來看一下:
/** public enum UIBlurEffectStyle : Int { case extraLight case light case dark @available(iOS 10.0, *) case regular // Adapts to user interface style @available(iOS 10.0, *) case prominent // Adapts to user interface style } */
我們就直接創建好了,代碼如下:
//創建一個模糊效果
let blurEffect = UIBlurEffect(style: .light)
上面使用的是普通的亮色。
2、UIVibrancyEffect類
UIVibrancyEffect 主要用於放大和調整 UIVisualEffectView 視圖下面的內容的顏色,同時讓 UIVisualEffectView 的 contentView 中的內容看起來更加生動。
//創建並添加vibrancy視圖
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
3、UIVisualEffectView類
UIVisualEffectView:模糊視圖。將前面創建的 UIBlurEffect 類的實例應用到這個模糊視圖上。將 UIVisualEffectView 類的實例(模糊視圖)置於待毛玻璃化的視圖之上即可。在其下方的所有視圖都會有模糊效果。值得一提的是:不要直接添加子視圖去UIVisualEffectView,而是要添加到contentView上。
//創建一個承載模糊效果的視圖
let blurView = UIVisualEffectView(effect: blurEffect)
4、整體的代碼實現
下面我們直接看整體的代碼實現:
這部分分為兩種,效果也是不一樣的:
先看一下效果圖:
4.1 UIBlurEffect和 UIVisualEffectView兩者配合使用
func showBlurEffect() { //創建一個模糊效果
let blurEffect = UIBlurEffect(style: .light) //創建一個承載模糊效果的視圖
let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: 0, y: 64, width: viewWidth+2*space, height: Double(viewHeight)) let label = UILabel(frame: CGRect(x: 10, y: 100, width: viewWidth - 20, height: 100)) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: 30) label.numberOfLines = 0 label.textAlignment = .center label.textColor = UIColor.white blurView.contentView.addSubview(label) self.view.addSubview(blurView) }
4.2 UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView
func showBlurEffectWithUIVibrancyEffect() { //創建一個模糊效果
let blurEffect = UIBlurEffect(style: .light) //創建一個承載模糊效果的視圖
let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: 0, y: Double(viewHeight+64), width: viewWidth+2*space, height: Double(viewHeight)) self.view.addSubview(blurView) //創建並添加vibrancy視圖
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect) let vibrancyView = UIVisualEffectView(effect:vibrancyEffect) vibrancyView.frame = self.view.bounds let label = UILabel(frame: CGRect(x: 10, y: viewY, width: viewWidth - 20, height: 100)) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: 30) label.numberOfLines = 0 label.textAlignment = .center label.textColor = UIColor.white vibrancyView.contentView.addSubview(label) blurView.contentView.addSubview(vibrancyView) self.view.addSubview(blurView) }
圖片的前者是:UIBlurEffect和 UIVisualEffectView兩者配合使用
后者:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView