CODEWITHSUNDEEP
iosswiftuitabbarcontrolleruitoolbar
LoicMazuc
LoicMazuc

Reputation: 225

How to implement toolBar in tabBar?

I would like to implement a toolbar in my tab bar or ender my tab bar like in the photo app. I show you :

Tab Bar turn to when select button tapped Tool bar

I already try to put the toolbar in the Tab bar controller view, without success.

Thanks for your replies !

Upvotes: 1

Views: 1079

Answers (3)

santes
santes

Reputation: 1

==> Tested in iOS 15.5

==> First your view controller must embed in UINavigationController

==> in viewDidLoad set editButtonItem to navigationItem and also configure UINavigationController native toolbarItems

override func viewDidLoad() {
    super.viewDidLoad()
    navigationItem.rightBarButtonItem = editButtonItem
    self.toolbarItems = [UIBarButtonItem(barButtonSystemItem: .trash, target: self, action: nil)]
}

==> After that override setEditing Method and implement your logic as required. and you are done

override func setEditing(_ editing: Bool, animated: Bool) {
    super.setEditing(editing, animated: animated)
    self.tableView.setEditing(editing, animated: true)
    self.tabBarController?.tabBar.isHidden = editing
    self.navigationController?.setToolbarHidden(!editing, animated: true)
}

You can check it out image here

==> But there is one issue and need further assistance... if anyone have any idea then comment bellow..

Issue : toolbar leave safeArea space and came top of that...

You can also checkout Demo Native toolbar Demo

Upvotes: 0

Demented07
Demented07

Reputation: 146

I believe this might be the sort of behaviour you're looking for. You don't have to use a custom UIButton you could use a UIBarButtonItem, but that's up to you, I just chose to demonstrate it with a custom UIButton to show you that this is one way of doing it.

class ViewController: UIViewController {
    var selectButton: UIButton!
    var isInSelectMode = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        selectButton = UIButton(type: .system)
        selectButton.addTarget(self, action: #selector(selectButtonTapped), for: .touchUpInside)
        selectButton.setTitle("Select", for: .normal)
        view.addSubview(selectButton)
        
        let trashButton = UIBarButtonItem(barButtonSystemItem: .trash, target: nil, action: nil)
        toolbarItems = [trashButton]
        
        selectButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            selectButton.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor, constant: -15),
            selectButton.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor, constant: 15),
        ])
        
    }
    
    @objc func selectButtonTapped() {
        isInSelectMode = !isInSelectMode
        if isInSelectMode {
            selectButton.setTitle("Done", for: .normal)
            tabBarController?.tabBar.isHidden = true
            tabBarController?.tabBar.backgroundColor = .systemBackground
            navigationController?.setToolbarHidden(false, animated: true)
            
        } else {
            selectButton.setTitle("Select", for: .normal)
            tabBarController?.tabBar.isHidden = false
            tabBarController?.tabBar.backgroundColor = .clear
            navigationController?.setToolbarHidden(true, animated: true)
            
        }
        
    }

}

Here's what it looks like: demo gif of what the code does

Upvotes: 0

Asad
Asad

Reputation: 311

A simple solution for this is to hide the tabBar on some event (Photos app has a button which does this). Then create a custom ToolBar and add it as a subview of the view controller.

Upvotes: 1

Related Questions