iOS 7 строка состояния с Phonegap



в iOS 7, приложения PhoneGap, который будет отображаться под строкой состояния. Это может затруднить нажатие на кнопки / меню, которые были размещены в верхней части экрана.



есть ли кто-то, кто знает способ исправить эту проблему строки состояния на iOS 7 в приложении Phonegap?



Я попытался компенсировать всю веб-страницу с помощью CSS, но это, похоже, не работает.
Есть ли способ, как смещать весь UIWebView или просто заставить строку состояния вести себя так, как это было в iOS6?



спасибо

714   18  

18 ответов:

Я нашел ответ на другой поток, но я отвечу на вопрос, если кто-то еще задается вопросом.

просто заменить viewWillAppear in MainViewController.m С этого:

- (void)viewWillAppear:(BOOL)animated {
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

в дополнение к исправлению размера Людвига Кристофферссона, я рекомендую изменить цвет строки состояния:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    self.view.backgroundColor = [UIColor blackColor];
}
-(UIStatusBarStyle)preferredStatusBarStyle{
    return UIStatusBarStyleLightContent;
}

пожалуйста, установите этот плагин для phonegap:https://build.phonegap.com/plugins/505

и используйте правильную настройку, как показано ниже, чтобы управлять наложением webview:

<preference name="StatusBarOverlaysWebView" value="false" />

для меня, с Phonegap 3.3.0 он работает.

дополнительная информация на странице проекта Github: https://github.com/phonegap-build/StatusBarPlugin

скрыть строку состояния, добавьте следующий код в файл MainViewController.m под функцией -(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Ответ https://stackoverflow.com/a/19249775/1502287 работал для меня, но мне пришлось немного изменить его, чтобы заставить его работать с плагином камеры (и потенциально другими) и метатегом viewport с "height=device-height" (не устанавливая часть высоты, в моем случае клавиатура появится над видом, скрывая некоторые входы по пути).

каждый раз, когда вы открываете вид камеры и возвращаетесь к своему приложению, вызывается метод viewWillAppear, и ваш смотреть сократится на 20 пикселей.

кроме того, высота устройства для видового экрана будет включать 20 дополнительных пикселей, что делает контент прокручиваемым и на 20 пикселей выше, чем webview.

вот полное решение проблемы камеры:

В MainViewController.h:

@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end

В MainViewController.м:

@implementation MainViewController

@synthesize viewSizeChanged;

[...]

- (id)init
{
    self = [super init];
    if (self) {
        // On init, size has not yet been changed
        self.viewSizeChanged = NO;
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
    }
    return self;
}

[...]

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    // Lower screen 20px on ios 7 if not already done
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7 && !self.viewSizeChanged) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        self.viewSizeChanged = YES;
    }
    [super viewWillAppear:animated];
}

теперь о проблеме просмотра, в вашем функция deviceready сработала прослушиватель событий, добавьте следующий код (с использованием jQuery):

if (window.device && parseFloat(window.device.version) >= 7) {
  $(window).on('orientationchange', function () {
      var orientation = parseInt(window.orientation, 10);
      // We now the width of the device is 320px for all iphones
      // Default height for landscape (remove the 20px statusbar)
      var height = 300;
      // Default width for portrait
      var width = 320;
      if (orientation !== -90 && orientation !== 90 ) {
        // Portrait height is that of the document minus the 20px of
        // the statusbar
        height = document.documentElement.clientHeight - 20;
      } else {
        // This one I found experimenting. It seems the clientHeight
        // property is wrongly set (or I misunderstood how it was
        // supposed to work).
        // Dunno if it's specific to my setup.
        width = document.documentElement.clientHeight + 20;
      }
      document.querySelector('meta[name=viewport]')
        .setAttribute('content',
          'width=' + width + ',' +
          'height=' + height + ',' +
          'initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
    })
    .trigger('orientationchange');
}

здесь это видовой экран, который я использую для других версий:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

и теперь все работает хорошо.

попробуйте войти в приложение (app name)-Info.plist файл в XCode и добавить ключи

view controller-based status bar appearance: NO
status bar is initially hidden : YES

это работает для меня без проблем.

для Cordova 3.1+, есть плагин, который имеет дело с изменением поведения строки состояния для iOS 7+.

это хорошо документированы здесь, включая то, как строка состояния может быть возвращена в состояние до iOS7.

чтобы установить плагин, запустите:

cordova plugin add org.apache.cordova.statusbar

затем добавьте это в конфигурацию.xml

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />

Я решаю свою проблему, установив org.apache.cordova.statusbar и добавление в мой топ config.xml:

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

эти конфигурации работают только для iOS 7+

ссылка: http://devgirl.org/2014/07/31/phonegap-developers-guid/

см. новый плагин Cordova StatusBar, который решает эту точную проблему. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution Вариант #3

Я использую следующий фрагмент кода, чтобы добавить класс в тело, если iOS7 обнаружен. Затем я стилизую этот класс, чтобы добавить 20px поле в верхней части моего контейнера. Убедитесь, что у вас установлен плагин" device "и что этот код находится внутри события" deviceready".

от чтения вокруг, я слышал, что следующее обновление для Phonegap (3.1 я считаю) будет лучше поддерживать изменения в строке состояния iOS7. Так это может быть просто необходимо в короткий срок исправить.

if(window.device && parseFloat(window.device.version) >= 7){
  document.body.classList.add('fix-status-bar');
}

Людвиг работал для меня.

для тех, кто использовал свой ответ и теперь хочет изменить цвет белого поля (может показаться тривиальным, но я был в тупике), см. Это:

как я могу изменить цвет фона UIWebView после скольжения вниз UIWebView, чтобы исправить проблему наложения строки состояния iOS7?

другой способ -совместимость. Сделайте HTML в соответствии с iOS 7 (с дополнительным полем 20px сверху), чтобы дать это full screen посмотрите и отрежьте эту дополнительную маржу для iOS < 7.0. Что-то вроде следующего в MainViewController.m:

- (void)viewDidLoad
{
  [super viewDidLoad];

  if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0) {
    CGRect viewBounds = [self.webView bounds];
    viewBounds.origin.y = -20;
    viewBounds.size.height = viewBounds.size.height + 20;
    self.webView.frame = viewBounds;
  }
}

