android 获取状态栏高度_cordova获取状态栏高度

APP导航栏设计要点全解析

6.小程序

导航栏是位于页面顶部或侧面、标题横幅图像上方或下方的一排水平导航按钮，用于链接站点或软件中的页面。网站或应用程序使用导航栏，使访问者更清楚地找到所需的资源区域，并搜索资源。关于APP导航栏的设计，下面我们就将全面详细的为大家进行解析，感兴趣的伙伴们一起继续往下看看！

android 获取状态栏高度_cordova获取状态栏高度

APP导航栏设计要点全解析：

导航栏在哪里？

标签栏、菜单栏、Tab栏等UI设计组件，、栏目、标题栏目、导航栏目...在许多类型和名称中，有许多新设计师很难区分这些重复的名称和相应的区域。

导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面的位置和层次，并连接父/子结构页面，权重应高于当前页面的所有内容。如果用户不知道当前位置，不知道如何回到一步，说明导航栏肯定有问题。虽然在iOS系统中被称为「导航栏」、叫做Android系统「顶部应用栏」，名称各不相同，但位置和作用几乎相同。

导航栏能起到什么作用？

首先，导航栏可以告知用户目前的位置，并提供回到上一步或下一步的作入口，，基本介绍导航栏以免让用户迷失方向；其次，对当前页面内容进行顶部Tab整理分类，并在导航栏中聚集各种类型的入口，为用户提供全局作；可以增加品牌曝光度，比如容器品牌颜色、图标品牌颜色等。，甚至在必要时放置品牌LOGO。

int off = screenH - statusBarH - titleBarH - keyBoardHeight;为什麽有些页面没有导航栏？

当系统想要为用户提供更多的信息或者用户需要身临其境的体验时，系统需要削弱和隐藏导航栏来释放更多的页面空间，以预留增加单个屏幕页面信息量的空间资源。

比如在网上阅读和地图导航的过程中，系统会隐藏导航栏，因为此时用户的注意力只会长时间停留在内容本身，没有频繁的作需求。隐藏导航栏不仅可以预留空间，还可以减少无关元素对用户的干扰；在选择服务车型时，使用滴滴出行会暂时隐藏导航栏的背景容器，只保留相关的图标作入口。虽然没有完全隐藏，但可以在一定程度上缓解不充裕的地图空间。与上述导航过程相比，现场场景的作要求和频率明显高很多。

第二，导航栏的结构构成

常用的导航栏分为左、中、右结构，主要由返回按钮(左)组成、标题（中）、基于大家最常用、最常用的布局方式，辅助作按钮(右)由三部分组成。

在实际应用中，为了满足多样化的产品需求和用户目标，导航栏的布局方式有很多，不管款式有多复杂，这只是站在设计的角度，目的是让用户作起来更简单方便。以iOS的两倍图为例，逐一拆解导航栏，看看我们见过的各种导航栏会使用哪些元素和组件。

1.容器

也就是说，导航栏的范围约束了容器，所有元素都应该在容器中。在iOS系统的应用中，常规导航栏的固定高度为88px。即使在大标题导航风格下，无论当前高度如何，随着界面的滚动，也会转换成88px的常规高度，如iPhone界面、产品应用等。

此外，为了释放更多的界面空间，一些应用程序表面上看不到容器的存在，实际上将容器的不透明度调整为0。逻辑上，容器还是存在的，每个元素还是受到容器的约束，比如滴滴出租车界面。

2.标题

标题用于描述用户当前位置或页面的具体场景。在iPhone全屏出现之前，由于设备屏幕空间有限，大多使用常规标题，即34px~40px(网格所需，作者常用36px)加粗，中标题文字。

标题导航栏的容器高度为192px，字体大小通常设置在56px~68px的范围内(网格所需，作者常用的64px)，页面滑动后，将恢复到88px的常规高度，标题大小也会减小。

3.图标

二级及以后的页面导航图标相对固定，左侧必须有返回上级页面的“返回”图标，可以是左剪头、下剪头、关闭按钮等。需要注意的是，无论设计什么风格，都要符合“返回”风格的预期，保证用户不会产生疑惑。功能图标一般放在右侧，如次级功能延伸、信息提交、删除等。，最多不要超过两个作入口，以免造成功能层次混乱。

4.按钮

导航栏的左侧已经被覆盖「返回」图标占用，按钮基本上只能放在右边，而且大部分都是文字按钮样式，主要用来承载页面的辅助作，功能入口。

当导航有足够的纵向空间时，也可以使用圆形、方形、圆形矩形等容器按钮。页面中的视觉权重需要通过按钮的形状、大小、填充、边缘等风格来确定，主次关系要灵活区分。一个好的导航按钮总能抓住用户的注意力。

5.搜索框

当搜索功能权重较高，使用图标和按钮作为入口无法满足用户频繁的搜索需求时，不仅可以突出搜索功能，向用户搜索内容标签，还可以通过输入框占据导航栏的大部分区域，提高产品的可作性。随着搜索框区域的扩大，用户无需准确点击，触手可及。

