Safe Area Layout Guide Not Working On UITableView's BackgroundView

Question

The issue I'm having is that the label is anchored to the bottom edge of the screen when it should be anchored to the safe area layout guide. which will bring the label above the iPhone line.

Here's the code...

class CustomTableViewController: UITableViewController {

   override func viewDidLoad() {
       super.viewDidLoad()

       tableView.tableFooterView = UIView(frame: .zero)
       tableView.backgroundView = CustomBackgroundView()
   } 

}

.

class CustomBackgroundView: UIView {

   override init(frame: CGRect) {
       super.init(frame: frame)
       setupSubviews()
   }

   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }

   private func setupSubviews() {
       let label = UILabel()
       label.text = "Hello, World!"
       label.textAlignment = .center
       label.translatesAutoresizingMaskIntoConstraints = false

       addSubview(label)

       label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
       label.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor).isActive = true
   } 

}

I've updated the post. Check it out. – dispatchswift Nov 21 '18 at 21:49 — dispatchswift, Nov 21 '18 at 21:49

score 0 · Answer 1 · answered Nov 22 '18 at 09:15

You are seeing this behavior because every UIView has its own SafeAreaLayoutGuide. Per default the SafeAreaLayoutGuide of a generic UIView subclass does not include the Safe Areas that you are looking for. You have to use the SafeAreaLayoutGuide of your table view.

You could do something like this:

class CustomBackgroundView: UIView {

    var safetyAreaBottomAnchor: NSLayoutYAxisAnchor? {
        didSet {
            guard let safetyAreaBottomAnchor = safetyAreaBottomAnchor else { return }
            label.bottomAnchor.constraint(equalTo: safetyAreaBottomAnchor).isActive = true
        }
    }

    private let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupSubviews() {
        label.text = "Hello, World!"
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false

        addSubview(label)

        label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
    } 
}

And then in your UITableViewController do this:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    let customBackgroundView = CustomBackgroundView()
    tableView.tableFooterView = UIView(frame: .zero)
    tableView.backgroundView = customBackgroundView

    customBackgroundView.safetyAreaBottomAnchor = tableView.safeAreaLayoutGuide.bottomAnchor
}

score 0 · Answer 2 · answered Apr 15 '21 at 16:26

For anyone arriving from Google after all these years, to get this to work I had to return the safeAreaLayoutGuide of the superview from my custom view. See below:

class CustomBackgroundView: UIView {
    override var safeAreaLayoutGuide: UILayoutGuide {
        guard let superview = superview else { return UILayoutGuide() }
        return superview.safeAreaLayoutGuide
    }
}

This made all the constraints work as expected. Make sure you don't use the safeAreaLayoutGuide before adding the background view

func setupBackgroundViews()
{
    tableView.backgroundView = customBackgroundView
    anotherView.topAnchor.constraint(equalTo: customBackgroundView.safeAreaLayoutGuide.topAnchor).isActive = true
}

Safe Area Layout Guide Not Working On UITableView's BackgroundView

2 Answers2