TableView Showing Behind Tab Bar

Question

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.

Answer 1

Try setting

self.edgesForExtendedLayout = UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars = NO;
self.automaticallyAdjustsScrollViewInsets = NO;

Inside the tableview controller

Answer 2

Swift 4.x

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

Answer 3

Check the screen shot

Check the under top Bar and Un-checke under Bottom Bar

Answer 4

SWIFT 3

put this inside viewDidLoad of your tableViewController:

self.edgesForExtendedLayout = UIRectEdge()
self.extendedLayoutIncludesOpaqueBars = false
self.automaticallyAdjustsScrollViewInsets = false

Answer 5

Swift 3.0

This is what worked for me. In your Custom ViewController:

override func viewDidLoad() {
    super.viewDidLoad()

    let adjustForTabbarInsets: UIEdgeInsets = UIEdgeInsetsMake(self.tabBarController!.tabBar.frame.height, 0, 0, 0);
    //Where tableview is the IBOutlet for your storyboard tableview.
    self.tableView.contentInset = adjustForTabbarInsets;
    self.tableView.scrollIndicatorInsets = adjustForTabbarInsets;
}

Answer 6

Not to sure I like the solution but it works for me.

With iOS 11 I have no issue, I simply use the following in viewDidLoad():

self.collectionView.bottomAnchor.constraint(self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

However on iOS 10 I need to hack my way like this:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let tabBarHeight: CGFloat = (self.parent?.tabBarController?.tabBar.frame.size.height)!

    if #available(iOS 11.0, *) {

    } else {
        self.collectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -tabBarHeight).isActive = true
    }
 }

Answer 7

This is working for me

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

Answer 8

If any view shows behind a UITabBar you can grab the bottomLayoutGuide and make adjustments at runtime. What I do is have a BaseViewController that all my view controllers inherit from. Then if the tab bar is visible we adjust the view like so:

import UIKit

class BaseVC: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
}

override func viewDidLayoutSubviews() {
    //Ensures that views are not underneath the tab bar
    if tabBarController?.tabBar.hidden == false {
        var viewBounds = self.view.bounds;
        var bottomBarOffset = self.bottomLayoutGuide.length;
        self.view.frame = CGRectMake(0, 0, viewBounds.width, viewBounds.height - bottomBarOffset)
    }
  }
}

Since I don't use storyboards (where you can click a checkbox in IB to fix this problem), this has been the best solution I have found.

Answer 9

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
}

Answer 10

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.

Answer 11

You need to adjust the height of the table view. Just leave 49px at the bottom, as the tabbar height is 49 px. Adjust the height of table view so that it leaves 49px space below it.