Phonegap이있는 iOS 7 상태 표시 줄

Phonegap이있는 iOS 7 상태 표시 줄

---

iOS 7에서는 Phonegap 애플리케이션이 상태 표시 줄 아래에 나타납니다. 이로 인해 화면 상단에있는 버튼 / 메뉴를 클릭하기 어려울 수 있습니다.

Phonegap 애플리케이션의 iOS 7에서이 상태 표시 줄 문제를 해결하는 방법을 아는 사람이 있습니까?

CSS로 전체 웹 페이지를 오프셋하려고 시도했지만 작동하지 않는 것 같습니다. 전체 UIWebView를 오프셋하거나 상태 표시 줄이 iOS6에서와 같이 동작하도록하는 방법이 있습니까?

감사

---

다른 스레드에서 답변을 찾았지만 다른 사람이 궁금해 할 경우 질문에 답변하겠습니다.

그냥 교체 viewWillAppear에 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 픽셀의 추가 픽셀이 포함되어 콘텐츠를 스크롤 가능하고 웹뷰보다 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.plistXCode 의 앱 파일로 이동하여 키를 추가하십시오.

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');
}

---

Ludwig의 대답 은 저에게 효과적 이었습니다.

그의 대답을 사용하고 지금 흰색 여백의 색상을 변경하려는 사람은 (사소 해 보일지 모르지만 나를 당황하게 만들었습니다) 다음을 참조하십시오.

iOS7 상태 표시 줄 오버레이 문제를 해결하기 위해 UIWebView를 아래로 슬라이드 한 후 UIWebView 배경색을 어떻게 변경할 수 있습니까?

---

또 다른 방법은 이전 버전과 호환되는 것 입니다. iOS 7(위에 20px 추가 여백이있는) 에 따라 HTML을 만들어 그 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;
  }
}

This solution won't leave a black bar on top for iOS 7.0 and above, which a modern iOS user will find odd and old.

---

Write the following code inside AppDelegate.m in didFinishLaunchingWithOptions event (exactly before its last line of code "return YES;" ) :

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

I'll wait for your feedback! :)

---

if we use camera plugin for image gallery, status bar will come back so to fix that issue please add this line

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

to

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

function inside CVDCamera.m in plugins list

---

Write the following code inside AppDelegate.m in didFinishLaunchingWithOptions event at starting.

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

And fix for above iOS 7 and above.

---

To keep the status bar visible in portrait but hide it in landscape (i.e. fullscreen), try the following:

In MainViewController.h:

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

In 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];
}

This is a combination of what I've found in this and linked StackOverflow discussions, some code from the Cordova StatusBar plugin (so as not to hardcode the 20px value), and some incantations on my part (I'm not an iOS dev so I fumbled my way to this solution).

---

First of all, Add the Device plugin in you project. Plugin Id is: org.apache.cordova.device and repository is: https://github.com/apache/cordova-plugin-device.git

After that use this function and call it on every page or screen:-

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");
    }
}

---

The best way to control Status Bar background - 2017

After ongoing frustration, a lot of search on the Internet, these are the steps you need to take:

1. Make sure that you use Status Bar Plugin
2. Add this setting to your config.xml:

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

3. Use the following code on onDeviceReady

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

It's works for me in iOS & Android.

Good luck!

참고URL : https://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap