Adam Stoller Adam Stoller - 2 months ago 20
Swift Question

How to place toolbar above (or below) scrolling tableview

ENVIRONMENT:


  • Xcode 7.3.1

  • iOS 9.3

OBJECTIVE:


    A scrollable table view with a toolbar (or distinct buttons) in a fixed location (either above or below) relative to the scrolling table.

STORYBOARD:

    Originally I just had the tableview and added a toolbar to it, however the toolbar is sitting within the tableview.

    I later found this option for the Bottom Bar: Opaque Toolbar, but cannot figure out how to utilize it / move my toolbar into the space provided (which looks like what I want)

      storyboard

CURRENT RESULTS:

    If I only have a few cells, e.g.: 5 or 10, then the results are “okay”, but not “great”:

      okay


    However, if I have a large number of cells, e.g.: 20, then the problem I was trying to avoid is immediately apparent:

      bad

QUERY:
  • Can I accomplish what I want from within the Xcode UI?

    • If so, can someone provide some pointers / steps that I need to take to do so?

  • Or do I need to do this within the Swift code?

    • Again, pointers / steps / generic code example gratefully appreciated.





  • WRT 2016-09-15 Edit in Answer #1


    Embed the initial View Controller (the one with the buttons) in an `UINavigationController`.


    I don't see how to do that, as the only thing I seem to be able to embed within the navigation controller is a Tab Bar Controller

      embed


    If not already created, make a `UITableViewController` class and link it to your Table View Controller.


    I already have
    class ExistingLocationsViewController: UITableViewController { ... }
    (and a
    class ExistingLocationTableViewCell: UITableViewCell { ... }
    ) linked, I believe, appropriately


    Add this code to the class in order to make the Toolbar appear and disappear when you are viewing the Table View:

    import UIKit
    class ViewController: UITableViewController {
    override func viewDidLoad() {
    super.viewDidLoad()
    navigationController?.isToolbarHidden = false
    }
    override func viewWillDisappear(_ animated: Bool) {
    navigationController?.isToolbarHidden = true
    }
    }

    This should be all you'll have to do. If you want to edit the toolbar make it visible while you are editing it and afterwards hide it again.


    FYI, in my Xcode, iOS version, the property appears to be named
    toolbarHidden
    (not
    **isT**oolbarHidden
    )


    ANOTHER APPROACH (2016-09-17)

    Going back a step (or two), I noticed an option with the Table View Controller and tried to make use of it, but it didn't seem to work. See image (and text within) for details:

      embed



    When I run the app, it doesn't seem to make any difference (again, see image):

      embed



    Am I doing something wrong?, or completely misunderstanding the Xcode interface?

    Answer

    One of the easiest ways to add a toolbar to any view is by embedding it in a NavigationViewController. All this can be done without code:

    1. Take the View Controller that you currently have (I assume the UITableViewController) and under Editor -> Embed In select Navigation Controller. enter image description here

      1. Select the newly created Navigation Controller. In the utilities bar under Bar Visibility, select Toolbar to be shown. If needed you can also keep the Navigation Bar, else turn it off. enter image description here

      2. Now you are able to modify the Toolbar in UITableViewController. Just drag the different Toolbar items (Bar Button Item, Fixed Space Bar Button Item, Flexible Bar Button Item) onto the Toolbar as you please. Be aware, you can't move the toolbar and you can only change its style in the NavigationViewController. enter image description here

    EDIT: Since you have a different initial View Controller, I would recommend you solving the issue slightly differently. This will require a little bit of code:

    1. Embed the initial View Controller (the one with the buttons) in an UINavigationController. Remove any other Navigation Controllers. Your buttons should simply have a segue that show the UITableViewController. Disable the Toolbar in the Navigation Controller and as before, it's up to you to enable the Navigation Bar (I would recommend it). enter image description here

    2. If not already created, make a UITableViewController class and link it to your Table View Controller. enter image description here

    3. Add this code to the class in order to make the Toolbar appear and disappear when you are viewing the Table View:

      import UIKit
      
      class ViewController: UITableViewController {
      
          override func viewDidLoad() {
              super.viewDidLoad()
              navigationController?.isToolbarHidden = false
          }
      
          override func viewWillDisappear(_ animated: Bool) {
              navigationController?.isToolbarHidden = true
          }
      
      }
      

    This should be all you'll have to do. If you want to edit the toolbar make it visible while you are editing it and afterwards hide it again.

    Comments