Creating a UIButton programmatically on iPhone X but safe area issue - swift

Question

I created a UIButton in the middle of a TabBarController but it is not correctly displayed on the iPhone X because of its safe areas in the bottom of the phone.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//Frame mic button
micButton.frame = CGRect.init(x: self.tabBar.center.x - 62, y: self.view.bounds.height - 94, width: 124, height: 124)
micButton.layer.cornerRadius = 62
}
What is the correct way for drawing this UIButton without touching the safe areas.

Answer 1

Safe zones, specifically a safeAreaLayoutGuide, relates to constraints.
There are various ways to code auto layout constraints (Visual Format Layout or VFL, explicit - and wordy - NSLayoutConstraints) but my preference is to use "layout anchors".
The basic idea for any layout is position and size. Give something a width/height, and x/y axis value and you've got it. Pretty much like frames.
So the basic "anchor" way of laying out this:
micButton.frame = CGRect.init(x: self.tabBar.center.x - 62, y: self.view.bounds.height - 94, width: 124, height: 124)
Would be this:
let micButton = UIButton()
micButton.translatesAutoresizingMaskIntoConstraints = false
micButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -94).isActive = true
micButton.widthAnchor.constraint(equalToConstant: 124).isActive = true
micButton.heightAnchor.constraint(equalToConstant: 124).isActive = true
micButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: -62).isActive = true
Some notes:
Yes, you do not dictate a frame. In fact, you just initialize things when possible.
Since you aren't using IB, you need to set the auto resize mask flag to false. This is something even the most experienced developers sometimes forget. (Doing so usually means you have "unexpected" results ranging from not seeing something to seeing it misplaced.)
I've set the bottom or Y axis, the width and height, and finally the X axis.
While it's more code than using a frame, what you gain is consistency across screen sizes.
But you want more - you need to code for iPhone X safe zones. You have two tools Apple has given you: layoutMarginsGuide and safeAreaLayoutGuide. The former was introduced in iOS 9 (along with the more simple layoutGuide and layout anchors) while the latter was introduced in iOS 11.
[My assumption, probably a safe one, is that all iPhone X devices will run iOS 11 or later. Since a "safe area" is really only needed for this device, the following is what you need.]
Margins work with all devices for leading/trailing (or horizontal) edges. They also work for top/bottom (or vertical) edges too. But for iPhone X you need to be concerned with a different top/bottom, thus the "safe area".
let layoutGuideTop = UILayoutGuide()
let layoutGuideBottom = UILayoutGuide()
view.addLayoutGuide(layoutGuideTop)
view.addLayoutGuide(layoutGuideBottom)
let margins = view.layoutMarginsGuide
view.addLayoutGuide(margins)
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
layoutGuideTop.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0).isActive = true
layoutGuideBottom.bottomAnchor.constraintEqualToSystemSpacingBelow(guide.bottomAnchor, multiplier: 1.0).isActive = true
} else {
layoutGuideTop.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
layoutGuideBottom.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor).isActive = true
}
The code snippet above will yield the correct top/bottom margin variables (layoutGuideTop and layoutGuideBottom) based on the iOS version. From there you can adjust your bottom anchor to:
micButton.bottomAnchor.constraint(equalTo: laytouGuideBottom, constant: -94).isActive = true
Which should set micButton to be 94 points above the bottom safe area.
Here's a few links that should help you with layout anchors and guides:
Layout Anchors
Layout Guides
Safe Area Layout Guides
EDIT:
One last note about constraints. Since you aren't relying on frame values, all of this code is best placed in viewDidLoad, because the layout engine will determine everything appropriately (and viewDidLayoutSubviews may be called more than once).

Answer 2

Try this :
Add in UITabViewController's class
micButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(micButton)
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
micButton.centerXAnchor.constraint(equalTo: guide.centerXAnchor).isActive = true
micButton.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
micButton.heightAnchor.constraint(equalToConstant: 64).isActive = true
micButton.widthAnchor.constraint(equalToConstant: 64).isActive = true
} else {
NSLayoutConstraint(item: micButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0).isActive = true
NSLayoutConstraint(item: micButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: 0).isActive = true
micButton.heightAnchor.constraint(equalToConstant: 64).isActive = true
micButton.widthAnchor.constraint(equalToConstant: 64).isActive = true
}

Answer 3

Thanks to #dfd guidance this was the way i did it as a work around. I just checked if the phone using the app has the same screen size as iPhoneX and i just changed in the constraints.
override func viewDidLoad() {
super.viewDidLoad()
//Frame mic button
micButton.frame = CGRect.init(x: self.tabBar.center.x - 62, y: self.view.bounds.height - 94, width: 124, height: 124)
micButton.layer.cornerRadius = 62
micButton.translatesAutoresizingMaskIntoConstraints = false
micButton.setBackgroundImage(#imageLiteral(resourceName: "micIcon"), for: .normal)
//Add to tabbar view
self.view.insertSubview(micButton, aboveSubview: self.tabBar)
if UIDevice().userInterfaceIdiom == .phone {
if UIScreen.main.nativeBounds.height == 2436 {
//iPhoneX Device
micButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
micButton.widthAnchor.constraint(equalToConstant: 124).isActive = true
micButton.heightAnchor.constraint(equalToConstant: 124).isActive = true
micButton.centerXAnchor.constraint(equalTo: self.tabBar.centerXAnchor, constant: 0).isActive = true
} else {
//Not an iPhoneX Device
micButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 25).isActive = true
micButton.widthAnchor.constraint(equalToConstant: 124).isActive = true
micButton.heightAnchor.constraint(equalToConstant: 124).isActive = true
micButton.centerXAnchor.constraint(equalTo: self.tabBar.centerXAnchor, constant: 0).isActive = true
}
}
// Do any additional setup after loading the view.
}

Answer 4

This code help you to solve your problem.
micButton.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor).isActive = true