对于内容较多的主页，导航栏需要承载很多信息，比如标题、分类、头像、按钮等。，这样可以及时增加导航栏的高度。第二行显示搜索框可以避免过度弱化搜索框对用户的作影响，比如JD.COM、淘宝等电商类型的应用。如果想节省整个页面的纵向空间，如果条件允许，可以滑动页面，缩小导航栏的高度，只显示搜索框，比如美团外卖。

6.用户头像

许多社交产品将用户的头像信息放置在导航栏的左右两侧，以便随时调用与用户相关的功能。比如点击后进入个人设置、个人信息展示、会员中心、个人主页等。

7.标签/分类

导航栏的分类菜单包括分段控件和标签导航。分段控件通常包含2~4个标签，不支持左右滑动，直接点击切换内容；标签导航相对灵活，非常适合分类较多的内容。所有的分类都可以通过左右滑动来检查，从而实现更方便的导航。

8.更多菜单

上面提到的标签是对产品内容的分类，这里更多的是指产品、系统的辅助功能。

当页面的一些功能运行频率较高或与当前页面信息相关但不方便直接显示入口时，或者当导航栏的剩余空间不足以承载时，可以将功能放在更多的菜单中，不仅可以适当为用户提供作入口，还可以满足产品的各种隐性需求。

9.分割线

分隔线不仅仅是一条线，它可以是一条线，一个表面或者一个投影，用来分隔导航栏和内容区的边界线。用户可以通过视觉阻断感知内容区域，避免在页面上下滑动互动后反复扫描顶部位置。

分割线是为了反映导航栏与内容界面的层次关系。缺乏视觉分割可能会让用户觉得自己是一个等级，增加感知难度。当然，并不是所有的应用或界面都需要视觉分割，比如界面内容少，界面背景色与导航栏容器背景色值明显不同，多图/多卡...

第三，分类导航栏样式

1.常规样式

最常见的款式，95%以上的二级和后续界面都是常规导航栏，这种类型也会用在一些比较简单的首页。以iOS的两倍图为例。容器的高度固定在88px，基本上只由按钮和标题组成，背景色多为白色或主色调。

2.大标题

iOS11系统发布后，大标题导航栏逐渐流行起来。大标题一般只出现在主页(底部标签功能分类)，上面详细说明了基本规范。

标题导航栏会给人一种高强度、透明度的空间感。整体风格偏向简约大气，不适合电商应用。因为占用空间大，适合信息、社交、工具型、功能单一的应用。

3.搜索框的类型

根据搜索功能的权重，在常规导航栏中添加一个搜索框，而不是标题显示。由于空间限制，搜索框的高度一般设置在56px~64px之间，宽度取决于其他功能图标的数量。如果有更多的图标，搜索框可以放在第二行。

如果没有特殊需要，尽量把整个搜索框放在中间，让两边的距离相等或者两边的图标数量相同，以提高视觉美感。

4.Tab导航

Tab栏有分段控件和多标签导航两种，需要明确突出所选标签，以上有详细的规范说明，暂时不做赘述。

5.栏目导航栏

栏目导航可以是上述类型中的任何一种，不同的是视觉层中没有容器(或不透明度为0%)。在初始状态下，可以与背景/融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也可以减少导航栏与内容区的分离感，在电子商务应用中非常常见。

无论哪一个平台的小程序，我们都能理解为嵌入式“子级”APP，导航栏右上角的部分区域是“父级”APP的原生功能，不能修改。这是一个硬性规则。另外，至于放什么元素，用什么类型，可以随意玩。

第四，内容区域之间的交互关联。

众所周知，导航栏的主要功能是方便用户随时进行上一步或部分功能的下一步作，帮助用户不迷路。但是，有时候，导航栏可以帮助用户快速完成任务，重新划分交互后的内容管理和信息水平。

1.点击导航栏中的按钮进行交互。

当用户与导航栏中的文字/图标按钮互动时，内容可以立即管理，例如添加、删除、分享等作，无需离开该页面，帮助用户快速完成任务。

2.上滑界面，减少导航栏内容。

随着界面向上滑动，具有搜索功能的大标题或占用两行的大型导航栏将恢复到常规尺寸，信息的数量和层次将被重新划分，以削弱导航栏的吸引力，减少对用户的干扰。

界面上滑互动后，原本常规风格的导航栏会自动增加信息内容。比如美团外卖，当个屏幕滑到一半时，为了帮助用户快速做出决策，将特色标签和筛选入口悬挂在导航栏上。

4.导航栏和内容区域之间的信息分割

大部分产品直接用分隔线分割，但为了保持界面干净整洁，减少不相关信息的干扰，导航栏与内容区的元素间隔较远，没有任何交互。视觉分割是利用空间空白自动形成的。当产生滚动交互时，空白是无法控制的，投影、分隔线或毛玻璃效果会增加到导航栏下方，进行视觉分割。

第五，导航栏的相同点/不同点

1.同一应用程序中的相同点

