Working with UIVisualEffectView. #BlurView #Coding

OUR AIM :

Lets Get started, here’s some information on BlurView and UIVisualEffectView that might come in handy !

iOS 8 lets you blur your UI with UIVisualEffectView and a UIVisualEffect of your choice. You can choose amongst various blurring and vibrancy effects as shown in the screenshot above. The API is particular about how you compose the views and which colors and image rendering modes you pick; otherwise it may not display the effect you expect. This example shows you how to use UIVisualEffectView with UIBlurEffect and UIVibrancyEffect.

Blurring

There are three types of blurring: extra light, light, and dark. You specify one of those three types when creating a UIBlurEffect, which you then use to create a UIVisualEffectView. UIVisualEffectView blurs the views underneath it. It does not blur subviews of its contentView. Note that you should add subviews to the UIVisualEffectView’s contentView rather than itself.

Vibrancy

The vibrancy effect lets the content underneath a blurred view show through more vibrantly. It looks pretty but can make text and icons harder to read so use it judiciously. You specify a UIBlurEffect when creating a UIVibrancyEffect. The UIBlurEffect should be the one you used to create the blurred UIVisualEffectView. You then use the UIVibrancyEffect to create another UIVisualEffectView that you add to the blurred UIVisualEffectView’s contentView.

To render vibrant text, create a UILabel and add it to the vibrancy UIVisualEffectView’s contentView. The color of the UILabel does not affect its appearance.

For vibrant images, create a UIImage that is treated as a template mask with UIImageRenderingMode.AlwaysTemplate. One side effect is that the colors in your image are ignored. However, this lets you easily use your image in a vibrancy UIVisualEffectView. As with text, you add the UIImage to the vibrancy UIVisualEffectView’s contentView.

Lets start with some coding !

Create a new project

Open Xcode 6, create a new “Single Page Application” and select Swift as the programming language.

Open ViewController.swift

Well if you haven’t already gone through my previous blog on ViewDidLoad Vs ViewWillAppear, then I would recommend you go through it once ! Trust me, its helpful !

https://ios8programminginswift.wordpress.com/2014/08/16/simple-stuff-viewdidload-vs-viewwillappear/

Lets start editing  viewDidLoad Method.

1. Adding a background image

 

Download the Image and add it to Images.xcassests under Project Navigator and rename the image as “flash”

Goto Main.StoryBoard

Click on the File Inspector on the right and Disable Auto Layout.

 

Select ImageView from the object Library on the bottom right corner and drag and drop it on the view controller.

 

Lets add the Image ! Its damn simple.

Click on the imageView under ViewControllerScene and click on the attributes inspector on the right and under image, type “flash”.

When ur done with that, ur main.StoryBoard would look something like this.

 2. Create BlurEffects and UIVisualEffectViews

lets create 3 different blurEffects i.e ExtraLight, Light & Dark and 3 Different UIVisualEffectViews for 3 different blurEffects.

UIVisualEffectView :

A UIVisualEffectView object provides a you with a way to easily implement some complex visual effects. Depending on the desired effect, the effect may affect content layered behind the view or content added to the visual effect view’s contentView. 

Continue in ViewDidLoad..

 override func viewDidLoad() {
...
 let darkBlur = UIBlurEffect(style: .Dark)
 let darkBlurView = UIVisualEffectView(effect: darkBlur)
 darkBlurView.userInteractionEnabled = false
 self.view.addSubview(darkBlurView)

 let lightBlur = UIBlurEffect(style: .Light)
 let lightBlurView = UIVisualEffectView(effect: lightBlur)
 lightBlurView.userInteractionEnabled = false
 self.view.addSubview(lightBlurView)

 let extraLightBlur = UIBlurEffect(style: .ExtraLight)
 let extraLightBlurView = UIVisualEffectView(effect: extraLightBlur)
 extraLightBlurView.userInteractionEnabled = false
 self.view.addSubview(extraLightBlurView)
}

Some Extra Information !

func addSubview(view: UIView)

Adds a view to the end of the receiver’s list of subviews. This method establishes a strong reference to view and sets its next responder to the receiver, which is its new superview.

3. Splitting the View

lets split the view into four equal part. The code below is pretty much self explanatory. Give it a try !

PS: Continue writing the code in ViewDidLoad Method.

 override func viewDidLoad() {
...
let blurAreaAmount = self.view.bounds.height / 4
var remainder: CGRect
(darkBlurView.frame, remainder) = self.view.bounds.rectsByDividing(blurAreaAmount, fromEdge: CGRectEdge.MaxYEdge)

(lightBlurView.frame, remainder) = remainder.rectsByDividing(blurAreaAmount, fromEdge: CGRectEdge.MaxYEdge)

(extraLightBlurView.frame, remainder) = remainder.rectsByDividing(blurAreaAmount, fromEdge:CGRectEdge.MaxYEdge)
 
}

What is MaxYEdge ?

The maximum value for the y-coordinate of the rectangle. In OS X with the default coordinate system this is the top edge of the rectangle. In iOS with the default coordinate system this is the bottom edge of the rectangle.

4. UIVibrancyEffect

let extraLightVibrancyView = vibrancyEffectView(forBlurEffectView: extraLightBlurView)
 extraLightBlurView.contentView.addSubview(extraLightVibrancyView)

