How to trigger an action from a subclass of UITabBarController using Swift

Question

I created a subclass of UITabBarController on my iOS app because I wanted to add a middle "+" button on the tab bar. I added this extra button using the code below:

class XGTabBarViewController: UITabBarController {

let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
private let optionMenu = UIAlertController(title: nil, message: "New", preferredStyle: .actionSheet)

override func viewDidLoad() {
    super.viewDidLoad()

    let action1 = UIAlertAction(title: "Action 1", style: .default)
    let action2 = UIAlertAction(title: "Action 2", style: .default)
    let cancelAction = UIAlertAction(title: "Cancel", style: .cancel)

    optionMenu.addAction(action1)
    optionMenu.addAction(action2)
    optionMenu.addAction(cancelAction)

    var menuButtonFrame = menuButton.frame
    let iconConfig = UIImage.SymbolConfiguration(pointSize: 24, weight: .medium, scale: .medium)

    let iconImage = UIImage(systemName: "plus", withConfiguration: iconConfig)
    let icon = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
    icon.image = iconImage
    icon.tintColor = UIColor.white

    menuButtonFrame.origin.y = view.bounds.height - menuButtonFrame.height - 50
    menuButtonFrame.origin.x = view.bounds.width/2 - menuButtonFrame.size.width/2
    menuButton.frame = menuButtonFrame

    menuButton.backgroundColor = UIColor(named: "LinkBlue")
    menuButton.layer.cornerRadius = menuButtonFrame.height/2
    menuButton.layer.shadowColor = UIColor.black.cgColor
    menuButton.layer.shadowRadius = 3
    menuButton.layer.shadowOpacity = 0.3
    menuButton.layer.shadowOffset = CGSize(width: 0, height: 3)

    menuButton.addSubview(icon)
    icon.translatesAutoresizingMaskIntoConstraints = false
    icon.widthAnchor.constraint(equalToConstant: 30).isActive = true
    icon.heightAnchor.constraint(equalToConstant: 30).isActive = true
    icon.centerXAnchor.constraint(equalTo: menuButton.centerXAnchor).isActive = true
    icon.centerYAnchor.constraint(equalTo: menuButton.centerYAnchor).isActive = true

    view.addSubview(menuButton)

    menuButton.addTarget(self, action: #selector(menuButtonAction(sender:)), for: .touchUpInside)

    view.layoutIfNeeded()
}

@objc private func menuButtonAction(sender: UIButton) {
    self.present(optionMenu, animated: true, completion: nil)
}

I setup the tab bar controller via IB. And this is how it looks like

So, what I want know is if I should define the menu button action within this class? Or is there a better (best practice) way to do it?

As you can see, I tried to add an action sheet that will be shown when the button is tapped. But I am getting some layout errors. I am wondering if I added this code in the right place.

I am getting the error below:

Thanks!

your constraints are breaking .... but you put the code on right place — Jawad Ali, Mar 13 '20 at 04:15
@CrisDenopol Please set image inset in top -37 value i think working. — Himanshu Patel, Mar 13 '20 at 04:29

Himanshu Patel · Answer 1 · 2020-03-13T06:22:31.467

Please add tabbar controller and three viewcontroller connect to tabbar. center viewcontroller tabbar iteam set image inset.

No layout errors.

import UIKit

class TabBarVC: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()


    let tabBar = self.tabBar
    (tabBar.items![0] ).selectedImage = UIImage(named:"icn_audio_icon")?.withRenderingMode(.alwaysOriginal)
    (tabBar.items![1] ).selectedImage = UIImage(named:"icn_home_active")?.withRenderingMode(.alwaysOriginal)
    tabBar.items![2].image = UIImage(named:"icn_categary")?.withRenderingMode(.alwaysOriginal)

    tabBar.items![0].image = UIImage(named:"icn_audio_icon")?.withRenderingMode(.alwaysOriginal)
    tabBar.items![1].image = UIImage(named:"icn_home")?.withRenderingMode(.alwaysOriginal)
    tabBar.items![2].image = UIImage(named:"icn_categary")?.withRenderingMode(.alwaysOriginal)

    self.tabBarController?.selectedIndex = 1
    tabBar.layer.shadowColor = UIColor.red.cgColor
    tabBar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    tabBar.layer.shadowRadius = 5
    tabBar.layer.shadowOpacity = 0.6
    tabBar.layer.masksToBounds = false


}
  override func viewDidLayoutSubviews() {
     super.viewDidLayoutSubviews()
     self.tabBar.invalidateIntrinsicContentSize()
  }

}

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
  if viewController.isKind(of: ActionViewController.self) {
     let vc =  ActionViewController()
     vc.modalPresentationStyle = .overFullScreen
     self.present(vc, animated: true, completion: nil)
     return false
  }
  return true
}

How do I show the action sheet then when I tap on the middle button? — Cris Denopol, Mar 13 '20 at 05:00
I'm sorry, I'm totally lost. I have no idea what the tabBarController() method is for. And the ActionViewController() method seems to be out of place too. It's not defined anywhere. Anyway, thanks for your your help. I really appreciate the attempt — Cris Denopol, Mar 13 '20 at 08:22

score 0 · Answer 2 · answered Mar 13 '20 at 13:29

0

It appears that my code was correct after all. But there's apparently a bug with UIAlertController that causes it to break layouts. Workaround is found in this link

Swift default AlertViewController breaking constraints

answered Mar 13 '20 at 13:29

Cris Denopol

300
2
15

How to trigger an action from a subclass of UITabBarController using Swift

2 Answers2