A UIViewController I'm presenting has a UIImageView, namely backgroundImageView, to be the VC's background and set to fill the whole screen.
I want the UIImageView to be presented with a dark blur effect provided by iOS but the following sizing issue temporarily occurs(on device but not on the simulator) when I first present the view controller:
Inside viewDidLoad():
// `locationImage` is passed during the segue
backgroundImageView.image = locationImage
backgroundImageView.contentMode = .scaleAspectFill
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = backgroundImageView.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
backgroundImageView.addSubview(blurEffectView)
The above view controller's modalPresentationStyle is set to be as currentContext.
If I temporarily remove the blur effect, I see that the background image I gave the view controller got properly set. However once the blur effect is applied, sizing issues occur momentarily.
What exactly is causing this?
Try to set the frame of blurEffectView inside viewWillLayoutSubviews() or in viewDidLayoutSuviews()
here you can find more information about viewcontroller's lifecycle
Related
I have created a UITableViewController and each cell has a blur effect applied to them using UIVisualEffectView. I also have a blurred background that is created in the UITabBarViewController that the table view is linked to. The extra blur effect applied to each cell adds a nice touch to the UI I am designing, and it works for the most part.
The Issue
Everything works fine until I delete an item from the table. Doing so causes the whole table view to appear damaged. Everything returns to normal after the delete animation has been completed.
I have tried applying the UIVisualEffectView via code and the storyboard, and the problem is consistent either way. When using code, I apply the effect here like this:
// 'cell' is the cell being configured in tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = cell.bounds
cell.insertSubview(visualEffectView, atIndex: 0)
Note: After doing more testing, I have narrowed down the problem. When setting a cell to a clear color via the storyboard or in code using cell.backgroundColor = UIColor.clearColor(), the damaged animation appears. In fact, it does this for any color that has some, or complete transparency. When there is no transparency, the issue stops, but then the background from the UITabBarController is no longer visible.
My Question
How can I fix the damaged animation while keeping a similar/same look?
And if you want to see how I added the blur to the UITableViewController, here it is:
class MainTabBarViewController: UITabBarController, UITabBarControllerDelegate {
var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
self.delegate = self
imageView = UIImageView(image: UIImage(named: "Sunset"))
imageView.frame = self.view.bounds
imageView.contentMode = .ScaleAspectFill
view.insertSubview(imageView, atIndex: 0)
let blurEffect = UIBlurEffect(style: .Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = imageView.bounds
view.insertSubview(blurEffectView, aboveSubview: imageView)
}
//...
And here is what damaged animation looks like on the simulator (same thing happens on a physical device too):
I am setting a background image to a parse login view controller. But also want to add this background How can I achieve this?
Here is the code I am using:
backgroundImage.image = UIImage(named: "Melbourne")
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
view.addSubview(blurEffectView)
The problem is that this blurs everything including all the buttons and username and password fields. What can I do?
It is because you are adding your blur view over all the subviews of the view controllers.
try to insert at specific index in view hierarchy.
I have no proper idea of the view hierarchy of your viewController.
Do it using try&Error method like below.
try below code.
view.insertSubview(blurEffectView, atIndex: 1);
if not works try by increasing the index value 2 and so on.
view.insertSubview(blurEffectView, atIndex: 2);// if not change it to 3
It will surely works with specific value.
I have a little problem: I'd like to set an image to background in a TableViewController. I tried this:
class SquadreController: UITableViewController {
override func viewDidLoad()
{
super.viewDidLoad()
var sfondo = UIImage(named: "sfondo")
self.view.backgroundColor = UIColor(patternImage: sfondo!)
}
Then I give the blur effect to the view, like this:
let blur = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = self.view.bounds
view.addSubview(blurView)
But there is a big problem. I'm working in a TableView and the TableView, TableCell, NavigationItem, etc. have all disappeared after I apply the blur. Can someone help me?
Thanks a lot!
Try using view.insertSubView(blurView, atIndex: 0) instead of view.addSubview(blurView) as! UIImageView
This question is an older question and Epic Defeater's response does in a way work, there is a much better way to accomplish this. Instead of adding blurView, you need to override the background view. Specifically you need to override tableView.backgroundView.
let blur = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = self.view.bounds
tableView.backgroundView = blurView
This will only work if you have set the background color to clear.
We can also add a subview below or above any other views using insertSubview
//Inserting below your subView
self.view.insertSubview(subview1_name, belowSubview: subview2_name)
//Inserting above your subView
self.view.insertSubview(subview1_name, aboveSubview: subview2_name)
/// You can use any of your view, instead of self.view
I have an UIView for login purposes centered in the middle of the screen. It is constrained to a 0.25 height of the surrounding view (covering the whole window)
I noticed, that if I create an UIVisualEffectView (via the method blurBackgroundForView(_)as background for the UIView, that it is too small (check the code how I create the UIVisualEffectView) although it has the same frame.
You can see the effect, when you change the backgroundColor to .greenColor.
The View is higher than the Blureffect.
ViewController
override func viewWillAppear(animated: Bool) {
AnimationHelper.blurBackgroundForView(self.view)
view.backgroundColor = .greenColor()
}
blurBackgroundForView(_)
static func blurBackgroundForView(view: UIView!){
view.backgroundColor = .clearColor()
let blurEffect = UIBlurEffect(style: .Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
view.insertSubview(blurEffectView, atIndex: 0)
}
Frames are not guaranteed to be set by auto layout in viewWillAppear.
Try setting the blur view's frame in viewDidLayoutSubviews instead. Alternatively, you can directly set the autoresizing mask on your blur view so that it resizes when its superview resizes:
blurView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
You should also call the super method in viewWillAppear.
I'm using UIBlurEffect from UIVisualEffectView to produce the look introduced in iOS 7. To do so I programmatically add anything I want portrayed on top of the blur to the contentView, as described in the UIBlurEffect Class Reference:
A UIBlurEffect object applies a blurring effect to the content layered
behind a UIVisualEffectView. Views added to the contentView of a
UIVisualEffectView are not affected by the blur effect.
But now I need to add a UIScrollView into the mix, and the fact that I had to use the contentView has left me completely confused. I'm not very familiar with the UIScrollView, but the iOS 8 Swift Programming Cookbook gives this example:
I'm not in need of displaying an imageView, but instead a separate view with many views inside of it in the hierarchy. Where exactly do I add the scrollView? Do I set scrollView as a subview of contentView? Or the other way around, the contentView as a subview of scrollView? Here's my current code:
class InfoVC: UIViewController {
#IBOutlet weak var contentView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// blur
let blur = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))
blur.frame = view.frame
view.addSubview(blur)
blur.contentView.addSubview(self.contentView)
}
You want to scroll something on top of the blur effect, correct?
In that case you need to add the scroll view to the content view of the blur view.
Assuming the contentView is the view you want to scroll it should work like this:
let blur = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.light))
blur.frame = view.bounds
view.addSubview(blur)
UIScrollView scrollView = UIScrollView(frame:blur.bounds)
blur.contentView.addSubview(scrollView)
scrollView.addSubview(contentView)
scrollView.contentSize = contentView.frame.size // or whatever other size you like