let lightVibrancyView = vibrancyEffectView(forBlurEffectView: lightBlurView)
lightBlurView.contentView.addSubview(lightVibrancyView)

let darkVibrancyView = vibrancyEffectView(forBlurEffectView: darkBlurView)
darkBlurView.contentView.addSubview(darkVibrancyView)

CREATE A FUNC AS BELOW.

//Function to create a UIVisualEffect & UIVisualEffectView based on the 
blurEffect provided as an argument.

func vibrancyEffectView(forBlurEffectView blurEffectView:UIVisualEffectView)-> UIVisualEffectView {

let vibrancy = UIVibrancyEffect(forBlurEffect: blurEffectView.effect as UIBlurEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancy)
vibrancyView.userInteractionEnabled = false

//Setting up the frame for UIVisualEffectView
vibrancyView.frame = blurEffectView.bounds
vibrancyView.autoresizingMask = .FlexibleWidth | .FlexibleHeight
return vibrancyView

 }

 5. Adding Labels

Lets add some Labels to the UIVisualEffectView

 override func viewDidLoad() {
...

let extraLightTitleLabel = titleLabel(text: "Extra Light Blur")
 extraLightVibrancyView.contentView.addSubview(extraLightTitleLabel)

let lightTitleLabel = titleLabel(text: "Light Blur")
lightVibrancyView.contentView.addSubview(lightTitleLabel)

let darkTitleLabel = titleLabel(text: "Dark Blur")
darkVibrancyView.contentView.addSubview(darkTitleLabel)

If you have notice,

titleLabel(text: “Dark Blur”) is a function call !

So, lets add a function below ViewDidLoad Method

//Functions creates a label and sets the label to a specified location.

 func titleLabel(#text: String) -> UILabel {
 let label = UILabel()
 label.text = text
 label.sizeToFit()
 label.frame.origin = CGPoint(x: 12, y: 12)
 return label
 }

So if you haven’t missed any step then your ViewController.swift should look something like this

import UIKit

class ViewController: UIViewController {

 override func viewDidLoad() {
 super.viewDidLoad()
 let darkBlur = UIBlurEffect(style: .Dark)
 let darkBlurView = UIVisualEffectView(effect: darkBlur)
 darkBlurView.userInteractionEnabled = false
 self.view.addSubview(darkBlurView)

 let lightBlur = UIBlurEffect(style: .Light)
 let lightBlurView = UIVisualEffectView(effect: lightBlur)
 lightBlurView.userInteractionEnabled = false
 self.view.addSubview(lightBlurView)

 let extraLightBlur = UIBlurEffect(style: .ExtraLight)
 let extraLightBlurView = UIVisualEffectView(effect: extraLightBlur)
 extraLightBlurView.userInteractionEnabled = false
 self.view.addSubview(extraLightBlurView)

 let blurAreaAmount = self.view.bounds.height / 4
 var remainder: CGRect

 (darkBlurView.frame, remainder) = self.view.bounds.rectsByDividing(blurAreaAmount, fromEdge: CGRectEdge.MaxYEdge)
 (lightBlurView.frame, remainder) = remainder.rectsByDividing(blurAreaAmount, fromEdge: CGRectEdge.MaxYEdge)
 (extraLightBlurView.frame, remainder) = remainder.rectsByDividing(blurAreaAmount, fromEdge:CGRectEdge.MaxYEdge)

 let extraLightVibrancyView = vibrancyEffectView(forBlurEffectView: extraLightBlurView)
 extraLightBlurView.contentView.addSubview(extraLightVibrancyView)

 let lightVibrancyView = vibrancyEffectView(forBlurEffectView: lightBlurView)
 lightBlurView.contentView.addSubview(lightVibrancyView)

 let darkVibrancyView = vibrancyEffectView(forBlurEffectView: darkBlurView)
 darkBlurView.contentView.addSubview(darkVibrancyView)

 let extraLightTitleLabel = titleLabel(text: "Extra Light Blur")
 extraLightVibrancyView.contentView.addSubview(extraLightTitleLabel)

 let lightTitleLabel = titleLabel(text: "Light Blur")
 lightVibrancyView.contentView.addSubview(lightTitleLabel)

 let darkTitleLabel = titleLabel(text: "Dark Blur")
 darkVibrancyView.contentView.addSubview(darkTitleLabel)
 }

 func vibrancyEffectView(forBlurEffectView blurEffectView:UIVisualEffectView) -> UIVisualEffectView {
 let vibrancy = UIVibrancyEffect(forBlurEffect: blurEffectView.effect as UIBlurEffect)
 let vibrancyView = UIVisualEffectView(effect: vibrancy)
 vibrancyView.userInteractionEnabled = false
 vibrancyView.frame = blurEffectView.bounds
 vibrancyView.autoresizingMask = .FlexibleWidth | .FlexibleHeight
 return vibrancyView
 }

 func titleLabel(#text: String) -> UILabel {
 let label = UILabel()
 label.text = text
 label.sizeToFit()
 label.frame.origin = CGPoint(x: 12, y: 12)
 return label
 }
}

Build the file and enjoy !!

Feel free to ask questions or point out any mistakes. If you found this useful please take a moment to share this with your friends.

Have a lovely day !!