iOS 7では、Phonegapアプリケーションはステータスバーの下に表示されます。これにより、画面上部に配置されているボタンやメニューをクリックするのが難しくなる場合があります。
PhonegapアプリケーションでiOS 7のこのステータスバーの問題を修正する方法を知っている人はいますか?
CSSでWebページ全体をオフセットしようとしましたが、動作しないようです。UIWebView全体をオフセットしたり、ステータスバーをiOS6のように動作させる方法はありますか?
ありがとう
iOS 7では、Phonegapアプリケーションはステータスバーの下に表示されます。これにより、画面上部に配置されているボタンやメニューをクリックするのが難しくなる場合があります。
PhonegapアプリケーションでiOS 7のこのステータスバーの問題を修正する方法を知っている人はいますか?
CSSでWebページ全体をオフセットしようとしましたが、動作しないようです。UIWebView全体をオフセットしたり、ステータスバーをiOS6のように動作させる方法はありますか?
ありがとう
回答:
別のスレッドで答えを見つけましたが、誰かが疑問に思った場合のために質問に答えます。
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];
}
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;
}
そのプラグインを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は私にとってはうまくいきましたが、カメラプラグイン(および他の可能性のあるもの)と「height = device-高さ "(高さの部分を設定しないと、私の場合、キーボードがビューの上に表示され、途中で一部の入力が非表示になります)。
カメラビューを開いてアプリに戻るたびに、viewWillAppearメソッドが呼び出され、ビューが20px縮小されます。
また、ビューポートのデバイスの高さには20ピクセルが追加され、コンテンツがスクロール可能になり、Webビューよりも20ピクセル高くなります。
カメラの問題の完全な解決策は次のとおりです。
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'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
次に、これを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/
その正確な問題に対処する新しい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ステータスバーオーバーレイの問題を修正するにはどうすればよいですか?
もう1つの方法は、下位互換性を維持することです。に従ってHTMLを作成しiOS 7
(上部に20ピクセルのマージンを追加)、その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イベント内の次のコードを記述します(コードの最後の行の直前 " return YES; "):
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.m内の関数
起動時に、didFinishLaunchingWithOptionsイベントのAppDelegate.m内に次のコードを記述します。
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開発者ではないため)の組み合わせです。私はこの解決策にたどり着きました)。
まず、プロジェクトにデバイスプラグインを追加します。プラグインIDは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で動作します。
幸運を!