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

Play youtube video in iOS app

Youtube video can be played in iOS app using webview. MPMoviePlayerController is not able to open youtube video automatically. Integrate the below script to show thumbnail, clicking on it the video will play in full screen.


NSString *url = @"https://www.youtube.com/embed/8aMHGC6A5zc"; NSString* embedHTML = @"\     <html><head>\     <style type=\"text/css\">\     body {\     background-color: transparent;\     color: white;\     }\     </style>\     </head><body style=\"margin:0\">\     <iframe id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \     width=\"%0.0f\" height=\"%0.0f\" frameborder=\"0\" feature=player_detailpage allowfullscreen></iframe>\     </body></html>"; NSString* html = [NSStringstringWithFormat:embedHTML, url, self.view.frame.size.width, 200.0];
    [webviewloadHTMLString:html baseURL:nil];


///*******************A…

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 }

Collection view inside table view with NO vertical scrolling

UICollectionView inside a UITableViewCell — dynamic height?
Given the following structure: TableViewTableViewCellCollectionViewCollectionViewCellCollectionViewCellCollectionViewCell[...variable number of cells or different cell sizes]
The solution is to tell auto layout to compute first the collectionViewCell sizes, then the collection view contentSize, and use it as the size of your cell. This is the UIView method that "does the magic": -(void)systemLayoutSizeFittingSize:(CGSize)targetSize      withHorizontalFittingPriority:(UILayoutPriority)horizontalFittingPriority            verticalFittingPriority:(UILayoutPriority)verticalFittingPriority






Full code is available here to download.
Thanks to this awesome answer.