<转> 你已经知道怎么适配iPhone X了,那么Android全面屏呢?

原文地址:https://mp.weixin.qq.com/s/HhLaWrub-QIvY-9cElo7XQ


小编最近入手了一台小米 MIX 2,单看手机外表,觉得很惊艳,因为一眼望去,手机都是屏,但是使用过程却有一个小问题,让我很不舒服,就是由于有些应用没有和全面屏适配,导致在使用过程中屏幕上下方都有黑框,所以小编特地去搜集了一些资料以解决这个问题。

苹果今年发布的 iPhone X 比全面屏多了一个“刘海”,不过苹果有特别针对“刘海屏”给出了适配方案,详情请跳转阅读 iPhone X 交互设计官方指南。但是与苹果统一生态不同的是,国内的安卓市场碎片化十分严重,这让 Android 软件开发工程师叫苦不迭。苹果今年发布的 iPhone X 比全面屏多了一个“刘海”,不过苹果有特别针对“刘海屏”给出了适配方案,详情请跳转阅读 iPhone X 交互设计官方指南。但是与苹果统一生态不同的是,国内的安卓市场碎片化十分严重,这让 Android 软件开发工程师叫苦不迭。

什么是全面屏手机?

该怎么定义全面屏手机呢?小米最初也只是对其有一个抽象的定义「正面几乎全是屏幕,仿佛握着一块透明玻璃」,全面屏顾名思义就是一整面都是屏幕,理想中的全面屏就是达到 100% 的屏占比,同时能够满足当前的日常需求,如摄像头,听筒、指纹解锁等。但随着 iPhone X 的出现,有越来越多的人都在争论“全面屏”,认为有刘海就谈不上无边框,甚至大家开始疑问全面屏的真正含义。

根据目前的技术水平和业内大部分人的说法,认为目前的全面屏手机要同时符合两个条件才能称为真正的全面屏:

分辨率大于 16:9

屏占比大于 80%

例如在业内率先提出全面屏概念并完全去掉机身正面半顶部边框设计的的小米 MIX,它的屏幕纵横比为 17:9,今年小米推出的 MIX 2 屏幕纵横比为 18:9。

从人体工程学角度分析,18:9 的比例更适合用户单手持握,更重要的是,全面屏的高屏占比可以给用户在游戏和视频观看上带来极致的视觉体验。然而,市面上很多厂商却因此偷换概念,认为手机配备 18:9 的比例屏幕就是全面屏,故在手机设计上只保留了 18:9 的比例,而边框依然宽大,这显然忽视了全面屏最本质的特征。
目前,业内较为认可的全面屏手机主要有以下几种:

目前,业内较为认可的全面屏手机主要有以下几种:


图片.png

移动应用适配全面屏情况

640.jpg

全面屏适配方案

由于全面屏手机在追求更小的边框设计、更高的屏占比,这些变化导致了手机发生两种变化,即更大的屏幕纵横比和导航键变成了虚拟键,所以应从这两个方面进行适配。

一.声明 Maximum Aspect Ratio

随着大量的手机厂商将目光投向全面屏,为了顺应市场需求,谷歌向开发者提供了官方的 Android 全面屏适配指南。


640.jpg

左:18.5:9 设备上的最大纵横比设为16:9 的APP
右:18.5:9 设备上最大纵横比设为18.5:9 以上的APP

  1. 在 AndroidManifest.xml 中可做如下配置:
    <meta-data
            android:name="android.max_aspect"
            android:value="ratio_float" />

其中 ratio_float 为纵横比,官方建议设为 2.1 或更大,因为目前市场上出现的Android全面屏手机屏幕纵横比最大的为三星的 18.5:9=2.0556,但是如果以后要是出现纵横比更大的手机,设置值就要更大。

  1. 若没有声明该属性,而且android:resizeableActivity也为 false的话,则应用支持的应用的最大纵横比的默认值为 1.86,小于 2.0556,即无法支持全面屏,屏幕的上下就会留有黑框,如上图左。

二. 怎样防止图片变形

当使用 layout 布局实现界面类 APP 时,容易出现图片被拉伸的情况,如打开淘宝的页面就会变成如下所示:


640.jpg

对于这种情况,解决的办法是:

  • 使用相对布局设计界面
  • 为对应的分辨率提供相应布局、图片等资源(drawable-xxhdpi-2016x1080、drawable-long 等)
  • 使用颜色填充布局、.9 图片填充背景

三.虚拟导航键设置

为了保证虚拟键和 App 的界面风格一致,应注意设置虚拟键颜色与主题协调,所以在进行虚拟键的设置时,要注意以下几点:

  • 使用沉浸式虚拟键时,用原生标准方法设置虚拟按键的背景颜色;
  • 在夜间模式和主题切换的时候,重新设置一下虚拟按键背景颜色;
  • 看图界面使用全屏布局,并设置半透明虚拟按键背景。

具体操作如下:
根据金立18:9 全面屏虚拟键的适配说明,具体的设置虚拟键背景色的方法有:

  • 方法 1:在主题中添加以下设置项:
<item name="android:navigationBarColor">要设置的颜色值</item>
  • 方法 2:通过使用 Window 类的 setNavigationBarColor API 进行控制。
    注意,要想设置虚拟按键背景色生效,必须要设置 FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS 并且不能设置 FLAG_TRANSLUCENT_NAVIGATION,即要先执行:
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_ BACKGROUNDS);

例如:

getWindow().setNavigationBarColor(Color.TRANSPARENT); // 设为透明
getWindow().setNavigationBarColor(Color.BLACK); // 设为不透明
getWindow().setNavigationBarColor(0x80000000); // 设为半透明(Color 类中没有半透明的常量定义,同时暂不考虑修改框架代码,所以使用的具体数值)

四. 修改虚拟键的样式

640.jpg

调用以下接口即可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);

相关文献:
谷歌官方全面屏适配指南
小米全面屏及虚拟键适配说明
金立全面屏底部虚拟按键适配

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,295评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,928评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,682评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,209评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,237评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,965评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,586评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,487评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,016评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,136评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,271评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,948评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,619评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,139评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,252评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,598评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,267评论 2 358