美文网首页ITBOX架构
Android虚拟按键的适配问题

Android虚拟按键的适配问题

作者: hackware | 来源:发表于2016-08-07 15:36 被阅读8083次

    新开了 <<Android Tips>> 文集,这个文集主要分享一些短小、简单实用的小技巧。希望大家喜欢。


    最近几天逛博客时,赶巧遇到了好几个人在谈Android的虚拟按键适配,问题大概是这样的:

    有不少手机,比如华为的大部分手机,Nexus 等都是不带实体按键的,取而代之的是虚拟按键,学名叫 NavigationBar。NavigationBar 显示时会占用一定的屏幕高度,使得 Activity 实际的布局高度变窄了,如果 Activity 中的视图太高,则视图的底部会被 NavigationBar 切掉(遮挡)。

    我有点好奇,为什么大家普遍在这个问题上纠结。其实,我并不把它看成是一个技术问题。而应该是一个对设计稿的理解问题。

    设计师在设计视觉稿的时候,一般会考虑预留出状态栏区域,将除状态栏以外的区域作为设计区域。但她们基本不会考虑 NavigationBar。视觉稿中底部的一些 UI 元素,往往是通过一些 marginTop 来让它们看起来在底部

    试想一下,如果我们在实现的时候,如果完全按照视觉稿中的 marginTop 去做竖向布局,则在带有 NavigationBar 的手机上,实际可用的布局高度小于视觉稿中的设计高度时,超出部分的内容就会被切掉,也就出现了所谓的适配问题。贴一个一般公式:

    设计高度 = 屏幕高度 - 状态栏高度
    布局高度 = 屏幕高度 - 状态栏高度 - 虚拟按键高度

    要解决这个问题,其实很简单,我说过,这不是一个技术问题,因此不必使用 fitsSystemWindows 属性,也避免了副作用。只需要在布局时,正确理解设计师的意图,比如,如果一个按钮在最底部,你应该用 layout_gravity="bottom" 而不是用 marginTop 或者其他方式来把它撑到底部。

    一个中心思想是:尽可能的从下往上,而非从上往下布局。不要盲目的完全按照视觉稿中的尺寸去布局,应该区分出不同视觉元素的重要性,优先保证最上方和最下方的元素正确显示,至于中间的元素,多多用相对布局或是weight属性吧。

    好了,周末愉快。


    额,貌似这篇文章所讲述的内容和大家所期望的不是同一个东西。

    相关文章

      网友评论

      • 涟漪_7cb9:什么鬼?这文章审核都能通过的 ?
      • 对面的你:呵呵 simple
      • JS_XiaoShu:特地登录来说你一下,看你的文章,我打人的心都有了。没有从根本上解决问题
      • 蜀汉玫瑰:哥。。。我服,但是你说的真的没什么鸟用啊~~~
      • pdog18:请问下博主,如果遇到这样的情况你会怎么解决呢?
        同样的720p手机上,oppo 小米上主页显示是整个页面,而在华为上,界面元素摆放不下,需要向下滑动scrollview一段距离才能显示(虽然我这里有一个scrollview但是在其他手机上基本使用不到)

        唯独在华为手机上,因为这个虚拟按键,我这个界面上底部tab会遮盖住原本应该显示在底部tab上方的元素。如果为了办到华为手机也能全屏显示界面元素的话,那么就会造成界面被垂直压缩了。。。。苦恼
        85b64b9f7de3:@看空间疼痛春节前日本剧破却妄图 这个确实难受,没办法
        pdog18:@风中旅途 只能写成srcollview
        风中旅途:你现在解决了么
      • 不喜欢吃鱼:特地登录来说你一下,看你的文章,我打人的心都有了。
        hackware:@不喜欢吃鱼 来打我啊 :smile:
      • 093cc0d62b4d:没有从根本上解决问题呀
        hackware:@活在死水的鱼 我发现我讲的东西和沉浸模式下的虚拟按键遮挡不是一个问题,但也懒得撤下了
      • starCoder:你说的我没遇见,只有使用沉浸式才会引起被遮盖的问题。没有沉浸虚拟按键会让出布局部分!所以对你说的有些异议
        hackware: @star_code 周末研究研究,嘿嘿
        starCoder:@hackware 现在还没找到该怎么解决沉浸式和虚拟按键的冲突
        hackware:@star_code 额,沉浸式我还没用过,改天研究一下
      • 吴善革:你在搞什么 闹呢
        hackware:@吴善革 我问题就请指出来,我也好改正,避免误导大家
        hackware: @吴善革 怎么?有异议请提出

      本文标题:Android虚拟按键的适配问题

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