Taking notes on various iPhone x adaptations (super comprehensive)

Time:2020-10-26

preface

Unlike previous iPhones, this time, the iPhone x uses the popular full screen design. The resolution and scale of the screen are both adopted by apple for the first time, and there is also a “chic Bang”. This requires the existing app to re adapt the iPhone X.

So the arrival of iPhone x, amazing is the fruit powder, bitter is the app ape. Today, I upgraded to xcode9.0 and ran the project. The so-called full screen iPhone x, but page does not seem to have a full screen. Therefore, according to the previous adaptation experience, this problem has been initially solved. The record is as follows for future needs.

Before app page adaptation

Before adaptation

适配前.gif

Problem: app is not displayed in full screen

terms of settlement

Add an and to launchimageiPhone XRelated startup image

*Image size: 1125 * 2436

* Contents.json The code is as follows


{
 "extent" : "full-screen",
 "idiom" : "iphone",
 "subtype" : "2436h",
 "filename" : "1125_2436.png",
 "minimum-system-version" : "11.0",
 "orientation" : "portrait",
 "scale" : "3x"
}

After adaptation

适配后.gif

Page layout details

Safe Area

motivation

IPhone x cancels the home key and realizes high screen proportion, so the default view area is full screen

There are rounded corners around the screen, bangs at the top and gesture areas at the bottom

Top navigation bar

nav_area.png 

*Attention: navigation bar height is 44 + 44

Bottom gesture area

tabbar_gesture_area.png

The safe area is shown in the following figure (red area)

safe_area.png

Safe area size vertical screen


▿ UIEdgeInsets
 - top : 44.0
 - left : 0.0
 - bottom : 34.0
 - right : 0.0

Horizontal screen


 - top : 0.0
 - left : 44.0
 - bottom : 21.0
 - right : 44.0

Points for attention in automatic layout

  • Before ios11, when we layout, the top and bottom of views generally referred to the top layout guide and bottom layout guide
  • After ios11, those two references were obsolete and replaced by safe area.
  • Minimum support required for safe areaiOS9.0

safe_area_layout_guide.png

layout_safe_area.png

safe_area_miniOS.png

For automatic layout of top or bottom attributes related to the parent view, safe area should be referenced. (previously, the default is superview. Of course, if the product allows, that’s another thing.)

An example of selecting a safe area layout is as follows:

选择SafeArea.png

An example of not selecting a safe area layout is as follows:

未选择SafeArea.png

Some people on the Internet have seen black iPhone x, saying that they can’t play games such as king’s glory with it. The reason is that they may not see how much money they have or that the push tower button and the signal button are gone. It’s estimated that they are worried about this! Before the iPhone x is sold, game manufacturers will definitely do the adaptation. The proportion of high screen will only improve the game experience and will not cause such serious visual problems.

Before and after adaptation, the effect picture is as follows:

SafeArea对比效果图.gif

Xcode9 adaptation

WKWebViewJavascriptBridge

//Original address: https://github.com/marcuswestin/WebViewJavascriptBridge/issues/278
- (void)webView:(WKWebView *)webView
didFailNavigation:(WKNavigation *)navigation
 withError:(NSError *)error {
 // ……
 //There is a bug in wkwebview javascriptbridge. M after Xcode is upgraded to 9
 //You need to add return after "decisionhandler (wknavigationactionpolicycancel);", otherwise it will crash.
 //If you don't upgrade Xcode, no problem.
 decisionHandler(WKNavigationActionPolicyCancel);
 return;
}

Some pages fit iPhone x

Pages with buttons at the bottom

Before adaptation

适配前

The bottom constraint is as follows:

适配前-约束

After adaptation

适配后

The bottom constraint is as follows:

适配后-约束

Viewsafereainsetsdidchange of controller life cycle

  • viewDidLoad
  • viewWillAppear
  • viewSafeAreaInsetsDidChange(NEW
  • viewWillLayoutSubviews
  • viewDidAppear

You can set the safe area after viewsafeareainsetsdidchange


if #available(iOS 11.0, *) {
 self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 0, 34)
}

summary

This is all the content of this article. I hope that the content of this article will have a certain reference learning value for your study or work. If you have any questions, you can leave a message for communication. Thank you for your support for developeppaer.

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]