I've got a view at the top/bottom of my screen that's a blurred view. Ontop of the view I'm wanting to show my buttons unblurred, so I would assume the buttons need to be ontop of the blurred view.
in viewDidLoad I'm running this code :
if !UIAccessibilityIsReduceTransparencyEnabled() {
self.blurOutletTop.backgroundColor = UIColor.clear
self.blueOutletBot.backgroundColor = UIColor.clear
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
let blurEffectView2 = UIVisualEffectView(effect: blurEffect)
//always fill the view
blurEffectView.frame = blurOutletTop.frame //self.view.bounds
blurEffectView2.frame = blueOutletBot.frame
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(blurEffectView)
self.view.addSubview(blurEffectView2)
logoOutlet.bringSubview(toFront: self.view) //This is where my issue is
} else {
blurOutletTop.backgroundColor = UIColor.black
blueOutletBot.backgroundColor = UIColor.black
}
So this makes the two views I have top/bottom blurry. Where I'm running into an issue is where I'm trying to have my logoOutlet infront of the blurred view so it doesn't get blurred. I've tried brining it to the front of the blurrEffectView, the blurOutletTop view, and self.view and everything has the same effect.
I wouldn't assume a button that is not behind a blur view would get effected by the blur. How do I get this to work? I'm also unable to even press the buttons that are now under the view so bringing it to the front doesn't seem to be working. (logoOutlet is an outlet for a button).
edit: I also have tried setting the outlet's zPosition to 9999, no change.
Related
I have the table view with headers. Headers have only custom text and white background. Headers are pinned on top when scrolling and I want to know, is there any way how to make the background of headers translucent same as navigation bar is? With some blur effect?
Thanks for any advice!
Change the backgroundColor to .clear, add a UIVisualEffectView below the label and set the constraints to the edges. Not sure if it will mimic the behaviour of navbar by default so you would have to play around a little with the UIBlurEffect options to get the desired effect.
let blurEffectStyle = UIBlurEffectStyle.extraLight
let blurEffect = UIBlurEffect(style: blurEffectStyle)
let visualEffectView = UIVisualEffectView(effect: blurEffect)
Then add to view and set the constraints
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.view.backgroundColor = UIColor.clear
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.backgroundColor = UIColor.clear
I can't figure out why this happens, but when I add a imageview behind my tableview and navigation bar, my navigation bar acts strange:
The navigation bar gets stuck in a static position and dosen´t move while scrolling as it did before
The activity indicator from pull to refresh gets placed between the navigation bar button and the top of the tableview. Instead of staying on top of the navigation bars title as before.
Left picture is the bug without the imageview in the background.
Right picture show how it works perfectly without the imageview.
My code to get the clear navigation bar (Though I don't think this introduces any problem as it works fine when the imageview in the background isn't there):
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true self.navigationController?.view.backgroundColor = UIColor.clear
Found a solution.
Set the image as the backgroundview of the tableview and set the tableview to be fullscreen.
let image = UIImage(named: "myphoto")
let iv = UIImageView(image: image)
iv.contentMode = .scaleAspectFill
iv.layer.frame = CGRect(x: 0, y: 0, width: (self.tableView.superview?.frame.size.width)!, height: (self.tableView.superview?.frame.size.height)!)
let tableViewBackgroundView = UIView()
tableViewBackgroundView.addSubview(iv)
self.tableView.backgroundView = tableViewBackgroundView
Is it possible to dim the super viewController but not any of its childViewControllers. For example, dim my map view but not the tableviewController that is its childViewController.
PopoverViewControllers wont work because I'm on iPhone only. What is my best solution to this problem?
You can add a view(e.g. blackMaskView) above mapView with:
self.mapview.insertSubview(blackMaskView, aboveSubview: self.mapview)
and then add a blur effect to blackMaskView as follows:
func createBlurView() {
// Blur Background
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
self.blackMaskView.addSubview(blurEffectView)
self.view.layoutIfNeeded()
}
Use blackMaskView.isHidden = true, to finally hide the blurred view.
Please mark the answer correct if you find it useful.
I have a UITabBar and I want to make it blurred. I wrote the following code:
import UIKit
class TabBarController:UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let blur = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = self.view.bounds
blurView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.view.layer.insertSublayer(blurView, atIndex: 0)
}
}
but somehow the last line throws error:
Cannot convert value of type 'UIVisualEffectView' to expected argument
type 'CALayer'
how can I fix that?
I changed the last line to:
self.tabBar.addSubview(blurView)
but now the whole tabbar is blurred (even with icons and they are not visible). When I changed this line to:
self.tabBar.sendSubviewToBack(blurView)
then the tabbar is visible, but not blurred. I want to achieve effect from accepted answer from here Black background on transparent UITabBar but here it is uitabbar and I'm using uitabbarcontroller... Can you help me with applying blur in my case?
You just add the blur view as a subview:
self.view.addSubview(blurView)
Since you just want to blue the tab bar and this class is a tab bar controller, you can do:
self.tabBar.addSubview(blueView)
You also need to change the frame:
blurView.frame = self.tabBar.bounds
why don't you just use the barTintColor property on your TabBarController?
self.tabBar.translucent = true
self.tabBar.barTintColor = UIColor.blackColor()
You don't even need to subclass UITabBarController. You can call this on any UIViewController.
self.tabBarController?.tabBar.translucent = true
self.tabBarController?.tabBar.barTintColor = UIColor.blackColor()
If I understood correctly from the following comment that you posted, you want to change the UITabBar to be black in colour but still blurred.
And yes, I noticed that the UITabBarController is blurred by default, but I would like to make it blurred with specific style (.Dark).
Doing this since iOS 7 has actually become quite easy. Simply change the barStyle of your UITabBar to .black. Put the following code in your UIViewController's viewDidLoad method (note that UITabBar is translucent by default, so you don't need to specify that again).
tabBarController?.tabBar.barStyle = .black
If you want to set it back to the regular, white barStyle, change it back to .default.
tabBarController?.tabBar.barStyle = .default
You may even do this from within Interface Builder by selecting the Tab Bar in your UITabBarController's hierarchy and changing its Style to Black.
I have a solution, all you need is configure your UITabBar as following:
// next code will make tabBar fully transparent
tabBar.isTranslucent = true
tabBar.backgroundImage = UIImage()
tabBar.shadowImage = UIImage() // add this if you want remove tabBar separator
tabBar.barTintColor = .clear
tabBar.backgroundColor = .black // here is your tabBar color
tabBar.layer.backgroundColor = UIColor.clear.cgColor
If you want to add blur, do this:
let blurEffect = UIBlurEffect(style: .dark) // here you can change blur style
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = tabBar.bounds
blurView.autoresizingMask = .flexibleWidth
tabBar.insertSubview(blurView, at: 0)
As a result:
Attach bottom constraint to the bottom of the view instead of Safe Area
It just might not be a problem with your TabBar but with tableView constraints.
Tab bar is blurred by default.
I am having a View1 which has a UIImageView where I am loading a UIImage. When I am pressing a button in the View1 , I am adding a subview called View2 which has 2 buttons.
And I am making my second view as transparency using the alpha value like below.
[_view2 setBackgroundColor:[UIColor clearColor]];
_imageView.alpha = 0.4;
That is ok. But What I want to do is, When I am adding the second subview, the first view is visible. Decreasing the alpha value will result in brightness of it. But I want to display the imageview in the first view little blur. I need to set the alpha value as well as make the background image view blur. Can Anyone tell me how to do it ?
Give a look at this class that promises to implement blurring for images under iOS: https://github.com/tomsoft1/StackBluriOS.
Swift version
public extension UIImageView {
public func blur(withStyle style: UIBlurEffectStyle = .light) {
let blurEffect = UIBlurEffect(style: style)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
addSubview(blurEffectView)
clipsToBounds = true
}
}