TableView Showing Behind Tab Bar

Viewed 36861

I am updating my app to use iOS 7 and I'm having a problem with a table view. My tab bar is translucent. The problem is when I scroll to the bottom of my table view, part of the last cell is still behind the tab bar. I'd like to have a bit of space between the last cell and the tab bar. I could fix this by using an opaque tab bar instead, but I want to keep it translucent.

enter image description here

11 Answers

Swift 4.x

let adjustForTabbarInsets: UIEdgeInsets = UIEdgeInsetsMake(0, 0, self.tabBarController!.tabBar.frame.height, 0)
self.yourTableView.contentInset = adjustForTabbarInsets
self.yourTableView.scrollIndicatorInsets = adjustForTabbarInsets

This is working for me

override func viewDidLoad() { self.edgesForExtendedLayout = UIRectEdge() self.extendedLayoutIncludesOpaqueBars = false }

It is really hard to resolve the issue without detail information or actual codes. I have similar issue of tabview behind UItabBar in my project. The solutions offered here do not work in my case. After exploring my codes, I found a solution for my case.

Here is brief explanation of my case. I have a UItabBar in main view with two tab buttons. In one tab view, there is table view. If user taps on a row, a detail view is presented by using navigation controller. In the detail view, the tab bar is hidden, and a toolbar is showing at the bottom.

In order to bring tab bar back and hide the toolbar when the main view is brought back, I have to explicitly show tab bar and hide toolbar in the event of viewWillAppear:

class myMainViewController: UITableViewController {
  private var tabBarHidden: Bool? = {
    didSet {
      self.tabBarController?.tabBar.isHidden = tabBarIsHidden ?? true
    }
  }

  private var toolBarIsHidden: Bool? {
    didSet {
      let hidden = toolBarIsHidden ?? true
        self.navigationController?.toolbar.isHidden = hidden
        self.navigationController?.setToolbarHidden(hidden, animated: true)
      }
  }
  ...
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    self.tabBarIsHidden = false
    self.toolBarIsHidden = true
  }
  ...
}

I finally realize that the visibility of bar at the bottom is set in the event of viewWillAppear. At that time, the tableView or scroll view's content insets are set already based on no bar at the bottom. That's why my tableView is behind the bottom bar.

The solution I found is to reset content insets in the event of viewDidAppear:

override func viewDidAppear(_ animated: Bool) {
  // In the event of viewWillAppear, visibilities of tool bar and tab bar are set or changed,
  // The following codes resets scroll view's content insets for tableview
  let topInset = self.navigationController!.navigationBar.frame.origin.y +
    self.navigationController!.navigationBar.frame.height
  let adjustForTabbarInsets: UIEdgeInsets = UIEdgeInsetsMake(
        topInset, 0,
        self.tabBarController!.tabBar.frame.height, 0)
  self.tableView.contentInset = adjustForTabbarInsets
  self.tableView.scrollIndicatorInsets = adjustForTabbarInsets
}

The best approch would be to Embed TabBarController to your ViewController (Editor -> Embed In -> TabBar Controller)and set the bottom of the tableview to be bottom of safe area of viewcontroller. The other ways wont be as perfect as this one.

Related