iOS 7のステータスバーとUIの重なり
最近Xcode 5にアップグレードしました。iOSシミュレーターでアプリを実行すると、スプラッシュ画面がステータスバーに重なり、アプリ内では、左上の戻るボタンのようにステータスバーがアプリの要素に重なります私のアプリの手すり。 phonegap 2.9を使用してアプリを構築します。これを正しくレンダリングする方法はありますか？.
この質問のように、ストーリーボードを使用している場合、この問題を解決できます。 iOS 7-ステータスバーがビューに重なっています
ストーリーボードを使用していない場合は、AppDelegate.mのdid finishlaunchingでこのコードを使用できます。
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
[application setStatusBarStyle:UIStatusBarStyleLightContent];
self.window.clipsToBounds =YES;
self.window.frame = CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
}
この質問も参照してください： IOS7のステータスバーとナビゲーションバーの問題
MainViewController.m inside：- (void)viewWillAppear:(BOOL)animatedこれを追加：
//Lower screen 20px on ios 7
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.Origin.y = 18;
viewBounds.size.height = viewBounds.size.height - 18;
self.webView.frame = viewBounds;
}
したがって、終了関数は次のようになります。
- (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 = 18;
viewBounds.size.height = viewBounds.size.height - 18;
self.webView.frame = viewBounds;
}
[super viewWillAppear:animated];
}
私が通常行うことは、2つのキーと値のプロパティをInfo.plistファイルに追加することです。
プロパティのソースコードは次のとおりです。
PhoneGapでinAppブラウザーを開くときに問題が発生しました。 Gimiの修正はうまくいきましたが、inAppブラウザーを開くたびに画面の下部が縮小されました。そこで、webviewのy Originが0であったかどうかをチェックするifステートメントを追加しました。inAppブラウザーはy Origin 0をもう持っていないので、問題を解決しました。
// ios 7 status bar fix
- (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) {
if(self.webView.frame.Origin.y == 0) {
CGRect viewBounds = [self.webView bounds];
viewBounds.Origin.y = 20;
viewBounds.size.height = viewBounds.size.height - 20;
self.webView.frame = viewBounds;
}
}
[super viewWillAppear:animated];
}
ソリューションは本当に私のものではありませんが、ソースを見つけることができません。それが役に立てば幸い！
このコードスニペットをphonegapプロジェクトのMainViewController.mファイルに配置します。
- (void)viewDidLayoutSubviews{
if ([self respondsToSelector:@selector(topLayoutGuide)]) // iOS 7 or above
{
CGFloat top = self.topLayoutGuide.length;
if(self.webView.frame.Origin.y == 0){
// We only want to do this once, or
// if the view has somehow been "restored" by other code.
self.webView.frame = CGRectMake(self.webView.frame.Origin.x,
self.webView.frame.Origin.y + top,
self.webView.frame.size.width,
self.webView.frame.size.height-top);
}
}
}
このコードをViewDidLoadメソッドで使用します。
if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
{
self.edgesForExtendedLayout = UIRectEdgeNone;
}
これは、以前のiOSバージョンもサポートしようとするときに機能します。
XCodeでアプリの(app name)-Info.plistファイルに移動して、キーを追加してみてください
view controller-based status bar appearance: NO
status bar is initially hidden : YES
これは問題なく機能しているようです。
実際、Gimiの答えが最良の答えであることがわかりました。 Gimiの回答に追加し、その回答でignacio-munizagaの回答に回答するために、コードはビューが表示されるたびに実行されます。つまり、インラインブラウザーを閉じた後、またはカメラロールの後などです。サイズがすでに調整されているかどうか。
最終的なコードは次のようになります。
bool sizeWasAdjusted = false;
- (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 (!sizeWasAdjusted && [[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.Origin.y = 18;
viewBounds.size.height = viewBounds.size.height - 18;
self.webView.frame = viewBounds;
sizeWasAdjusted = true;
}
[super viewWillAppear:animated];
}
IOS 7向けに開発している場合は、ステータスバーを黒い四角形の古いiOSスタイルでラップすることはお勧めしません。それをデザインに統合するだけで、よりiOS 7の「フルスクリーン」な外観になります。
このプラグインを使用して、ステータスバーのインクの色を調整したり、アプリの任意のインスタンスで非表示にしたり表示したりできます。
https://github.com/jota-v/cordova-ios-statusbar
Jsメソッドは次のとおりです。
window.plugins.statusBar.hide();
window.plugins.statusBar.show();
window.plugins.statusBar.blackTint();
window.plugins.statusBar.whiteTint();
重要：また、アプリのplistファイルでUIViewControllerBasedStatusBarAppearanceをNOに設定します。
Info.plistにこのようなものがある方が良い
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
これにより、ステータスバーがまったくなくなります。
IOS7のステータスバーの問題に対処するために、次のコードをCordova/PhoneGapに使用できます。
function onDeviceReady() {
if (parseFloat(window.device.version) === 7.0) {
document.body.style.marginTop = "20px";
}
}
document.addEventListener('deviceready', onDeviceReady, false);
とにかくCordova 3.1は、これとiOS7の他の問題をすぐに修正します。
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
self.window.clipsToBounds =YES;
[application setStatusBarStyle:UIStatusBarStyleLightContent];
self.window.frame = CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
}
具体的には、
self.automaticallyAdjustsScrollViewInsets = YES;
self.edgesForExtendedLayout = UIRectEdgeNone;
重複したくない場合にUITableViewControllerがある場合に役立ちます。
Sencha TouchでCordovaを使用していて、通常のSencha Touchナビゲーション/タイトルバーを使用している場合は、navbarをストレッチしてnavbar内のコンテンツを再配置し、iOS 7で自宅に見えるようにすることができます。これをapp.js （最後のExt.Viewport.add行の後）：
// Adjust toolbar height when running in iOS to fit with new iOS 7 style
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
Ext.select(".x-toolbar").applyStyles("height: 62px; padding-top: 15px;");
}
（ソース： http://lostentropy.com/2013/09/22/ios-7-status-bar-fix-for-sencha-touch-apps/ ）
これは少しハックですが、Objective-Cレベルで対処する手間が省けます。ただし、Sencha TouchをCordovaで使用していない人にはあまり良くありません。
AppDelegate.m in didFinishLaunchingWithOptions event（コードの最後の行の直前に "return YES;"）内に次のコードを記述します。
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
フィードバックをお待ちしています！ :)
.plistファイルセットプロパティで：
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
StatusBarを非表示にします。
使用できる最善の方法は、特にアプリケーションでフッターを使用する場合、メインビューのサイズを変更することです。
mainViewController.mで[super viewDidLoad];の後にviewDidLoadメソッドを使用して
NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[vComp objectAtIndex:0] intValue] >= 7) {
// iOS 7 or above
CGRect oldBounds = [self.view bounds];
CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 );
CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 );
[self.view setBounds:newViewBounds];
[self.webView setBounds:newWebViewBounds];
}
その後、アプリケーションにJavaScriptを変更する必要はありません。
私はこのルートに行き始めましたが、core viewを使用した独自のナビゲーションコントロールがあり、通常はコアを共通のタイトルバーとtabbarでラップするフレームにスライドします。 storyboard、UINavigationControllerはありません。
ステータスバーの20ピクセルの加算と減算が複雑になり始めました。その後、ひらめき。
.xib fileのコピーを作成し、XcodeにiOS 7レイアウトとして表示するよう指示し、すべてを再調整し、コードに単一の6/7スイッチを配置しました..すぐに、すべてが正常に機能し、追加リソースバンドルに8Kのみを追加します。
IOS 7.0.4のリリースで、現在のプロジェクトでiOS7の修正が壊れました。これは、修正なしで7.0.4が機能するためです。そのため、マイナーリリース3以下を実行している場合に実行するマイナーコントロールを追加しました。
NSArray *vComp = [[UIDevice currentDevice].systemVersion componentsSeparatedByString:@"."];
if ([[vComp objectAtIndex:0] intValue] == 7 && [[vComp objectAtIndex:1] intValue] == 0 && [[vComp objectAtIndex:2] intValue] <= 3 ) {
CGRect oldBounds = [self.view bounds];
CGRect newViewBounds = CGRectMake( 0, -10, oldBounds.size.width, oldBounds.size.height-20 );
CGRect newWebViewBounds = CGRectMake( 0, -20, oldBounds.size.width, oldBounds.size.height-40 );
[self.view setBounds:newViewBounds];
[self.webView setBounds:newWebViewBounds];
}
Jsファイル内でこれを確認することもできます
if (parseFloat(window.device.version) >= 7.0) {
$("body").addClass("ios7");
}
.cssファイルで、このクラスを定義します
.ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane {
margin-top: 17px !important;
}
私は最初にiOS7向けに開発しますが、iOS6との互換性を保つために、Gimiが提案したのとまったく逆のことを行います-MainViewController.mでy Origin 20pxを設定し、ビューの高さを20px増やします：
//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;
}
CSSとJavascriptを使用した私のアプローチは次のとおりです。
1） CSSで以下を定義します。
#ios7-statusbar-fix {
width:100%;
height:20px;
background-color:white;
position:fixed;
z-index:10000;
margin-top:-20px;
display:none;
}
2）<body>- tagの後の最初の要素として、このidを持つdiv-containerを追加します。
<body>
<div id="ios7-statusbar-fix"></div>
…
） iOS 7デバイスをフィルタリングし、Javascript経由で変更を適用します。
if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) {
document.body.style.marginTop = '20px';
document.getElementById('ios7-statusbar-fix').style.display = 'block';
}
iPhoneXの場合
上記のすべての答えについて：
IPhoneXのステータスバーの高さは44であり、20ではありません
上記の回答の中には、20pxの画面境界を設定した場合に上部に黒いバーが表示されるものと、webview.frame.size.height -20pxを使用した場合にwebview画面を縮小し続けるものがあります。それからこれを試してください、それはどんなiosでも動作し、CSSを変更する必要はなく、中に入れます
- (void)webViewDidFinishLoad:(UIWebView*)theWebView {
// IOS7以上ですか
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
//デバイスの画面サイズを取得
CGRect screenBounds = [[UIScreen mainScreen] bounds];
//高さを20px減らします
int x= screenBounds.size.height -20;
// WebViewのトップ位置を20pxに設定してステータスバーの下に表示し、サイズを20px減らします
[theWebView setFrame:CGRectMake(0, 20, theWebView.frame.size.width, x )];
}