IPhone X adaptation (full) and iphone adaptation

IPhone X adaptation (full) and iphone adaptation
Background

The iPhone X bangs machine was released in September 13, bringing a wave of climax to the Science and Technology gala. As a developer, how can I adapt to iPhone X? Will the head of our App also grow? Will the Tabbar be rounded? Let's take a look at the performance of the Meituan App:

At first glance, the figure 1.1 shows good performance, but in Figure 1.2, after the pull-down refresh, our navigation bar was blocked by bangs. The search is also shot. The search Homepage cannot be canceled, and the "popular search area" is also blank. In addition, as shown in Figure 1.3 and Figure 1.4 on the "my Tab" page, the navigation bar cannot be returned, and the three uibarbuttonitems in the upper right corner are also missing. There are many other bugs in the UI, waiting for us to discover and modify them one by one.

For possible problems, Apple provides some suggestions on mongo.apple.com. One of them is HIG (Human Interface Guideline ). In addition, the author of the official WWDC Conference App also gave some experience in adaptation.

Let's see what they say.

HIG part

First, let's take a look at the changes in the size of each model.

This is part of the change in iPhone X compared to other models. The width of the iPhone X is the same as that of the iPhone 8, with an additional 145pt in the vertical direction. This means that the home page can display more content and the 20% vertical space is displayed, A higher value operation space may be available.

Layout

Note that the blue part in Figure 2.2 is included in the area of the displayed content. Therefore, during the design, we should avoid contents being blocked by rounded corners and bangs. Like this:

Shows the coordinate system of iPhone X and the area where the content can be displayed:

Status Bar

The StatusBar height on the iPhone X is higher than that of the previous iPhone. That is to say, if we write a frame layout with a 20pt height, we need to modify it over a large area (tu) to xue ). On the iPhone X, print [[UIApplication sharedApplication] statusBarFrame] to see that the height is 44pt.

"If your App hides StatusBar, you are advised to reconsider. The iPhone X provides more room for users to display in the vertical space, and the status bar also contains information that users need to know, unless the status bar can be hidden to bring extra value to users, otherwise, we recommend that you return the status bar to the user. "

In addition, the height of the StatusBar will not change when you call the iPhone X.

At the bottom of the screen

Without the Home key, the bottom of the iPhone X is a region reserved for system functions-Home Indicator, and the height of this part is 34pt.

"If you have TabBar at the bottom, the Home Indicator background will come from an extension of the TabBar background. If we are a feed stream page, the partial part of the feed stream will be displayed at the bottom ."

It means that if there is a TabBar, the region will extend your barTintColor; otherwise, it will be transparent (refer to Setting ). The reason for this design is to make the indicator clearly visible and tell the user that you can slide this part of the area. Therefore, Apple does not recommend that our UI elements be too close to this area.

SafeArea

