|
在移动应用开发中，前端页面编写了，功能需求实现了，打包测试通过了，就等着用户蹭蹭涨？ 远远不够！大量的小细节、小意外会使用户体验下降，应用中还有些细节值得格外注意。比如，本文将介绍的一个应用开发技巧：破解应用界面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框架文件：
<link rel="stylesheet" href="ui-base.css" /> <script src="js/appcan.control.js"></script>
代码修改后重新打包，效果如图所示：
3.调整前端代码。 在上图中，IOS7风格header距离时间状态栏20像素已生效，但时间栏与header背景色不统一，可以参考AppCan提供的UI基础框架的css文件中的bc-head样式，自定义调整成APP的UI颜色。（IDE新建空模板即可查看）
引用css文件及class类bc-head：
<link rel="stylesheet" href="css/ui-color.css"> <div id="header" class="uh bc-head t-wh ub" >
经过调整后，最终效果如图：
以上即为应用导航栏与状态栏重叠的解决方案。其实，在应用细节的处理上，AppCan都提供了相应的解决方法，仔细阅读说明文档，多加研究，这些问题便可以迎刃而解。 |
|
|
来自： ThinkTank_引擎 > 《ios》