это решение не оставит черную полосу сверху для iOS 7.0 и выше, что современный пользователь iOS найдет странным и старый.

пишем следующий код внутри AppDelegate.м на didFinishLaunchingWithOptions событие (точно перед его последней строкой кода"возврат "да";"):

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) 
{
    [application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}

Я буду ждать ваших отзывов! :)

если мы используем плагин камеры для галереи изображений, строка состояния вернется так, чтобы исправить эту проблему, пожалуйста, добавьте эту строку

 [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];

до

- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}

функция внутри CVDCamera.м в списке плагинов

пишем следующий код внутри AppDelegate.м на didFinishLaunchingWithOptions событие на запуск.

CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Fixing status bar ------------------------------- NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."]; if ([[vComp objectAtIndex:0] intValue] >= 7) { // iOS 7 or above CGRect newWebViewBounds = CGRectMake( 0, 20, screenBounds.size.width, screenBounds.size.height-20 ); screenBounds = newWebViewBounds; } // ------------------------------- Fixing status bar End

и исправить Для выше iOS 7 и выше.

чтобы сохранить строку состояния видимой в портрете, но скрыть ее в альбомной ориентации (т. е. полноэкранный режим), попробуйте следующее:

на MainViewController.h:

@interface MainViewController : CDVViewController
@property (atomic) NSInteger landscapeOriginalSize;
@property (atomic) NSInteger portraitOriginalSize;
@end

на MainViewController.m:

@implementation MainViewController

@synthesize landscapeOriginalSize;
@synthesize portraitOriginalSize;

...

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.

    [super viewWillAppear:animated];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:nil];
}

- (void)orientationChanged:(NSNotification *)notification {
    [self adjustViewsForOrientation:[[UIApplication sharedApplication] statusBarOrientation]];
}

- (void)viewDidDisappear:(BOOL)animated {
    [[NSNotificationCenter defaultCenter]removeObserver:self name:UIDeviceOrientationDidChangeNotification object:nil];
}

- (void) adjustViewsForOrientation:(UIInterfaceOrientation) orientation {
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
        CGRect frame = self.webView.frame;

        switch (orientation)
        {
            case UIInterfaceOrientationPortrait:
            case UIInterfaceOrientationPortraitUpsideDown:
            {
                if (self.portraitOriginalSize == 0) {
                    self.portraitOriginalSize = frame.size.height;
                    self.landscapeOriginalSize = frame.size.width;
                }
                frame.origin.y = statusBarFrame.size.height;
                frame.size.height = self.portraitOriginalSize - statusBarFrame.size.height;
            }
                break;

            case UIInterfaceOrientationLandscapeLeft:
            case UIInterfaceOrientationLandscapeRight:
            {
                if (self.landscapeOriginalSize == 0) {
                    self.landscapeOriginalSize = frame.size.height;
                    self.portraitOriginalSize = frame.size.width;
                }
                frame.origin.y = 0;
                frame.size.height = self.landscapeOriginalSize;
            }
                break;
            case UIInterfaceOrientationUnknown:
                break;
        }

        self.webView.frame = frame;
    }
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    // Change this color value to change the status bar color:
    self.view.backgroundColor = [UIColor colorWithRed:0/255.0f green:161/255.0f blue:215/255.0f alpha:1.0f];
}

Это комбинация того, что я нашел в этом и связал обсуждения StackOverflow, некоторый код из плагина Cordova StatusBar (чтобы не жестко кодировать значение 20px) и некоторые заклинания с моей стороны (я не iOS dev, поэтому я нащупал свой путь к этому решению).

прежде всего, добавьте плагин устройства в свой проект. Идентификатор плагина: org.апаш.Кордова.устройство и репозиторий:https://github.com/apache/cordova-plugin-device.git

после этого используйте эту функцию и вызывайте ее на каждой странице или экране: -

function mytopmargin() {
    console.log("PLATform>>>" + device.platform);
    if (device.platform === 'iOS') {
        $("div[data-role='header']").css("padding-top", "21px");
        $("div[data-role='main']").css("padding-top", "21px");
    } else {
        console.log("android");
    }
}

лучший способ контролировать фон строки состояния-2017

после продолжающегося разочарования, много поиска в интернете, это шаги, которые вам нужно предпринять:

  1. убедитесь, что вы используете Плагин Строки Состояния
  2. добавить этот параметр в конфиге.XML-код:

  1. использовать следующий код onDeviceReady

        StatusBar.show();
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByHexString('#209dc2');
    

это работает для меня в iOS и Android.

удачи!

Comments

    Ничего не найдено.