I am trying to make UITabBar look blur.
I am trying to make something like this in this image
But my view now looks like this
This is my view for tabbar
I tried this code in UITabbarController -
Code:
class TabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
configureTabbar()
}
func configureTabbar(){
let blurEffect = UIBlurEffect(style: .dark)
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyView = UIVisualEffectView()
vibrancyView.frame = tabBar.bounds
vibrancyView.autoresizingMask = .flexibleWidth
vibrancyView.effect = vibrancyEffect
tabBar.insertSubview(vibrancyView, at: 0)
tabBar.isTranslucent = true
tabBar.backgroundImage = UIImage()
tabBar.backgroundColor = .clear
tabBar.barStyle = UIBarStyle.black
tabBar.barTintColor = UIColor.clear
}
System bars such as UINavigationBar, UITabBar & UIToolbar are translucent by default and you don't need to add anything extra to get that effect.
You just need to make sure that your view extends it's content under system bars. You can go to storyboard and make sure the Extend Edges - Under Bottom Bars is checked for your UIViewController that you plan to see this effect on.
Related
I have some problems with my tabbed view when I set isTranslucent to false in combination with a NavigationView.
Does anyone know how to fix this? The problem is shown in the attached image.
I need translucent set to false otherwise I can't get the dark color.
You can set backgroundColor. Don't set isTranslucent to false or it will create these artefacts you mentioned.
UITabBar.appearance().backgroundColor = .black
UINavigationBar.appearance().backgroundColor = .black
It becomes much darker. It isn't completely opaque though.
Edit: Just watched Modernizing Your UI for iOS 13 This is the way to do it :
The TabView and NavigationView are actually UIHostedController for the legacy UITabBarController and UINavigationController:
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor .white]
Then set the appearance on the various type of appearance.
tabBar.standardAppearance = appearance
2nd Edit:
extension UINavigationController {
override open func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance
}
}
extension UITabBarController {
override open func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
tabBar.standardAppearance = appearance
}
}
There should be a cleaner way to get to both tabBar and navBar.
Reference: https://developer.apple.com/videos/play/wwdc2019/224/
I was using UIKit with SwiftUI. My Tab bar was creating in storyboard but the view for which I was getting extra bottom space was a swiftui view as you mentioned. I tried all above solution but Nothing worked for me.
I am using Xcode 12.4 for development. My solution is to mark Translucent to true in storyboard and Bottom extra gray bar was gone.
Just customize it in an extension like this:
extension UITabBarController {
override open func viewDidLoad() {
super.viewDidLoad()
let appearance = UITabBarAppearance()
appearance.backgroundColor = .black
tabBar.standardAppearance = appearance
}
}
Pay attention that the overridden function must be viewDidLoad(). At least it doesn't work for me when it is a viewDidAppear(:) function.
It's easier than all that, just delete the next line:
UITabBar.appearance().isTranslucent = false
When applying transparent image in the navigation tab bar. It's turning white instead of being transparent..
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.tintColor = UIColor.white
Ensure that something is under the navigation bar so that it does not just become transparent showing the white background. You will need to drag uiviews under it and then add layout constraints. Otherwise, make sure you check that you have not changed the color of the navigation bar elsewhere.
Use this extension to make navigation bar transperant.
extension UINavigationController {
func transparant() {
self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.view.backgroundColor = UIColor.clear
}
}
if you are using Navigation Controller try this:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
title = "Some Title"
if you are using UINavigationBar try this:
#IBOutlet var navBarOutlet: UINavigationBar!
override func viewDidLoad() {
super.viewDidLoad()
// navigatin bar transparent
navBarOutlet.setBackgroundImage(UIImage(),for:.default)
navBarOutlet.shadowImage=UIImage()
navBarOutlet.topItem?.title = "Some Title"
}
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 have UITabBarController with view
So on every TabBar I have ViewController. But on my center UITabBarItem I need to call something like modal UIViewController. And It should be like this
My UITabBarController class look like
class PlanetTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
self.tabBar.tintColor = kTintColor
var items = self.tabBar.items as! [UITabBarItem]
let centredTabBar:UITabBarItem = items[2]
self.tabBar.layer.borderWidth = 0.50
centredTabBar.image = ktabCentredBarImage
self.tabBar.layer.borderColor = UIColor.clearColor().CGColor
self.tabBar.layer.borderWidth = 0
self.tabBar.shadowImage = UIImage()
// self.tabBar.backgroundImage = ktabBarImage
self.tabBar.backgroundImage?.imageWithAlignmentRectInsets
print( UIDevice.currentDevice().modelName)
if( UIDevice.currentDevice().modelName != "iPhone 6" && UIDevice.currentDevice().modelName != "iPhone 6 Plus") {
self.tabBar.backgroundImage = ktabBarImage
}
if( UIDevice.currentDevice().modelName == "iPad 2" ) {
self.tabBar.backgroundImage = ktabBarImage
}
if let font = UIFont(name: "Avenir-Black", size: 10) {
let appearance = UITabBarItem.appearance()
let attributes = [NSFontAttributeName:font]
appearance.setTitleTextAttributes(attributes, forState: UIControlState.Normal)
}
}
}
I really have no idea how to override standart calling of UIViewController and call modal like this =) Please give me advice where I need to search
You can either place a UIButton in the same area as the UITabBarItem and fire an action or you can simply fire an action when the selectedSegmentIndex changes("value changed" in IB) for the UITabBar after creating a center UITabBarItem. The design choice is yours. The first step is to understand the objects you're working with. It would probably be easier to just add a button, center aligned, over top of the standard UITabBar at the bottom so you don't deal with a custom UITabBarController to handle that non-uniform image above the tab bar.
Or just create your own TabBar down there. It's very simply to setup a few UIButtons or UIViews next to one another that don't have a static height such as a UITabBarController which would allow for that center object.
UITabBarController
UIViewController
Presenting a ViewController