美文网首页UIAndroid开发经验谈Android开发
<转> 你已经知道怎么适配iPhone X了,那么A

<转> 你已经知道怎么适配iPhone X了,那么A

作者: 吴蜀黍 | 来源:发表于2017-12-12 09:53 被阅读137次

    原文地址: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);
    

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

    相关文章

      网友评论

        本文标题:<转> 你已经知道怎么适配iPhone X了,那么A

        本文链接:https://www.haomeiwen.com/subject/jijgixtx.html