在同一应用程序中，导航栏的高度、位置及其部分属性(字体大小、图标大小、颜色规格)应具有统一性，这也是格式塔心理学中的一个。「一致性」UI设计的硬性要求。即使是大标题风格，底部标签栏(主结构、功能)对应页面的导航栏也会遵循一致性要求。当然，除了一些应用程序只在首页设置大标题风格。

顾名思义，导航栏还需要具备导航功能。每当用户抬头(扫描导航栏)时，他们就能清楚地知道自己目前在哪里或者在哪里，这主要是从标题信息中快速获取的(后续会有标题设计的单独文章)。如果当前页面没有标题，用户需要在页面头部的一些关键信息中获取一些突出的关键信息。一旦页面滑动覆盖关键信息位置，就需要呈现标题给用户指路，避免用户产生疑惑。

2.不同平台之间的异

这里主要指iOS。、在相同比例、相同宽度的前提下，安卓两大系统，Android(MD设计规范)系统标题为左对齐，容器高度高于iOS；一般来说，iOS系统只允许标题左对齐大标题样式。

此外，Android通常会在容器底部增加投影，以区分导航栏和内容区的划分；除了上述(2-9)提到的划分元素，iOS还可以通过高斯模糊和不透明来区分毛玻璃效果的味道。

导航栏几乎是每个界面都必须存在的控件，虽然常用，但并不是每个设计师都能把它设计得，需要在基本的设计规范、功能上，赋予它更大的产品价值。APP导航栏设计得好，它可能会有意想不到的好处。以上对于APP导航栏设计要点进行了详细的讲解，大家可以根据这些点运用到自己的APP导航栏设计里面去~当然对于APP设计学习有需求的小伙伴，在就可获取教程学习哦！

Android中如何收起状态栏

3.上滑界面，增加导航栏内容。

View类提供了setSystemUiVisibility和getSystemUiVisibility方法，这两个方法实现对状态栏的动态显示或隐藏的作，以及获取状态栏当前可见性。

setSystemUiVisibility方法传入的实参分析：

setSystemUiVisibility(int visibility)方法可传入的实参为：

1. View.SYSTEM_UI_FLAG_VISIBLE：显示状态栏，

Activity不全屏显示(恢复到有状态的正常情况)。

2. View.INVISIBLE：隐藏状态栏，同时Activity会伸展全屏显示。

3. View.SYSTEM_UI_FLAG_FULLSCREEN：Activity全屏显示，当页面滑动到背景消失时，它会逐渐恢复到常规风格。特别要注意背景色与导航栏元素的颜色明暗对比(比如图标深色，背景一定要浅色)。如果背景不可控，建议在导航栏下面加一层黑色透明渐变蒙层，保证信息的可识别性。且状态栏被隐藏覆盖掉。

4. View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN：Activity全屏显示，但状态栏不会被隐藏覆盖，状态栏依然可见，Activity顶端布局部分会被状态随着全屏设备的逐渐普及，屏幕高度进一步扩大，导航栏的可用空间不可避免地增加，大标题风格开始兴起，然后引入设计平台规范。大标题导航栏主要取决于产品定位和功能的影响，不仅仅是设计风格的问题。毫无疑问，大标题可以让页面头部有更多的空白空间和更强的呼吸感，非常适合产品结构不深、功能单一、体积水平轻的应用，也就是我们常说的。「小而美」，每个人都是产品平台，在这方面做得很好。遮住。

5. View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION：效果同View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

6. View.SYSTEM_UI_LAYOUT_FLAGS：效果同View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

8. View.SYSTEM_UI_FLAG_LOW_PROFILE：状态栏显示处于低能显示状态(low profile模式)，状态栏上一些图标显示会被隐藏。

android setselectionfromtop 替换成什么方法了

主页导航栏中的图标比较多样化，比如左边常见的定位，品牌标识。、抽屉菜单入口等，右侧如搜索、消息、扫描、更多...

屏幕总高度-键盘高度-回复的文本输入框-状态栏高度-标题栏高度-当前被点击项的高度=偏移量。

7. View.SYSTEM_UI_FLAG_HIDE_NAVIGATION：隐藏虚拟按键(导航栏)。有些手机会用虚拟按键来代替物理按键。

View listItem = circleAdapter.getView(currentPosition, null, circleList);//得到当前被点击项

if (circlelistAdapter == null) {

int list_child__height = listItem.getMeasuredHeight()+ circleList.getDividerHeight();//得到被点击项的高度

int yOffset= screenHeight - keyboardHeight- articleReplyBox.getHeight() - titleBox.getHeight()- statusBarHeight - list_child__height;

listView.setSelectionFromTop(currentPosition, yOffset);//currentPosition 被点击项的下标，yOffset计算出来的偏移量

如果说说没有评论，或者评论的内容不长，只有简单的几个字，就不会出现问题，如果评论内容过长，导致换行，这种情况我就无法准确得到当前被点击项的高度。

return;

}if (circlelistAdapter.getCount()==selectPositon+1){

listView.setSelection(listView.getBottom());

}else{

listView.setSelectionFromTop(selectPositon + 1, off);

}