移动开发技巧：3招破解APP界面header与状态栏重叠

在移动应用开发中，前端页面编写了，功能需求实现了，打包测试通过了，就等着用户蹭蹭涨？

远远不够！大量的小细节、小意外会使用户体验下降，应用中还有些细节值得格外注意。比如，本文将介绍的一个应用开发技巧：破解应用界面header与状态栏重叠。且看：

在IOS7之后，应用界面header与状态栏两者合为一体，共用同一个背景色。正常情况下，导航栏header紧跟着状态栏布局，也就是导航栏从y=20开始布局。而由于一些布局异常，有些APP的导航栏会直接从屏幕顶端开始布局，这样导航栏和状态栏会重叠在一起，导致界面效果不理想，如下图所示。

使用AppCan开发应用时，当APP没有使用AppCan官方最新的JSSDK和UI布局文件，则比较容易出现应用界面header与状态栏重叠的情况。事实上，自IOS7发布时，AppCan就已经提供了简单的接口方案，可以帮助开发者很好的处理这一问题。

处理方案：

1.下载最新版本JSSDK。使用最新版IDE新建空模板，查看其最新的JSSDK和UI布局CSS文件。

<head>

....

<style>

.uh_ios7 .uh {

padding: 1em 0 0;

}

</style>

</head>

Js代码：

window.uexOnload = function(type){

var ios7style=uexWidgetOne.iOS7Style;

var isFullScreen = uexWidgetOne.isFullScreen;

if (ios7style == '1' && isFullScreen != '1') {

$("body").addClass("uh_ios7");

}

2.调用AppCan引擎代码。

首先判断当前应用在设备上是否是ios7风格，同时判断应用是否为全屏。

如果同时满足iphone上的ios7风格且应用不是全屏（即显示状态栏情况），则执行样式调整代码。

应用判断接口文档解释：

iOS7Style： 0为非iOS7风格,1为iOS7风格；

isFullScreen： 0非全屏(显示状态栏),1是全屏(不显示状态栏)。

或直接引用如下AppCan框架文件：

代码修改后重新打包，效果如图所示：

3.调整前端代码。

在上图中，IOS7风格header距离时间状态栏20像素已生效，但时间栏与header背景色不统一，可以参考AppCan提供的UI基础框架的css文件中的bc-head样式，自定义调整成APP的UI颜色。（IDE新建空模板即可查看）

引用css文件及class类bc-head：

经过调整后，最终效果如图：

以上即为应用导航栏与状态栏重叠的解决方案。其实，在应用细节的处理上，AppCan都提供了相应的解决方法，仔细阅读说明文档，多加研究，这些问题便可以迎刃而解。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。