Skip to main content

How to deal with iOS Safe Area and set UI For iPhone X


Today, my tester reported one issue related to bottom space in iPhone X. The bottom space of button is appropriate in all the iOS devices except iPhone X. See the below screenshot:-




To solve this issue, I need to take care of safe area. safeAreaInsets and safeAreaLayoutGuide are available after iOS 10 only.

Important points:-

  1. If you need your UI elements to be inside the safe are, then set the constraints between UI element and safe are layout guides.
  2. If you need your UI elements to be extend to the edge of the screen, then set the constraints between UI element and it's super view.


Code snippet to get the bottom space.

if #available(iOS 11.0, *) {

                let window = UIApplication.shared.keyWindow
                let bottomPadding = window?.safeAreaInsets.bottom ?? 0.0
            }






References:-

  • https://medium.com/@kahseng.lee123/how-to-solve-the-most-common-interface-problems-when-adapting-apps-ui-for-iphone-x-44c0f3c80d84
  • https://medium.com/rosberryapps/ios-safe-area-ca10e919526f

Comments

  1. Great Content!! Thank you for sharing this helpful information.Using Android App Development Services, it helps you in building cross platform mobile apps,saves time and cost to build mobile apps on multiple platforms.
    Android App Development Company India

    ReplyDelete

Post a comment

Popular posts from this blog

Vector graphics in iOS

In past, designers had to create multiple versions of the same asset (1x, 2x, 3x) to satisfy multiple screen sizes. Using vector assets can save you time because you only have to generate the asset once. You just need an.xcassets file in your project for storing your images. In there, you can declare image sets to be “Vectors”.
A vector file contains a lot of metadata of an asset that tells the system how to render it's contents, independent of the screen's resolution. This also means that whenever we get larger screen resolutions, Xcode will be able to scale up your images from your already existing vector PDF for you, giving you automatic support for future devices for free.

Steps:-
Select “New Image Set” in your XCAsset.Select the Attributes Inspector in Utilities panel.Under the types drop-down menu, select "Vector"Drag and drop your vector PDFUse the Xcode image catalog image set as you would with any other image. For instance, calling --imageNamed: in code, and pa…

Return multiple values from a function in objective C

We can return tuples in swift as follows:-

func getData()->(Int,Int,Int){//...code herereturn( hour, minute, second)}You can't do that in objective-c. Best option is using parameters by reference. Something like this.

Disabling print for Production In Swift Project

You'll need to set up a compiler flag to use the Swift preprocessor - go to the Swift Compiler - Custom Flags section of Build Settings to set up a -D DEBUG flag:



Then in your code you can define a DLog() function and only print your message if the DEBUG flag is set:
func DLog(message: String, function: String = __FUNCTION__) { #if DEBUG     println("\(function): \(message)") #endif }