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][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516661488371{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516662356618{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

setNeedsUpdateOfHomeIndicatorAutoHidden()

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516661329712{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

class MyViewController: UIViewController {
     var shouldHideHomeBarIndicator = false

     override func prefersHomeIndicatorAutoHidden() -> Bool {
          return shouldHideHomeIndicator
     }

     func myFunction() {
          self.shouldHideHomeBarIndicator = true
          self.setNeedsUpdateOfHomeIndicatorAutoHidden()
     }

}

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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:

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516717384021{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516717515394{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”20″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1516717697920{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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_text][vc_column width=”1/6″]

© Five Pack Creative 2008 - 2019

Let’s Talk

info@fivepackcreative.com

(972) 377-0023

Frisco, TX  |  Tulsa, OK  |  Wayne City, IL

© Five Pack Creative 2008 - 2019

Let’s Talk

info@fivepackcreative.com

(972) 377-0023

Frisco, TX  |  Tulsa, OK  |  Wayne City, IL