В iOS 7 приложения Phonegap появятся под строкой состояния. Это может затруднить щелчок по кнопкам/меню, которые были помещены в верхней части экрана.
Есть ли кто-нибудь, кто знает способ исправить эту проблему с статусом на iOS 7 в приложении Phonegap?
Я попытался компенсировать всю веб-страницу с помощью CSS, но, похоже, не работает. Есть ли способ любить смещение всего UIWebView или просто заставить строку состояния вести себя так же, как в iOS6?
Спасибо
Я нашел ответ на другой поток, но я отвечу на вопрос, если кто-то еще задается вопросом.
Просто замените viewWillAppear на MainViewController.m следующим:
- (void)viewWillAppear:(BOOL)animated {
// View defaults to full size. If you want to customize the view 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];
}
В дополнение к исправлению размера Ludwig Kristoffersson я рекомендую изменить цвет строки состояния:
- (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;
}
пожалуйста, установите этот плагин для телефонного разговора: 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;
}
Ответ fooobar.com/questions/21655/... работал у меня, но мне пришлось немного изменить его, чтобы он работал с плагином камеры (и, возможно, с другими) и метафоном в viewport тег с высотой = высота устройства (не задавая высоту, это приведет к тому, что клавиатура появится над представлением в моем случае, сокрыв некоторые входы по пути).
Каждый раз, когда вы открываете представление камеры и возвращаетесь в свое приложение, будет вызван метод viewWillAppear, и ваше представление уменьшится на 20 пикселей.
Кроме того, высота устройства для окна просмотра будет включать в себя 20 дополнительных px, предоставляя контент прокручиваемым и 20px выше, чем веб-просмотр.
Вот полное решение проблемы с камерой:
В MainViewController.h:
@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end
В MainViewController.m:
@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 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 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 +.
Это хорошо документировано здесь, в том числе о том, как строка состояния может быть возвращена в состояние pre-iOS7.
Чтобы установить плагин, запустите:
cordova plugin add org.apache.cordova.statusbar
Затем добавьте это в config.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/
См. новый плагин StatusBar для Кордовы, в котором указан точный номер. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution вариант # 3
Я использую следующий фрагмент кода, чтобы добавить класс в тело, если обнаружен iOS7. Затем я создаю этот класс для добавления поля 20px в верхней части моего контейнера. Убедитесь, что у вас установлен плагин "устройство" и этот код находится внутри события "deviceready".
От чтения, я слышал, что следующее обновление Phonegap (3.1, я считаю) будет лучше поддерживать изменения в строке состояния iOS7. Таким образом, это может потребоваться только в качестве краткосрочного решения.
if(window.device && parseFloat(window.device.version) >= 7){
document.body.classList.add('fix-status-bar');
}
Ответ Людвига работал у меня.
Для тех, кто использовал свой ответ и теперь хочет изменить цвет белого поля (может показаться тривиальным, но он был в тупике), см. это:
Другой способ - обратная совместимость. Сделайте 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.m в событии didFinishLaunchingWithOptions (прямо перед его последней строкой кода вернуть YES; "):
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
Я буду ждать ваших отзывов!:)
Если мы используем плагин камеры для галереи изображений, строка состояния вернется, чтобы исправить эту проблему, добавьте эту строку
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
to
- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info {...}
внутри CVDCamera.m в списке плагинов
Запишите следующий код внутри AppDelegate.m в doneFinishLaunchingWithOptions при запуске.
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 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, поэтому я пошарил к этому решению).
Прежде всего, добавьте плагин Device в проект. Идентификатор плагина: org.apache.cordova.device и репозиторий: 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
После постоянных разочарований, много поиска в Интернете, это шаги, которые вам нужно предпринять:
< preference name= "StatusBarOverlaysWebView" value = "false" /" >
Используйте следующий код в onDeviceReady
StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString('#209dc2');
Он работает для меня в iOS и Android.
Удачи!