iPhone X - Set the color of the area around home indicator

Question

I'm pretty much new to Xcode when trying to align a sheet to the safe area of iPhone X, it leaves a transparent area below the sheet.

Is there a way to set the fill of that area w/o expanding the sheet or align outside of the safe area?

Answer 1

Yes, it's not a good idea but can be a solution to your problem.

Follow this steps:

• Enable 'Safe Area Layout'
• Create/add a view (ie name it bottomPaddingView) (Programtically or using storyboard) with background color, same as your sheet color.
• Position it (using following constraints - following constraints are not a code structure, but just showing a constraint/anchor relationship)
  - bottomPaddingView.bottom = self.view.bottom
  - bottomPaddingView.trailing = self.view.trailing
  - bottomPaddingView.leading = self.view.leading
  - bottomPaddingView.top = self.view.safeAreaLayoutConstraint.bottom // If you've enabled 'Safe Area Layout'
  - or bottomPaddingView.top = self.view.bottomLayoutguide // If you've not enabled 'Safe Area Layout'

Now hide/unhide your bottomPaddingView with respect to actionship visibility with fade animation.

Answer 2

Here is my tiny extension. If anybody can suggest an improvement to not access added view by "magic number" tag - welcome!

extension UIViewController {

private static let insetBackgroundViewTag = 98721 //Cool number

func paintSafeAreaBottomInset(withColor color: UIColor) {
    guard #available(iOS 11.0, *) else {
        return
    }
    if let insetView = view.viewWithTag(UIViewController.insetBackgroundViewTag) {
        insetView.backgroundColor = color
        return
    }

    let insetView = UIView(frame: .zero)
    insetView.tag = UIViewController.insetBackgroundViewTag
    insetView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(insetView)
    view.sendSubview(toBack: insetView)

    insetView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    insetView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    insetView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    insetView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

    insetView.backgroundColor = color
}

}