I'm trying to add a blur effect to my view. I created the blur effect like so
let blurLabel: UIVisualEffectView = {
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
return blurEffectView
}()
Then I add it to the subview like so, and set up the constraints with it as well
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: .subtitle, reuseIdentifier: reuseIdentifier)
let view = tableViewCell
addSubview(view)
view.addSubview(blurLabel)
blurLabel.leftAnchor.constraint(equalTo: self.leftAnchor,constant:0).isActive = true
//blurLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 178).isActive = true
blurLabel.widthAnchor.constraint(equalToConstant: 375).isActive = true
blurLabel.heightAnchor.constraint(equalToConstant: 180).isActive = true
But when I run the application it doesn't appear at all
Edit: As suggested by #HAS & #Fogmeister, you can also use translatesAutoResizingMaskIntoConstraints = false as it is better solution to use Auto Layout without specifying explicit frames.
You will have to assign frame to UIVisualEffectView like this:
let blurLabel: UIVisualEffectView = {
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = CGRect(x: 0, y: 0, width: 60, height: 40) //give desirable frame
return blurEffectView
}()
If you would like, instead of giving explicit frames you can also provide your blurView's to any of your view or, subviews.
let blurLabel: UIVisualEffectView = {
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = myMainview.bounds //Blur effect's frame
return blurEffectView
}()
override func viewDidLoad() {
super.viewDidLoad()
// Use it somewhere using
self.view.insertSubview(blurEffectView, belowSubview: myAnotherView)
// You may also use any of the subviews too, instead of the self.view
/// self.myView.insertSubview(blurEffectView, belowSubview: myAnotherView)
}
To fix this you just have to stop it automatically creating constraints. Like this...
let blurLabel: UIVisualEffectView = {
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
// this line will stop constraints being added for a zero frame
blurEffectView.translatesAutoResizingMaskIntoConstraints = false
return blurEffectView
}()
Related
I have a UITableViewController (static table) to which I add a background image with (in viewDidLoad):
tableView.backgroundView = UIImageView(image: UIImage(named: "login_bg.jpg"))
How do I add the blurred effect to that background image?
I tried with: (in viewDidLoad)
let blurEffect = UIBlurEffect(style: .light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.tableView.backgroundView = blurEffectView
It works but it does not catch the background image.
You need to add the blur effect view as a subview instead of setting it as the background view.
self.tableView.backgroundView?.addSubview(blurEffectView)
Step 1 :
Set the background image.
tableView.backgroundView = UIImageView(image: UIImage(named: "img"))
Step 2:
Create blur effect view and add it as subview.
let blurEffect = UIBlurEffect(style: .light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.tableView.backgroundView?.addSubview(blurEffectView)
Here is how it looks.
I have this extension, and I was hoping for a blur background, where I can see blur through the view:
import Foundation
import UIKit
extension UIView
{
func addBlurEffect()
{
if !UIAccessibilityIsReduceTransparencyEnabled() {
self.backgroundColor = UIColor.clear
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.addSubview(blurEffectView)
} else {
self.backgroundColor = UIColor.white
}
}
}
Then I use it like this:
let v = UIView(frame: self.view.frame)
v.addBlurEffect()
self.view.addSubview(v)
But I can not see anything under the view?
Add this framework to your project.
Add transparent view over your background and setup blur (view Readme on github)
Preview
i want a blurred background. i have a subview for the main view . and i want the subview to not be affected by blur. What should i do?
Code:
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
vibrancyEffectView.frame = view.bounds
view.addSubview(blurEffectView)
view.addSubview(vibrancyEffectView)
FrameView = UIView()
if let FrameView = FrameView {
FrameView.layer.borderColor = UIColor.white.cgColor
FrameView.layer.borderWidth = 2
FrameView.frame=CGRect(x:30,y:(view.frame.height/2-50),width:view.frame.width-60,height:100)
blurEffectView.contentView.addSubview(FrameView)
}
So i want the view to be blurred and the FrameView to be clear.
This is what my app currently looks like.
I had try a test project , and i add the blur to mainView first , then i add the frameView to mainView , i seems good and the frameView is not blur.
let mainView = UIImageView.init(frame: self.view.bounds);
mainView.image = UIImage.init(named: "a.png");
let blurEffect = UIBlurEffect.init(style: .dark);
let effectView = UIVisualEffectView.init(effect: blurEffect);
effectView.frame = mainView.bounds;
effectView.alpha = 1;
let frameView = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: 200, height: 50));
frameView.image = UIImage.init(named: "b.png");
frameView.center = self.view.center;
//add the blur view first
mainView.addSubview(effectView);
self.view.addSubview(mainView);
self.view.addSubview(frameView);
You have to add the frame upper in you hiearchy, as you see, the BlurEffectView blurs every subview within it, so check that you are adding the subView to the main View of viewController and use func bringSubView to front... :)
I have a UIView and that a create programmatically, then I added as a subView to my viewController.view. However, The view is not affected with the blur.
Here is my code:
let blurryView: UIView = {
let blur = UIView()
blur.backgroundColor = UIColor.yellow
blur.alpha = 0.90
let blurEffect = UIBlurEffect(style: .extraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blur.addSubview(blurEffectView)
blurEffectView.center = blur.center
blurEffectView.frame = blur.bounds
blur.translatesAutoresizingMaskIntoConstraints = false
return blur
}()
func manageBlurView() {
blurryView.widthAnchor.constraint(equalToConstant: 250).isActive = true
blurryView.heightAnchor.constraint(equalToConstant: 250).isActive = true
blurryView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
blurryView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(blurryView)
manageBlurView()
}
The blur effect is added and I doubled checked that using breakpoints and pint statements if blur.subviews == [blurEffectView] {
print("Blur effect added as a subview")
} and it printed.
I have a background image to make sure if it's blurred.
I also tried to add the blur effect in the viewDidLoad(), but nothing happened.
Add both the yellow background view and the blurred view directly as child of your main view :
let backg = UIView(frame: self.view.frame)
backg.backgroundColor = UIColor.yellow
backg.alpha = 0.90
self.view.addSubview(backg)
// the blur effect
let blurEffect = UIBlurEffect(style: .extraLight)
let blurredEffectView = UIVisualEffectView(effect: blurEffect)
blurredEffectView.frame = self.view.frame
self.view.addSubview(blurredEffectView)
You could put the above code in viewDidLoad.
I need to blur screen when alert is shown, so I googled the function, which blurs the screen
it looks like
var effectView: UIVisualEffectView!
func addBlur() {
var effect = UIBlurEffect(style: UIBlurEffectStyle.Light)
effectView = UIVisualEffectView(effect: effect)
effectView.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
view.addSubview(effectView)
}
I want to remove the blur after user dismissed the alert and I come up with the such function
func removeBlur() {
effectView.view.removeFromSuperview()
}
but it doesn't work, says UIVisualEffectView does not have a member named "view"
How to fix it?
func removeBlur() {
effectView.removeFromSuperview()
}
You can also try this way:
func blureffect() {
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)
}