Android phone full screen (18:9 screen) adaptation guide

Android phone full screen (18:9 screen) adaptation guide

Since the release of Xiaomi MIX 1, more and more so-called "full-screen" mobile phones have been released, such as Samsung S8, Xiaomi MIX2, VIVO X20, Google Pixel2, etc... Beginning in the second half of 2017, "full-screen" will cover a wide range of , as low as the thousand yuan machine level, just like the transition of the mobile phone screen from 720P to 1080P in the past, the wheel of history is rolling forward, unstoppable!

Regardless of how the so-called full screen is defined, as an Android developer, what you are more concerned about is the compatibility of screen adaptation. The full screen was not scary when it first came out, but the scary thing is that some alien full screens appeared later - the kind of aliens that dig out a piece of the screen! The general idea of ​​a full-screen mobile phone is to compress the forehead and chin. The screen ratio is changed from the traditional 16:9 to 18:9, and the screen ratio and the virtual navigation keys in the screen are increased. This article will briefly introduce some of the needs of attention in the full-screen adaptation. things and solutions.

Adaptation Guide

1. Declare the maximum screen aspect ratio
In the application configuration file AndroidManifest.xml, explicitly declare the supported maximum screen aspect ratio (maximum aspect ratio). Where ratio_float is the aspect ratio:
traditional screen: ratio_float = 16/9 = 1.778;
Samsung S8 screen: ratio_float = 18.5/9 = 2.056.
In view of the current full-screen screen ratio, setting ratio_float to 2.1 can be adapted to many full-screen mobile phones.

<meta-data 
  android:name="android.max_aspect"
  android:value="ratio_float" />

然而有一点需要注意的是,在Android 7.0以上Google默认支持了分屏模式,即Manifest文件中配置Activity的android:resizeableActivity默认属性为true,在这种情况下并不需要配置Maximum Aspect Ratio即可自动适配全面屏。如果由于某些原因(UI适配等)禁止了分屏模式,这个时候就要注意了!负责将出现上下黑条的显示效果,奇丑无比!Screens Support 官方文档

二、启动页适配
在做启动优化,解决冷启动白屏的时候,我们往往会为要启动的Activity设置主题为一张背景图。那么问题就来了,以往16:9的的背景图在18:9的屏幕中会有什么表现呢?

淘宝开屏拉伸变形,此图来自小米开发者中心
淘宝开屏拉伸变形,此图来自小米开发者中心

这种情况下就尴尬了,我们知道很多启动页背景都是动态下发的(广告)内容丰富,即使是.9图在这种场景恐怕也难以解决。这点在金立手机上的做法值得一提,看图:


金立全面屏启动页UI适配
金立全面屏启动页UI适配

是好是坏不便多言,但是有兼容性方案总比莫名拉伸好吧!若Android阵营没有一个统一规范,恐怕又要难为开发者、UI设计师了吧!

不能依赖单一厂商的解决方案,只能从Android系统属性出发。考虑到目前大部分全面屏手机只是在高度上拉长,且大多为6.0英寸左右,像素密度对比xxhdpi并没有多大区别,那我们可以在项目中增加一组资源drawable-xxhdpi-2160x1080 、drawable-long 这样解决图片的拉伸问题,当然最好的方法还是用相对布局采用XML的方式,或者.9图的解决方案。

三、虚拟导航键(Navigation Bar)优化
个人觉得虚拟导航键并不是一个好东西,依稀记得HTC被双下巴甚至四下巴支配的恐惧,虚拟导航键总让人出戏。可是全面屏风潮的到来,彻底将正面实体按键拍到了沙滩上。
虚拟导航键系统,桌面美如画,进入到应用里就是傻大粗的黑条,几乎没有几个APP做虚拟导航键的适配,图就不上了,可以参考华为那些机子。。。

虚拟键的样式,此图来自小米开发者中心
虚拟键的样式,此图来自小米开发者中心

总之,要达到一体化的沉浸体验,就应该尽量避免导航键出戏,选择合适的虚拟键样式,保证视觉的统一性。全面屏时代的到来,开发者总该好好管管这虚拟导航键了吧!

虚拟导航键修改方法一: window.setNavigationBarColor (int color)
注意在调用该接口时,需要立一些flag,该接口说明如下:

/**
 * Sets the color of the navigation bar to {@param color}.
 *
 * For this to take effect,
 * the window must be drawing the system bar backgrounds with
 * {@link android.view.WindowManager.LayoutParams#FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS} and
 * {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_NAVIGATION} must not be set.
 *
 * If {@param color} is not opaque, consider setting
 * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and
 * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION}.
 * <p>
 * The transitionName for the view background will be "android:navigation:background".
 * </p>
 */
public abstract void setNavigationBarColor(@ColorInt int color);​

虚拟导航键修改方法二:,在主题中添加以下设置项:

<item name="android:navigationBarColor">要设置的颜色值</item>

注意,该方法在Android5.0以上生效,什么!?都全面屏了肯定上7.0+了啊!推荐!

结语

总的来说,全面屏的到来为沉闷的手机ID设计带来了些惊喜,虽然不少开发者骂娘,但还是应当顺应历史潮流,况且很多情况Android系统早已有适配方案了不是?最后希望本文能为大家做全面屏适配带来些帮助!一起为Android软件生态改善而努力!有更多好用技巧欢迎评论交流!

参考资料:
小米全面屏及虚拟键适配说明
金立18:9全面屏适配说明
全面屏时代 | APP如何快速适配? 这4个关键点你要知道!

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326111376&siteId=291194637