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.
Related
In my project I want to achieve a blurred background in a UITableView.
So far I already set up the overlay like this:
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.tableView.insertSubview(blurEffectView, at: 0)
Now I got the problem that the blurred overlay is on top of my table cell. See given image. The order should be like this: UITableView (which has a bg-color) - UIVisualEffectView (blurred overlay) - UITableViewCell
How can I put the overlay between the table view and it's cell? Or is there even a better solution to this?
Make your blurred view tableview's background view and it should look correct.
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.tableView.backgroundView = blurEffectView
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 am working on an app where I want to have a UIPageView on top of a blur effect. I know how to do it with storyboard, but since I am adding it on top of another view as a subview, I don't see a way to do it. Can anyone help me with this? The code I used to create the blur effect is like this:
self.view.backgroundColor = UIColor.clear
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(blurEffectView)
actually you can use this method:
self.view.insertSubview(blurView, belowSubview:pageView)
right now page view on top of a blur.
I have been trying to get an effect of having my scrollView appear under the navigationBar slightly blurred as is the case in the apple messages app. I have tried the following methods and none of them has worked:
1:
self.navigationController?.navigationBar.isTranslucent = true
2:
self.navigationController?.navigationBar.barStyle = UIBarStyle.blackTranslucent
3:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
4:
self.navigationController?.navigationBar.backgroundColor = UIColor.clear()
I have read many posts with variations of the above methods and have tried most of them but to no avail. I thought the point of setting isTranslucent = true was to get exactly that effect. Is there something else I should be trying? Basically I just want my navigationBar to be slightly see-through.
UIVisualEffectView is what you are looking for, and well demonstrated here:
let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = bounds
self.navigationController?.navigationBar.addSubview(visualEffectView)
That said, use your method 1 and 2 together should also work:
self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.topItem.title = #"Contacts";
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
Here you can add this code for your navigation bar blur effect this function is perfect for you
func navigationBlurEffect() {
// Add blur view
let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = bounds
visualEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
//here you can choose one
self.navigationController?.navigationBar.addSubview(visualEffectView)
// Or
/*
If you find that after adding blur effect on navigationBar, navigation buttons are not visible then add below line after adding blurView code.
*/
self.navigationController?.navigationBar.sendSubviewToBack(visualEffectView)
// Here you can add visual effects to any UIView control.
// Replace custom view with navigation bar in above code to add effects to custom view.
}
//**This is only for Image Blur code
And this code you can use for Image Blur effect
func getImageBlur(image:UIImageView){
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = (image.bounds)
blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
image.addSubview(blurEffectView)
}
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = (self.navigationController?.navigationBar.bounds)!
self.navigationController?.navigationBar.addSubview(blurEffectView)
I have this camera app im working on and once the picture is taken the view gets blurred including the captured image. I would like the captured image to be on top of the blur effect so It doesnt get blurred and the user could be able to see the picture they took. How would I be able to do that? This is the code I have currently:
if !UIAccessibilityIsReduceTransparencyEnabled() {
self.view.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.view.addSubview(blurEffectView)
}
else {
self.view.backgroundColor = UIColor.blackColor()
}
Any views added to the effect views content view will not be blurred. Any views behind the effect view will be blurred.