Worklight 6.0的App在iOS7中状态栏错位的解决方法

来源：互联网发布：薪酬优化劳务外包编辑：程序博客网时间：2024/05/17 07:46

Worklight 6.0的App在iOS6下正常，是这样的

：

由于iOS7开始，苹果把系统状态栏和程序导航栏融合了，目的是为了App能够更大灵活的设计UI达到更好的融合效果，但如果是某些旧代码或旧框架就会出现状态栏错位的情况，如下：

以上问题出现在Worklight 6.0和6.0.0.1，如何解决这个界面问题呢，在IBM还没有对Worklight产品升级之前，需要我们手动解决，笔者项目中使用了方法一，主要是快速解决问题完成原型演示；方法二是IBM开发团队给出的解决方法，估计未来会整合进Worklingt新版本中去。

方法一：

用原生代码里CDVMainViewController.m加了一行代码动态调整了webView容器的高，顶点20开始，留出20给状态栏。注意加是否是iOS7系统的判断，ios6以下不要空20. 这个是临时的方法，针对worklight 6.0及其以下版本，也就是IBM自己在worklight内部还没有做修改的情况，至于worklight 6.x有没有修复要测试。

- (void)viewDidLoad{    [super viewDidLoad];    // Do any additional setup after loading the view from its nib.    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];    self.view.backgroundColor = [UIColor colorWithRed:236.0/255.0 green:12.0/255.0 blue:12.0/255.0 alpha:1.0]; //[UIColor blackColor];    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) {        self.view.backgroundColor = [UIColor colorWithRed:236.0/255.0 green:12.0/255.0 blue:12.0/255.0 alpha:1.0];    }}

- (void)viewWillAppear:(BOOL)animated{    if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) {        self.webView.frame = CGRectMake(self.webView.frame.origin.x,                                        20,                                        self.webView.frame.size.width,                                        self.webView.frame.size.height);    }}

效果如下：

方法二：

1. Add the following css rules: .wl_ios7 .ui-mobile [data-role=page], .wl_ios7 .ui-mobile [data-role=dialog], .wl_ios7 .ui-page {         top: 20px; }

2. - For JQM < 1.3, add the following Javascript code in wlCommonInit function:         if(device.platform.toLowerCase() == 'ios' && parseFloat(device.version) >= 7) {                 var _resetActivePageHeight = function() {                         var aPage = jQuery( "." + jQuery.mobile.activePageClass ),                         aPagePadT = parseFloat( aPage.css( "padding-top" ) ),                         aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),                         aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),                         aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) ),                         screenHeight = window.innerHeight || jQuery( window ).height();                                                 var height = screenHeight - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB - 20;                         aPage.css( "min-height", height);             };             _resetActivePageHeight();                         jQuery( document ).on( "pageshow", _resetActivePageHeight );             jQuery( window ).on( "throttledresize", _resetActivePageHeight );             } - For JQM > 1.3, add the following Javascript code in wlCommonInit function:         if(device.platform.toLowerCase() == 'ios' && parseFloat(device.version) >= 7) {                 var _resetActivePageHeight = jQuery.mobile.resetActivePageHeight;                 jQuery.mobile.resetActivePageHeight = function resetActivePageHeight(height) {                 _resetActivePageHeight(height);                 var aPage = jQuery( "." + jQuery.mobile.activePageClass );                 aPage.css('min-height', parseFloat(aPage.css('min-height')) - 20);         };                 jQuery.mobile.resetActivePageHeight();         jQuery( document ).on( "pageshow", jQuery.mobile.resetActivePageHeight );         jQuery( window ).on( "throttledresize", jQuery.mobile.resetActivePageHeight );     }

0 0