iPhone X Home Bar
Jan 23 2018

What to Do with the iPhone X Home Bar Indicator

Apple released their latest and greatest mobile phone the iPhone X (iPhone 10) and along with it a new software-based home button. For users, this introduces a very new and fresh experience with an edge to edge display unencumbered by any physical buttons. However, it also introduces many new possibilities from a software engineering perspective as well.

As iOS developers though, what are we to do with this new, software-based home button? If you have updated your apps already and tested them with the iPhone X, as we’re sure you have, then you will have noticed that Apple has cleverly designed the indicator to automatically present itself in an ideal manner for any situation. To this point, out of the box, it just works.

So why are we even talking about this? Well, there are some things that we can control about the indicator, and it’s helpful for developers to know about them.

Before moving forward, it should be noted that the Home Bar Indicator is an essential and core user interface element and should always be clearly and readily available for users to access it.

Auto Hide

The first thing Apple provides us with is a way to have the indicator fade out when the display hasn’t been touched for a little while. This is called “Auto Hide” and should be used sparingly and only for times when people are not interacting with the display often, such as watching a video.

Implementing this bears a striking resemblance to controlling/editing the status bar on iOS. For example, one way of hiding the home indicator is: 

[/vc_column_text]

class ViewController: UIViewController {
override func prefersHomeIndicatorAutoHidden() -> Bool {
return true 
}
}

Additionally, there is a new function that can be called to tell UIKit to check if Auto Hide should be updated in the UI or not.

setNeedsUpdateOfHomeIndicatorAutoHidden()

An example usage of this could be to let a specific View Controller manage Auto Hide itself by calling setNeedsUpdateOfHomeIndicatorAutoHidden() to update the UI manually.

class MyViewController: UIViewController {
var shouldHideHomeBarIndicator = false
override func prefersHomeIndicatorAutoHidden() -> Bool {
return shouldHideHomeIndicator
}
func myFunction() {
self.shouldHideHomeBarIndicator = true
self.setNeedsUpdateOfHomeIndicatorAutoHidden()
}
}

Finally, we can also let child view controllers dictate what the value should be. This will pass along the responsibility for determining if Auto Hide should be enabled or disabled to a child view controller. To defer you simply:

override func childViewControllerForHomeIndicatorAutoHidden() -> UIViewController? {
return myChildController
}

If you do defer to a child view controller, it will then be the child view controller’s responsibility to implement prefersHomeIndicatorAutoHidden().

class ChildViewController: UIViewController {
override func prefersHomeIndicatorAutoHidden() -> Bool {
return true 
}
}

Edge Protection

If your app or game requires users to swipe at the very bottom of the screen where the home indicator normally sits, then you may want to handle this by enabling Edge Protection. This will give the indicator a more subtle appearance and will change the behavior where 2 swipes are required to initiate home button. Apple warns that because this leads to inconsistent user experience, it should be used only when absolutely necessary.

override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {
return UIRectEdge.bottom
}

See more at https://developer.apple.com/documentation/uikit/uiviewcontroller/2887512-preferredscreenedgesdeferringsys

 

Additionally, to learn more about what to do with the Home Bar Indicator, see WWDC session 801 for 2017. https://developer.apple.com/videos/play/fall2017/801/

Get App Development Help from Five Pack Creative

At Five Pack Creative, we specialize in mobile app development for all platforms, including iOS. If you have questions about your app, or need help launching it, contact us today to learn how we can assist you!

[/vc_column]
[/vc_row]

0 Comments
Share Post
No Comments

Post a Comment