แถบสถานะ iOS 7 พร้อม Phonegap

Question 1

ใน iOS 7 แอปพลิเคชัน Phonegap จะปรากฏใต้แถบสถานะ ซึ่งอาจทำให้การคลิกปุ่ม / เมนูที่วางไว้ด้านบนของหน้าจอทำได้ยาก

มีใครพอทราบวิธีแก้ไขปัญหาแถบสถานะบน iOS 7 ในแอปพลิเคชัน Phonegap บ้างไหม

ฉันได้พยายามชดเชยหน้าเว็บทั้งหมดด้วย CSS แต่ดูเหมือนจะไม่ได้ผล มีวิธีที่จะชอบชดเชย UIWebView ทั้งหมดหรือเพียงแค่ทำให้แถบสถานะทำงานเหมือนใน iOS6?

ขอบคุณ

Question 2

ฉันพบคำตอบในชุดข้อความอื่น แต่ฉันจะตอบคำถามนี้เผื่อว่ามีคนสงสัย

เพียงแค่เปลี่ยน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];
}

Question 3

นอกเหนือจากการแก้ไขการปรับขนาดของ 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;
}

Question 4

โปรดติดตั้งปลั๊กอินนั้นสำหรับ phonegap: https://build.phonegap.com/plugins/505

และใช้การตั้งค่าที่ถูกต้องดังต่อไปนี้เพื่อควบคุมการซ้อนทับของ webview:

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

สำหรับฉันด้วย Phonegap 3.3.0 มันใช้งานได้

ข้อมูลเพิ่มเติมในหน้าโครงการ Github: https://github.com/phonegap-build/StatusBarPlugin

Question 5

หากต้องการซ่อนแถบสถานะให้เพิ่มรหัสต่อไปนี้ในไฟล์MainViewController.mภายใต้ฟังก์ชัน-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Question 6

คำตอบhttps://stackoverflow.com/a/19249775/1502287ใช้ได้สำหรับฉัน แต่ฉันต้องเปลี่ยนเล็กน้อยเพื่อให้ใช้งานได้กับปลั๊กอินกล้อง (และอื่น ๆ ที่อาจเกิดขึ้น) และเมตาแท็กวิวพอร์ตที่มี "height = device- height "(การไม่ตั้งค่าส่วนความสูงจะทำให้แป้นพิมพ์ปรากฏเหนือมุมมองในกรณีของฉันโดยซ่อนอินพุตบางส่วนระหว่างทาง)

ทุกครั้งที่คุณเปิดมุมมองกล้องและกลับไปที่แอปของคุณเมธอด viewWillAppear จะถูกเรียกและมุมมองของคุณจะลดลง 20px

นอกจากนี้ความสูงของอุปกรณ์สำหรับวิวพอร์ตจะรวมพิกเซลพิเศษ 20 พิกเซลการแสดงผลเนื้อหาที่เลื่อนได้และสูงกว่ามุมมองเว็บ 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'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];
}

ตอนนี้สำหรับปัญหาวิวพอร์ตในอุปกรณ์ของคุณพร้อมฟังเหตุการณ์ให้เพิ่มสิ่งนี้ (โดยใช้ 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" />

และทั้งหมดทำงานได้ดีในขณะนี้

Question 7

ลองเข้าไปใน(app name)-Info.plistไฟล์ของแอพใน XCode แล้วเพิ่มคีย์

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

สิ่งนี้ใช้ได้กับฉันโดยไม่มีปัญหา

Question 8

สำหรับ 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" />

Question 9

ฉันแก้ปัญหาด้วยการติดตั้ง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/

Question 10

ดูปลั๊กอิน Cordova StatusBar ใหม่ซึ่งจัดการกับปัญหานั้นอย่างแน่นอน http://docs.icenium.com/troubleshooting/ios7-status-bar#solutionตัวเลือก # 3

Question 11

ฉันใช้โค้ดต่อไปนี้เพื่อเพิ่มคลาสให้กับร่างกายหากตรวจพบ iOS7 จากนั้นฉันจัดสไตล์คลาสนั้นเพื่อเพิ่ม20pxระยะขอบที่ด้านบนของคอนเทนเนอร์ของฉัน ตรวจสอบว่าคุณติดตั้งปลั๊กอิน "อุปกรณ์" แล้วและรหัสนี้อยู่ในเหตุการณ์ "deviceready"

จากการอ่านรอบ ๆ ฉันได้ยินว่าการอัปเดต Phonegap ครั้งต่อไป (3.1 ฉันเชื่อว่า) จะรองรับการเปลี่ยนแปลงแถบสถานะของ iOS7 ได้ดี ดังนั้นสิ่งนี้อาจจำเป็นในการแก้ไขระยะสั้น

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

Question 12

คำตอบของลุดวิกใช้ได้ผลกับฉัน

สำหรับใครก็ตามที่ใช้คำตอบของเขาและตอนนี้ต้องการเปลี่ยนสีของขอบสีขาว (อาจดูไม่สำคัญ แต่ก็ทำให้ฉันนิ่งงัน) ดูสิ่งนี้:

ฉันจะเปลี่ยนสีพื้นหลัง UIWebView หลังจากเลื่อนลง UIWebView เพื่อแก้ไขปัญหาการซ้อนทับแถบสถานะ iOS7 ได้อย่างไร

Question 13

อีกวิธีหนึ่งคือจะเข้ากันได้ย้อนหลัง ทำให้ 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 ที่ทันสมัยจะพบแปลกและเก่า

Question 14

เขียนโค้ดต่อไปนี้ภายในAppDelegate.mในเหตุการณ์didFinishLaunchingWithOptions (ก่อนบรรทัดสุดท้ายของโค้ด " return YES; "):

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

ฉันจะรอความคิดเห็นของคุณ! :)

Question 15

หากเราใช้ปลั๊กอินกล้องสำหรับแกลเลอรีรูปภาพแถบสถานะจะกลับมาเพื่อแก้ไขปัญหาดังกล่าวโปรดเพิ่มบรรทัดนี้

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

ถึง

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

ฟังก์ชันภายใน CVDCamera.m ในรายการปลั๊กอิน

Question 16

เขียนโค้ดต่อไปนี้ภายในAppDelegate.mในเหตุการณ์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 ขึ้นไป

Question 17

หากต้องการให้แถบสถานะมองเห็นได้ในแนวตั้ง แต่ซ่อนไว้ในแนวนอน (เช่นเต็มหน้าจอ) ให้ลองทำดังต่อไปนี้:

ใน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 ดังนั้น ฉันคลำหาวิธีแก้ปัญหานี้)

Question 18

ก่อนอื่นให้เพิ่มปลั๊กอินอุปกรณ์ในโปรเจ็กต์ของคุณ รหัสปลั๊กอินคือ: 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");
    }
}

Question 19

วิธีที่ดีที่สุดในการควบคุมพื้นหลังของแถบสถานะ - 2017

หลังจากเกิดความไม่พอใจอย่างต่อเนื่องมีการค้นหามากมายบนอินเทอร์เน็ตนี่คือขั้นตอนที่คุณต้องดำเนินการ:

ตรวจสอบให้แน่ใจว่าคุณใช้ปลั๊กอินแถบสถานะ
เพิ่มการตั้งค่านี้ใน config.xml ของคุณ:

<ค่ากำหนดชื่อ = "StatusBarOverlaysWebView" value = "false" />

ใช้รหัสต่อไปนี้บนonDeviceReady

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

มันใช้ได้สำหรับฉันใน iOS และ Android

โชคดี!