Android手机 全面屏(18:9屏幕)适配指南

作者:brucevanfdm

地址:http://www.jianshu.com/p/8d14d2c25138

声明:本文是brucevanfdm原创,已获其授权发布,未经原作者允许请勿转载

前言

从小米MIX 1发布以来,越来越多所谓“全面屏”手机发布,如三星S8,小米MIX2,VIVO X20,Google Pixel2等等...2017年下半年开始,“全面屏”将大范围覆盖,低至千元机水平,就像当年手机屏幕从720P到1080P过渡一样,历史车轮,滚滚向前,不可阻挡!

暂且不论所谓全面屏如何定义,作为Android开发者更多关心的是屏幕适配的兼容性。全面屏刚出来的时候并不可怕,可怕的是后来出现了一些异形全面屏——把屏幕挖掉一块的那种异类!全面屏手机大致思路都是压缩额头与下巴,屏幕比例从传统的16:9变为18:9,提高屏占比以及屏幕内的虚拟导航键,本文将简要介绍全面屏适配中一些需要注意的东西以及解决方案。

适配指南

一、声明最大屏幕高宽比 在应用配置文件AndroidManifest.xml中显式声明支持的最大屏幕高宽比(maximum aspect ratio)。其中 ratio_float 为高宽比: 传统屏幕:ratio_float = 16/9 = 1.778 ; 三星S8屏幕:ratio_float = 18.5/9 = 2.056。 鉴于目前全面屏屏幕比例,将ratio_float设置为2.1即可适配一众全面屏手机。

<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图在这种场景恐怕也难以解决。这点在金立手机上的做法值得一提,看图:

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

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

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

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

虚拟导航键修改方法一:

window.setNavigationBarColor (int color): https://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)

注意在调用该接口时,需要立一些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软件生态改善而努力!有更多好用技巧欢迎评论交流!

原文发布于微信公众号 - Android先生(cyg_24kshign)

原文发表时间:2017-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏携程技术中心

RN沙龙 | 那些携程火车票业务在RN实践中踩过的坑

姚瑞琼,前端程序媛一枚。2014年毕业后加入携程火车票事业部,今年年初起至今,主要负责React Native方案在火车票业务线的实践,先后参与并负责汽车票RN...

49990
来自专栏葡萄城控件技术团队

2017年 JavaScript 框架回顾 -- 后端框架

本文是2017年 JavaScript 框架回顾系列的最后的一篇文章,主要介绍 JavaScript 的后端框架情况。 ? 从上图中可以看到,Express 作...

35930
来自专栏SEO

【思考】百度新推出“网页标题作弊详解”

36480
来自专栏无原型不设计

给你灵感的23个优秀线框原型图示例

如何在产品初始阶段以最快的方式展示设计思路?我想大多数的UX/UI设计人员都会倾向于快速构建一个线框原型图。这的确是一个非常明智的选择。那么问题来了,设计师如何...

85860
来自专栏布尔

IE10预览:HTML5初探 翻译自Sencha

IE10预览:HTML5初探 在过去的几年里我们做了一系列测试来评估主要的移动平台对HTML5应用的支持。直到现在,我们仍旧没有花时间在Windows phon...

20880
来自专栏问天丶天问

Jquery使用echarts饼图

16510
来自专栏非著名程序员

吐血推荐:这个开源工具你值得拥有,让你轻松面对各种调试

前天晚上分享了一篇国人把 GitHub 玩出新高度的文章,培训机构的学员为了找工作买卖 GitHub 账号,很多人说:其实面试的时候,只要深度一点的询问,一问就...

8310
来自专栏IT派

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

35350
来自专栏项勇

笔记60 | Android控制音量与音频播放的学习

26740
来自专栏java一日一条

为Web开发者准备的10个最新工具

Web开发设计是一个很有前途的职业。然而,这其中也有许多挑战。现在的企业和品牌正在朝网络进军。这给了web开发者非常多的机会来展示他们的技能,并在他们的职业上取...

14830

扫码关注云+社区

领取腾讯云代金券