I honestly don't know how to fix this. I currently have a UITabBar and have implemented navigationBar and when I render my app in a simulator or a device there's a wide space on top of the navigation bar. How do I get rid of this unwanted space
class DashboardTabBarView: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .blue
let dashboard = UINavigationController(rootViewController: DashboardView())
dashboard.tabBarItem.image = UIImage(systemName: "house")
dashboard.title = "Home"
tabBar.tintColor = .systemPink
setViewControllers([dashboard], animated: true)
}
}
class DashboardView: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .green
configureNavBar()
}
private func configureNavBar(){
var image = UIImage(named: "Bell")
image = image?.withRenderingMode(.alwaysOriginal)
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
let item = UIBarButtonItem(title: "Sign In", style: .plain, target: self, action: #selector(self.goToSignIn))
let font:UIFont = UIFont(name: String.circularStdBold, size: 14) ?? UIFont()
item.setTitleTextAttributes([NSAttributedString.Key.font: font], for: UIControl.State.normal)
item.tintColor = .red
navigationItem.rightBarButtonItem = item
navigationController?.navigationBar.backgroundColor = UIColor(red: 0.985, green: 0.94, blue: 1, alpha: 1)[Navbar has a white space on top][1]
}
}
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScence = (scene as? UIWindowScene) else { return }
let navigationController = UINavigationController(rootViewController: DashboardTabBarView())
window = UIWindow(frame: windowScence.coordinateSpace.bounds)
window?.windowScene = windowScence
window?.rootViewController = navigationController
window?.makeKeyAndVisible()
}
screenshot taken from my simulator
The issue is that you are putting the tab bar controller in its own nav controller. Never do that. It's fine for each tab's view controller to be in its own nav controller but the tab bar controller itself should never be in a nav controller.
Change:
guard let windowScence = (scene as? UIWindowScene) else { return }
let navigationController = UINavigationController(rootViewController: DashboardTabBarView())
window = UIWindow(frame: windowScence.coordinateSpace.bounds)
window?.windowScene = windowScence
window?.rootViewController = navigationController
to:
guard let windowScence = (scene as? UIWindowScene) else { return }
window = UIWindow(frame: windowScence.coordinateSpace.bounds)
window?.windowScene = windowScence
window?.rootViewController = DashboardTabBarView()
This should eliminate the big gap at the top which was being caused by the nav bar of the window's root view controller.
Related
I need to setUp a NavigationBar color for a single ViewController. What Im currently doing is setting up the nav color on viewDidLoad() and resetting it to .clear (so it uses whatever color is set on the newly pushed VC) on viewWillDissappear. While this sorta works, it is not fast enough as the .clear color is not applied until the pushing animation is over, resulting in like half a second of the navigationBar color being visible until it is finally resetted to .clear.
Current code looks like this:
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.navigationBar.setNavBarColor(color: .red)
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
navigationController?.navigationBar.setNavBarColor(color: .clear)
}
func setNavBarColor(color: UIColor) {
let appearance: UINavigationBarAppearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = color
self.standardAppearance = appearance
self.scrollEdgeAppearance = appearance
}
This works but isnt fast enough as the changes take effect only after the pushing animation ends. Any tip?
Set your navigation bar with my extension:
extension UIViewController {
func configureNavigationBar(largeTitleColor: UIColor, backgoundColor: UIColor, tintColor: UIColor, title: String, preferredLargeTitle: Bool) {
if #available(iOS 13.0, *) {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: largeTitleColor]
navBarAppearance.titleTextAttributes = [.foregroundColor: largeTitleColor]
navBarAppearance.backgroundColor = backgoundColor
navigationController?.navigationBar.standardAppearance = navBarAppearance
navigationController?.navigationBar.compactAppearance = navBarAppearance
navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
navigationController?.navigationBar.prefersLargeTitles = preferredLargeTitle
navigationController?.navigationBar.isTranslucent = false
navigationController?.navigationBar.tintColor = tintColor
navigationItem.title = title
} else {
// Fallback on earlier versions
navigationController?.navigationBar.barTintColor = backgoundColor
navigationController?.navigationBar.tintColor = tintColor
navigationController?.navigationBar.isTranslucent = false
navigationItem.title = title
}
}
}
call it in viewWillAppear or viewDidLoad and change your background colors, in your case set background to clear... How to use:
configureNavigationBar(largeTitleColor: .black, backgoundColor: .white, tintColor: .black, title: "yourTitle", preferredLargeTitle: true)
In your case, call configureNavigationBar func in viewWillAppear of start controller, call configureNavigationBar in viewDidLoad of destination controller.. ES:
In SceneDelegate set your start controller under scene function:
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(windowScene: windowScene)
window?.makeKeyAndVisible()
let controller = UINavigationController(rootViewController: StartController())
window?.rootViewController = controller
if #available(iOS 13, *) {
window?.overrideUserInterfaceStyle = .dark
}
}
this is StartController:
import UIKit
class StartController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
navigationItem.rightBarButtonItem = UIBarButtonItem(title: "GO", style: .plain, target: self, action: #selector(handleGo))
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
configureNavigationBar(largeTitleColor: .white, backgoundColor: .black, tintColor: .white, title: "Start", preferredLargeTitle: true)
}
#objc fileprivate func handleGo() {
let controller = DestinationController()
navigationController?.pushViewController(controller, animated: true)
}
}
This is DestinationController:
import UIKit
class DestinationController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
configureNavigationBar(largeTitleColor: .white, backgoundColor: .red, tintColor: .white, title: "Destination", preferredLargeTitle: true)
}
}
the result:
I have implemented a feature, when you press on a UITabBar icon and viewController1 scrolls up using its UIScrollView. It works perfectly, but if I scroll view down and stop somewhere, then switch to another viewController2, then get back to viewController1 and press tabBar icon - the viewController1 will scroll up, but Large Title will never be showed, and I should press tabBar icon one more time to show it:
The code I use for scroll up the VC1:
private var biggestTopSafeAreaInset: CGFloat = 0
override func viewSafeAreaInsetsDidChange() {
super.viewSafeAreaInsetsDidChange()
self.biggestTopSafeAreaInset = max(view.safeAreaInsets.top, biggestTopSafeAreaInset)
}
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
if tabBarController.selectedIndex == 0 {
let navigationVC = viewController as? UINavigationController
let firstVC = navigationVC?.viewControllers.first as? CurrencyViewController
guard let scrollView = firstVC?.view.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView else { return }
if traitCollection.verticalSizeClass == .compact {
scrollView.setContentOffset(CGPoint(x: 0, y: -view.safeAreaInsets.top, animated: true)
} else {
scrollView.setContentOffset(CGPoint(x: 0, y: -biggestTopSafeAreaInset, animated: true)
}
}
}
I tried to track biggestTopSafeAreaInset in different stages of VC1 life, but it always has the same number - 196.0. But then why it doesn't scroll till the Large Title after viewControllers switch?
in your tableView set contentInsetAdjustmentBehavior to never
tableView.contentInsetAdjustmentBehavior = .never
in controller update the ui of navigation bar again
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
DispatchQueue.main.async { [weak self] in
self?.navigationController?.navigationBar.sizeToFit()
}
}
here is the navigation controller
class BaseNavigationController: UINavigationController {
override func viewDidLoad() {
super.viewDidLoad()
if #available(iOS 15.0, *) {
let scrollAppearance = UINavigationBarAppearance()
scrollAppearance.shadowColor = .white
scrollAppearance.backgroundColor = .white
let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithDefaultBackground()
navigationBarAppearance.backgroundColor = .white
navigationBarAppearance.largeTitleTextAttributes = [
NSAttributedString.Key.font: UIFont.systemFont(ofSize: 26),
NSAttributedString.Key.foregroundColor: UIColor.black
]
navigationBarAppearance.titleTextAttributes = [
NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17),
NSAttributedString.Key.foregroundColor: UIColor.black
]
UINavigationBar.appearance().backIndicatorImage = UIImage(named: "back-arrow")
UINavigationBar.appearance().standardAppearance = navigationBarAppearance
UINavigationBar.appearance().compactAppearance = navigationBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = scrollAppearance
navigationBar.tintColor = .black
navigationBar.prefersLargeTitles = true
navigationBar.isTranslucent = false
navigationItem.largeTitleDisplayMode = .automatic
} else {
navigationBar.largeTitleTextAttributes = [
NSAttributedString.Key.font: UIFont.systemFont(ofSize: 26),
NSAttributedString.Key.foregroundColor: UIColor.black
]
navigationBar.titleTextAttributes = [
NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17),
NSAttributedString.Key.foregroundColor: UIColor.black
]
navigationBar.tintColor = .black
navigationBar.prefersLargeTitles = true
navigationBar.isTranslucent = false
navigationItem.largeTitleDisplayMode = .automatic
navigationBar.barTintColor = .white
}
}
override var preferredStatusBarStyle: UIStatusBarStyle {
return .darkContent
}
}
here is the Tabbar Controller
class TabbarController:UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let c1 = C1()
let c2 = C2()
let c3 = C3()
c1.tabBarItem = UITabBarItem(title: "Home", image: UIImage(named: "home786"), tag: 0)
c1.tabBarItem.tag = 0
let nav1 = BaseNavigationController(rootViewController: c1)
c2.tabBarItem = UITabBarItem(title: "Setting", image: UIImage(named: "home786"), tag: 0)
c2.tabBarItem.tag = 1
let nav2 = BaseNavigationController(rootViewController: c2)
c2.tabBarItem = UITabBarItem(title: "User", image: UIImage(named: "home786"), tag: 0)
c2.tabBarItem.tag = 2
let nav3 = BaseNavigationController(rootViewController: c3)
viewControllers = [nav1,nav2,nav3]
selectedViewController = nav1
tabBarController?.viewControllers?.first?.view.backgroundColor = .red
}
}
Try to add this in viewDidLoad:
view.addSubview(UIView())
this single line block large title navigation Bar... I don't Know why, but this trick fix momentarily the issue...
After some research I found out what can fix my problem. If you call this method with a small delay in tabBarController didSelect then it will be possible to see a Large Title after switching viewControllers. But I still can't figure out exactly why it happened...
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
navigationVC?.navigationBar.sizeToFit()
}
I'm getting to grips with Swift 4 and Xcode.
I can't figure out how to close a WKWebView after it has been opened!
I am using it to display a PDF document, and have added a Navigation Bar with a 'Done' button.
I have figured out how to got to close it and go to the Root UIViewController, however I want it to go to a View Controller called 'DocumentsViewController'.
Below is the code I am working with, however I believe the line I am trying to fix is:
let doneItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: nil, action: #selector(selectAction(_:)))
With selectAction being:
#objc func selectAction(_ sender:UIBarButtonItem) -> Void {
//print("Select Clicked")
self.view.window?.rootViewController?.dismiss(animated: true, completion: nil)
}
I've spent hours trying to figure this out! How can I make it so when I click the done button it closes the WKWebView and goes to the 'DocumentsViewController'?
#objc func selectAction(_ sender:UIBarButtonItem) -> Void {
//print("Select Clicked")
self.view.window?.rootViewController?.dismiss(animated: true, completion: nil)
}
override func viewDidLoad() {
super.viewDidLoad()
if let url = Bundle.main.url(forResource: pdfTitle, withExtension: "pdf") {
let webView = WKWebView(frame: self.view.frame)
let urlRequest = URLRequest(url: url)
webView.load(urlRequest as URLRequest)
self.view.addSubview(webView)
self.tabBarController?.tabBar.isHidden = true
let screenSize: CGRect = UIScreen.main.bounds
let navBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: 44))
self.view.addSubview(navBar);
let navItem = UINavigationItem(title: "");
let doneItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: nil, action: #selector(selectAction(_:)))
navItem.rightBarButtonItem = doneItem;
navBar.setItems([navItem], animated: false);
// Get height of status bar (iPhone X introduced a new status bar)
let statusBarHeight = UIApplication.shared.statusBarFrame.height
// Initialize the frame
webView.frame = CGRect.init(x: 0, y: statusBarHeight, width: view.bounds.maxX, height: view.bounds.maxY)
// Set background color of status bar (optional)
self.view.backgroundColor = UIColor(red: 248/255.0, green: 248/255.0, blue: 248/255.0, alpha: 1.0)
}
Just add your new view to the navigation stack...
#objc func selectAction(_ sender:UIBarButtonItem) -> Void {
let newViewController = DocumentsViewController()
self.navigationController?.pushViewController(newViewController, animated: true)
}
I have taken a view controller & embedded it in a navigation Controller and again this has been embedded in a tab bar controller. when I am trying to set a image via story board, the image does not appear on a tab bar icon. Here image name is 25.
What can I do? How can I do it programmatically? what should I take proper image size for this purpose?
In your MainTabbarViewController
Bind the outlet of your tabbar:
#IBOutlet weak var myTabBar: UITabBar?
override func viewDidLoad() {
super.viewDidLoad()
myTabBar?.tintColor = UIColor.white
tabBarItem.title = ""
setTabBarItems()
}
set the tabbar items here defined method below:
func setTabBarItems(){
let myTabBarItem1 = (self.tabBar.items?[0])! as UITabBarItem
myTabBarItem1.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem1.selectedImage = UIImage(named: "Selected ")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem1.title = ""
myTabBarItem1.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
let myTabBarItem2 = (self.tabBar.items?[1])! as UITabBarItem
myTabBarItem2.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem2.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem2.title = ""
myTabBarItem2.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
let myTabBarItem3 = (self.tabBar.items?[2])! as UITabBarItem
myTabBarItem3.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem3.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem3.title = ""
myTabBarItem3.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
let myTabBarItem4 = (self.tabBar.items?[3])! as UITabBarItem
myTabBarItem4.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem4.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
myTabBarItem4.title = ""
myTabBarItem4.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
add AppDelegate class :
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool
{
window=UIWindow(frame: UIScreen.main.bounds)
self.window?.rootViewController = setTabbar()
self.window?.makeKeyAndVisible()
window?.backgroundColor=UIColor.white
return true
}
func setTabbar() -> UITabBarController
{
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let tabbarcntrl = UITabBarController()
let Home = storyboard.instantiateViewController(withIdentifier: "HomeView") // 1st tab bar viewcontroller
let Followed = storyboard.instantiateViewController(withIdentifier: "FollowedView") // 2nd tab bar viewcontroller
let Message = storyboard.instantiateViewController(withIdentifier: "MessageView") // 3rd tab bar viewcontroller
// all viewcontroller embedded navigationbar
let nvHome = UINavigationController(rootViewController: Home)
let nvFollowed = UINavigationController(rootViewController: Followed)
let nvMessage = UINavigationController(rootViewController: Message)
// all viewcontroller navigationbar hidden
nvHome.setNavigationBarHidden(true, animated: false)
nvFollowed.setNavigationBarHidden(true, animated: false)
nvMessage.setNavigationBarHidden(true, animated: false)
tabbarcntrl.viewControllers = [nvHome,nvFollowed,nvMessage]
let tabbar = tabbarcntrl.tabBar
tabbar.barTintColor = UIColor.black
tabbar.backgroundColor = UIColor.black
tabbar.tintColor = UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)
//UITabBar.appearance().tintColor = UIColor.white
let attributes = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor.white]
let attributes1 = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)]
UITabBarItem.appearance().setTitleTextAttributes(attributes, for: .normal)
UITabBarItem.appearance().setTitleTextAttributes(attributes1, for: .selected)
let tabHome = tabbar.items![0]
tabHome.title = "Home" // tabbar titlee
tabHome.image=UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // deselect image
tabHome.selectedImage = UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // select image
tabHome.titlePositionAdjustment.vertical = tabHome.titlePositionAdjustment.vertical-4 // title position change
let tabFoll = tabbar.items![1]
tabFoll.title = "Followed"
tabFoll.image=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
tabFoll.selectedImage=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
tabFoll.titlePositionAdjustment.vertical = tabFoll.titlePositionAdjustment.vertical-4
let tabMsg = tabbar.items![3]
tabMsg.title = "Message"
tabMsg.image=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
tabMsg.selectedImage=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
tabMsg.titlePositionAdjustment.vertical = tabMsg.titlePositionAdjustment.vertical-4
return tabbarcntrl
}
Set both images- for select/selected state
You are doing all the things in right way But the only problem is your tabbaritem image is not in correct size .Just look this table for actual size of tabbaritem images.
In swift 4 and 5 you can use the below extension. Remember one thing always pass the same number of images , selected images and title but if you do not want to set title then pass nil in title.
extension UITabBarController{
func setUpImagaOntabbar(_ selectedImage : [UIImage], _ image : [UIImage], _ title : [String]?){
for (index,vals) in image.enumerated(){
if let tab = self.tabBar.items?[index]{
tab.image = image[index]
tab.image = selectedImage[index]
if let tile = title[index]{
tab.title = title[index]
}
}
}
}
}
Here is what I am trying to do:
Note: The screenshot is taken from an earlier version of iOS
What I have been able to achieve:
Code:
override func viewWillAppear(animated: Bool) {
// Creates image of the Button
let imageCameraButton: UIImage! = UIImage(named: "cameraIcon")
// Creates a Button
let cameraButton = UIButton(type: .Custom)
// Sets width and height to the Button
cameraButton.frame = CGRectMake(0.0, 0.0, imageCameraButton.size.width, imageCameraButton.size.height);
// Sets image to the Button
cameraButton.setBackgroundImage(imageCameraButton, forState: .Normal)
// Sets the center of the Button to the center of the TabBar
cameraButton.center = self.tabBar.center
// Sets an action to the Button
cameraButton.addTarget(self, action: "doSomething", forControlEvents: .TouchUpInside)
// Adds the Button to the view
self.view.addSubview(cameraButton)
}
I did try to create a rounded button in the normal way, but this was the result:
Code Snippet for rounded button:
//Creation of Ronded Button
cameraButton.layer.cornerRadius = cameraButton.frame.size.width/2
cameraButton.clipsToBounds = true
Solution
You need to subclass UITabBarController and then add the button above TabBar's view. A button action should trigger UITabBarController tab change by setting selectedIndex.
Code
The code below only is a simple approach, however for a full supporting iPhone (including X-Series)/iPad version you can check the full repository here: EBRoundedTabBarController
class CustomTabBarController: UITabBarController {
// MARK: - View lifecycle
override func viewDidLoad() {
super.viewDidLoad()
let controller1 = UIViewController()
controller1.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1)
let nav1 = UINavigationController(rootViewController: controller1)
let controller2 = UIViewController()
controller2.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 2)
let nav2 = UINavigationController(rootViewController: controller2)
let controller3 = UIViewController()
let nav3 = UINavigationController(rootViewController: controller3)
nav3.title = ""
let controller4 = UIViewController()
controller4.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 4)
let nav4 = UINavigationController(rootViewController: controller4)
let controller5 = UIViewController()
controller5.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 5)
let nav5 = UINavigationController(rootViewController: controller5)
viewControllers = [nav1, nav2, nav3, nav4, nav5]
setupMiddleButton()
}
// MARK: - Setups
func setupMiddleButton() {
let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64))
var menuButtonFrame = menuButton.frame
menuButtonFrame.origin.y = view.bounds.height - menuButtonFrame.height
menuButtonFrame.origin.x = view.bounds.width/2 - menuButtonFrame.size.width/2
menuButton.frame = menuButtonFrame
menuButton.backgroundColor = UIColor.red
menuButton.layer.cornerRadius = menuButtonFrame.height/2
view.addSubview(menuButton)
menuButton.setImage(UIImage(named: "example"), for: .normal)
menuButton.addTarget(self, action: #selector(menuButtonAction(sender:)), for: .touchUpInside)
view.layoutIfNeeded()
}
// MARK: - Actions
#objc private func menuButtonAction(sender: UIButton) {
selectedIndex = 2
}
}
Output
Swift 3 Solution
With a slight adjustment to EricB's solution to have this work for Swift 3, the menuButton.addTarget() method needs to have it's selector syntax changed a bit.
Here is the new menuButton.addTarget() function:
menuButton.addTarget(self, action: #selector(MyTabBarController.menuButtonAction), for: UIControlEvents.touchUpInside)
When defining my TabBarController class, I also add a UITabBarControllerDelegate and placed all of the that in the
override func viewDidAppear(_ animated: Bool) { ... }
For extra clarity, the full code is:
Full Code Solution
import UIKit
class MyTabBarController: UITabBarController, UITabBarControllerDelegate {
// View Did Load
override func viewDidLoad() {
super.viewDidLoad()
}
// Tab Bar Specific Code
override func viewDidAppear(_ animated: Bool) {
let controller1 = UIViewController(self.view.backgroundColor = UIColor.white)
controller1.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 1)
let nav1 = UINavigationController(rootViewController: controller1)
let controller2 = UIViewController()
controller2.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 2)
let nav2 = UINavigationController(rootViewController: controller2)
let controller3 = UIViewController()
let nav3 = UINavigationController(rootViewController: controller3)
nav3.title = ""
let controller4 = UIViewController()
controller4.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 4)
let nav4 = UINavigationController(rootViewController: controller4)
let controller5 = UIViewController()
controller5.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 5)
let nav5 = UINavigationController(rootViewController: controller5)
self.viewControllers = [nav1, nav2, nav3, nav4, nav5]
self.setupMiddleButton()
}
// TabBarButton – Setup Middle Button
func setupMiddleButton() {
let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64))
var menuButtonFrame = menuButton.frame
menuButtonFrame.origin.y = self.view.bounds.height - menuButtonFrame.height
menuButtonFrame.origin.x = self.view.bounds.width / 2 - menuButtonFrame.size.width / 2
menuButton.frame = menuButtonFrame
menuButton.backgroundColor = UIColor.red
menuButton.layer.cornerRadius = menuButtonFrame.height/2
self.view.addSubview(menuButton)
menuButton.setImage(UIImage(named: "example"), for: UIControlState.normal)
menuButton.addTarget(self, action: #selector(MyTabBarController.menuButtonAction), for: UIControlEvents.touchUpInside)
self.view.layoutIfNeeded()
}
// Menu Button Touch Action
func menuButtonAction(sender: UIButton) {
self.selectedIndex = 2
// console print to verify the button works
print("Middle Button was just pressed!")
}
}
This is the customTabbarcontroller class which is the subclass of UITabbarcontroller. It's the same idea as given by #EridB. But in his code #Raymond26's issue wasn't solved. So, posting a complete solution written in Swift 3.0
protocol CustomTabBarControllerDelegate
{
func customTabBarControllerDelegate_CenterButtonTapped(tabBarController:CustomTabBarController, button:UIButton, buttonState:Bool);
}
class CustomTabBarController: UITabBarController, UITabBarControllerDelegate
{
var customTabBarControllerDelegate:CustomTabBarControllerDelegate?;
var centerButton:UIButton!;
private var centerButtonTappedOnce:Bool = false;
override func viewDidLayoutSubviews()
{
super.viewDidLayoutSubviews();
self.bringcenterButtonToFront();
}
override func viewDidLoad()
{
super.viewDidLoad()
self.delegate = self;
self.tabBar.barTintColor = UIColor.red;
let dashboardVC = DashboardViewController()
dashboardVC.tabBarItem = UITabBarItem(tabBarSystemItem: .topRated, tag: 1)
let nav1 = UINavigationController(rootViewController: dashboardVC)
let myFriendsVC = MyFriendsViewController()
myFriendsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .featured, tag: 2)
let nav2 = UINavigationController(rootViewController: myFriendsVC)
let controller3 = UIViewController()
let nav3 = UINavigationController(rootViewController: controller3)
nav3.title = ""
let locatorsVC = LocatorsViewController()
locatorsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 4)
let nav4 = UINavigationController(rootViewController: locatorsVC)
let getDirectionsVC = GetDirectionsViewController()
getDirectionsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .history, tag: 5)
let nav5 = UINavigationController(rootViewController: getDirectionsVC)
viewControllers = [nav1, nav2, nav3, nav4, nav5]
self.setupMiddleButton()
}
// MARK: - TabbarDelegate Methods
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController)
{
switch viewController
{
case is DashboardViewController:
self.showCenterButton()
case is MyFriendsViewController:
self.showCenterButton()
case is GetDirectionsViewController:
self.showCenterButton()
case is LocatorsViewController:
self.showCenterButton()
default:
self.showCenterButton()
}
}
// MARK: - Internal Methods
#objc private func centerButtonAction(sender: UIButton)
{
// selectedIndex = 2
if(!centerButtonTappedOnce)
{
centerButtonTappedOnce=true;
centerButton.setImage(UIImage(named: "ic_bullseye_white"), for: .normal)
}
else
{
centerButtonTappedOnce=false;
centerButton.setImage(UIImage(named: "ic_bullseye_red"), for: .normal)
}
customTabBarControllerDelegate?.customTabBarControllerDelegate_CenterButtonTapped(tabBarController: self,
button: centerButton,
buttonState: centerButtonTappedOnce);
}
func hideCenterButton()
{
centerButton.isHidden = true;
}
func showCenterButton()
{
centerButton.isHidden = false;
self.bringcenterButtonToFront();
}
// MARK: - Private methods
private func setupMiddleButton()
{
centerButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64))
var centerButtonFrame = centerButton.frame
centerButtonFrame.origin.y = view.bounds.height - centerButtonFrame.height
centerButtonFrame.origin.x = view.bounds.width/2 - centerButtonFrame.size.width/2
centerButton.frame = centerButtonFrame
centerButton.backgroundColor = UIColor.red
centerButton.layer.cornerRadius = centerButtonFrame.height/2
view.addSubview(centerButton)
centerButton.setImage(UIImage(named: "ic_bullseye_red"), for: .normal)
centerButton.setImage(UIImage(named: "ic_bullseye_white"), for: .highlighted)
centerButton.addTarget(self, action: #selector(centerButtonAction(sender:)), for: .touchUpInside)
view.layoutIfNeeded()
}
private func bringcenterButtonToFront()
{
print("bringcenterButtonToFront called...")
self.view.bringSubview(toFront: self.centerButton);
}
}
This is the DashboardViewController for complete reference:
class DashboardViewController: BaseViewController, CustomTabBarControllerDelegate
{
override func viewDidLoad()
{
super.viewDidLoad()
(self.tabBarController as! CustomTabBarController).customTabBarControllerDelegate = self;
}
override func viewWillAppear(_ animated: Bool)
{
super.viewWillAppear(animated);
(self.tabBarController as! CustomTabBarController).showCenterButton();
}
override func viewWillDisappear(_ animated: Bool)
{
super.viewWillDisappear(animated);
self.hidesBottomBarWhenPushed = false;
(self.tabBarController as! CustomTabBarController).hideCenterButton();
}
override func viewWillLayoutSubviews()
{
super.viewWillLayoutSubviews();
if(!isUISetUpDone)
{
self.view.backgroundColor = UIColor.lightGray
self.title = "DASHBOARD"
self.prepareAndAddViews();
self.isUISetUpDone = true;
}
}
override func didReceiveMemoryWarning()
{
super.didReceiveMemoryWarning()
}
//MARK: CustomTabBarControllerDelegate Methods
func customTabBarControllerDelegate_CenterButtonTapped(tabBarController: CustomTabBarController, button: UIButton, buttonState: Bool)
{
print("isDrive ON : \(buttonState)");
}
//MARK: Internal Methods
func menuButtonTapped()
{
let myFriendsVC = MyFriendsViewController()
myFriendsVC.hidesBottomBarWhenPushed = true;
self.navigationController!.pushViewController(myFriendsVC, animated: true);
}
//MARK: Private Methods
private func prepareAndAddViews()
{
let menuButton = UIButton(frame: CGRect(x: 100, y: 100, width: 100, height: 50))
menuButton.titleLabel?.text = "Push"
menuButton.titleLabel?.textColor = UIColor.white
menuButton.backgroundColor = UIColor.red;
menuButton.addTarget(self, action: #selector(DashboardViewController.menuButtonTapped), for: .touchUpInside)
self.view.addSubview(menuButton);
}
}
with StoryBoard:
Click the tab bar button within the view controller of the particular tab bar item you want to make prominent,
Remove the text, just set the image inset top to -25 of the tab bar button.
Check Like Below image