Original link: https://juejin.im/post/5acef004f265da23a2297c71
1. Introduction
Apple has been leading the trend in design, and since the release of the iPhone X, "Liu Haiping" has been controversial. But no matter what you do, Android will also enter the ranks of "Liu Haiping", especially after the release of Android P, it also supports the top groove screen design from the system level.
Many manufacturers are also gradually launching mobile phones with "Liu Haiping" design, the more common ones in China are OPPO R15 and Huawei P20.
The screen is different, and there are some adaptation problems. Today, let's talk about Android's "Liu Haiping" and how we can adapt it.
2. Background introduction of Liu Haiping
2.1 Background introduction
The appearance of Liu Haiping, I think everyone should have a concept, but the implementation methods of Liu Haiping of different manufacturers are also different, which requires a concept first.
As far as the current market situation is concerned, it will be divided into two categories, one is the standard Android P Api, and the other is the special adaptation made by the manufacturer for the system below Android P.
For example: Huawei P20 adopts the Android P standard Api method, and OPPO R15 is different, it has its own adaptation Api.
2.2 Those that need to be adapted individually
Even if Liu Haiping is added, you can also find that most of them are "cut" areas of the status bar, so there are three situations.
- Pages with a status bar will not be affected by Liu Haiping.
- If the full screen is not adapted to Liu Haiping's page, the system will cut the Liu Haiping area, so that the overall UI page will be moved down to avoid the display of Liu Haiping.
- The full screen has been adapted to Liu Haiping's pages, and it can be compatible with Liu Haiping to achieve a true full-screen display.
The differences between these methods will be explained separately later.
2.3 Early access to Android P
When there is no device corresponding to the system at hand, the emulator is a good way. Recently, Google has also released the Android P emulator. Another way is to find some platforms that support real machine cloud testing and rent a remote one that you need. Equipment is also a solution.
I choose the Android P emulator here. If you need to update the SDK yourself, just download the update without a brain.
Most of the notch area of the bangs is to leave an area for the camera or other sensors. On devices or simulators without bangs, you can enable Liu Haiping support through "Simulate a display with a cutout" in the developer options.
If you try all the modes, you will find that the bangs of Liu Haiping, on Android P, have various styles, not uniform.
2.4 Adaptation of Liu Haiping
2.2 It is also clear that the cutting area of Liu Haiping exists on the status bar, so on a page with a status bar, we do not need special treatment, and the system will handle it for us.
For full-screen pages, separate processing is required. Here, I simply made a full-screen page, and each horizontal bar is of equal width so that you can see the difference in layout.
From left to right are: turn off Liu Haiping, turn on Liu Haiping but not support, and adapt Liu Haiping.
For a full-screen page, when it does not support Liu Haiping and encounters Liu Haiping, it will cause the UI to sink. If this is not a list layout, the controls at the bottom will be blocked.
For example the following situation:
There are also some effects of areas blocked by bangs, which are mainly avoided by UI designers. Do not design operable areas where bangs may be cut, affecting user operations.
3. Technical adaptation Liu Haiping
Having said that, in the end we still need to use technology to adapt Liu Haiping. Android P's Liu Haiping has standard APIs for adaptation. For some manufacturers' own Liu Haiping devices, such as OPPO R15, they need to follow its development documents for individual adaptation.
Android P provides a dedicated Api for the latest Liu Haiping: DisplayCutout.
3.1 Turn on Liu Haiping
When we are on a full-screen page, we need to enable support for Liu Haiping separately. The adaptation solution provided by Google can set whether to use the Liu Haiping area in full-screen mode.
WindowManager.LayoutParams lp
=getWindow().getAttributes();
lp.layoutInDisplayCutoutMode =
WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS;
getWindow().setAttributes(lp);
The new layout property layoutInDisplayCutoutModecontains three optional modes,
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS = 1;
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT = 0;
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER = 2;
3.2 The height of Liu Haiping
In full-screen mode, we need to have a way to obtain the height of the groove of Liu Haiping, so that we can leave a safe distance when designing and laying out.
Although Google requires that the groove of Liu Haiping must be consistent with the height of Liu Hai, and Liu Haiping is hidden in the status bar, so there is an idea to directly obtain the height of the status bar to judge the layout outside the bangs. safe area.
However, Android P has reserved a standard Api for measuring the groove of Liu Haiping: DisplayCutout.
The groove of Liu Haiping is in the middle of the screen, so only the result returned by the getSafeInsetTop()method is what we need, while other getSafeInsetXxx()methods directly return 0.
view.postDelayed(new Runnable() {
@Override
public void run() {
DisplayCutout displayCutout = view.getRootWindowInsets().getDisplayCutout();
Log.i("cxmyDev", "SafeInsetBottom:" + displayCutout.getSafeInsetBottom());
Log.i("cxmyDev", "SafeInsetLeft:" + displayCutout.getSafeInsetLeft());
Log.i("cxmyDev", "SafeInsetRight:" + displayCutout.getSafeInsetRight());
Log.i("cxmyDev", "SafeInsetTop:" + displayCutout.getSafeInsetTop());
}
}, 100);
The results obtained, you can also look at:
I/cxmyDev: SafeInsetBottom:0
I/cxmyDev: SafeInsetLeft:0
I/cxmyDev: SafeInsetRight:0
I/cxmyDev: SafeInsetTop:112
3.3 Non-standard APIs
Manufacturers like OPPO, the way to realize Liu Haiping, is not done according to the standard of Android P, it completely modified the way of realizing Liu Haiping. Fortunately, all of them will provide complete adaptation documents, which requires us to directly read the development documents provided by them for adaptation.
Oppo's Liu Haiping adaptation document:
https://open.oppomobile.com/wiki/doc#id=10139
For OPPO, the height of its bangs is fixed, which is 80px.
To determine whether the current device is Liu Haiping, the corresponding API is also provided, which can be obtained by the following methods.
context.getPackageManager().hasSystemFeature(“com.oppo.feature.screen.heteromorphism”)
Return true is Liu Haiping, but this method can only identify Liu Haiping supported by the OPPO brand.