The topLayoutGuide/bottomLayoutGuide that appears after iOS 7 is replaced by the safeLayoutGuide concept. All our UI elements should be arranged in these areas to avoid being blocked by various bar (NavgationBar, ToolBar, TabBar, StatusBar.

If AutoLayout is used and safeAreaLayoutGuide is enabled, the layout will automatically add these safelayoutguides. Your view will not exceed this part of SafeArea. As shown in Figure 2.9, if you need to add the Guide area, you can set self. additionalSafeAreaInsets to add the area.

Others

There are other changes, such as the performance of Aspect Ratio on iPhone X;

The regions on both sides of the bangs can respond to different gestures, and it is best not to conflict with their own apps.

Suggestions from Session 201

① If iPhone X is used in xib, you can enable UseSafeAreaLayoutGuides (but this can only be used after iOS 9, depending on the minimum version supported by your App ).

② If the system SearchViewController is used and no gray masked layer is found, try this.

This can be changed because the NavigationBar of iOS 11 is integrated with SearchViewController.

③ The background color of the UITableView and SenctionHeader on the horizontal screen is not the set color.

The cause of this problem is:The UITableView and Cell on the horizontal screen are all the same width as those on the screen, but the ContentView of the Cell is inset to the SafeArea area.

Solution:You can adjust the default behavior of Tableview and change the attributes of contentView (such as inset To SafeArea) To pin the contentview To the edge. The disadvantage is that it will change the content display of the entire cell, in addition, the layoutMargin of contentView is still relative to SafeArea.
The best solution is:Change the backgroundColor of UITableViewHeaderFooterView. backgroundView.

Liu Haicang's initial experience

① Let's take a look at the top of the home page after the refresh. After troubleshooting, this problem belongs"Upgraded status bar series"The solution is to change the fixed 20pt height[[UIApplication sharedApplication] statusBarFrame]. size. height].

② The Position of the input box on the search page is offset. This is because the view hierarchy in the navigation bar of iOS 11 has changed and has no direct relationship with the iPhone X. The view hierarchy in the iOS 11 navigation bar is as follows:

The adaptation method is:Obtain the location and size information of the _ UIButtonBarStackView, and then change the X coordinate of the PFBNavigationBarContainerView.

③ The "my Tab" Page has a gray area. After investigation, it is found that this is the background color of Tableview. That is to say, it is actually the downward offset of Tableview.

The reason for this is:After iOS 11, scrollview has an adjustedContentInset area.

By printing this value, we find that it exactly matches contentoffset. y.

Why is the offset? How is the offset determined?In fact, when the frame of Tableview exceeds the safeArea range, the system will adjust the content position. The system offsets Tableview by setting adjustedContentInset to safeAreaInset..

Note that this adjustedContentInset is the readOnly attribute. You can setTableview. contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNeverTo correct this position. Of course, you can set tableview. contentOffset to offset this value, but we recommend the first one.

④ On the "my Tab" navigation bar, all the buttons on the right have been offset, and thus cannot be clicked. This problem also occurs in the new navigation bar structure view, because the AutoLayout layout is used for the new navigation bar structure, which is not implemented in the conventional UIBarButtonItem method, but a UIBarButtonItem, his customView contains three buttons, all of which are frame la s, resulting in layout problems under AutoLayout.

The normal solution is:Modify to add UIBarButtonItem and UIBarButtonSystemItemFixedSpace one by one. However, this leads to another problem. The trick method that sets the negative width of fixedspace before iOS 11 has expired! For more information, see https://forums.developer.apple.com/thread/80075.

The method here is:We still use the CustomView that contains three mbmbutton methods, and then add constraints respectively. CustomView only needs to be added with width and height. The included buttons are added with left, top, and size.

The following code attempts to fix these problems:

// Offset problem if (@ available (iOS 11.0, *) {self. contentViewController. tableView. contentInsetAdjustmentBehavior = behavior;} // UIBarButtonItem problem if (@ available (iOS 11.0, *) {[messageButtonsContainerView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. size. mas_pointer to (CGSizeMake (themeButton. width + settingButton. width + messageButton. width, 44) ;}]; [themeButton mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (messageButtonsContainerView); make. left. similar to (messageButtonsContainerView); make. size. mas_offset (CGSizeMake (44, 44) ;}]; [settingButton mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (messageButtonsContainerView); make. left. similar to (themeButton. mas_right); make. size. mas_offset (CGSizeMake (44, 44) ;}]; [messageButton mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (messageButtonsContainerView); make. left. failed to (settingButton. mas_right ). offset (-10); make. size. mas_offset (CGSizeMake (44, 44) ;}] ;}uibarbuttonitem * rightBarItem = [[UIBarButtonItem alloc] initWithCustomView: messageButtonsContainerView]; self. navigationItem. rightBarButtonItems = @ [rightBarItem];

Summary

The environment where these problems are found is the simulator of Xcode 9 GM (9A235. There are three types of problems:

As for the Tabbar, we use the system, so we have not found anything strange at present. We hope that the pitfalls we step on will allow you to avoid detours in the adaptation process!

 

Source: https://tech.meituan.com/iPhoneX%E5%88%98%E6%B5%B7%E6%89%93%E7%90%86%E6%8C%87%E5%8C%97.html