iOS 7 Status bar dengan Phonegap

Di iOS 7, aplikasi Phonegap akan muncul di bawah bilah status. Ini dapat mempersulit untuk mengklik tombol / menu yang telah ditempatkan di bagian atas layar.

Apakah ada seseorang yang mengetahui cara untuk memperbaiki masalah bilah status ini di iOS 7 di aplikasi Phonegap?

Saya sudah mencoba mengimbangi seluruh halaman web dengan CSS tetapi sepertinya tidak berhasil. Apakah ada cara untuk mengimbangi seluruh UIWebView atau hanya membuat bilah status berperilaku seperti di iOS6?

Terima kasih

Saya menemukan jawaban di utas lain, tetapi saya akan menjawab pertanyaan itu jika orang lain bertanya-tanya.

Hanya mengganti viewWillAppeardi MainViewController.mdengan ini:

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

Selain perbaikan ukuran Ludwig Kristoffersson, saya sarankan untuk mengubah warna bilah status:

- (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;
}

tolong, instal plugin itu untuk phonegap: https://build.phonegap.com/plugins/505

Dan gunakan setelan yang benar seperti di bawah ini, untuk mengontrol hamparan tampilan web:

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

Bagi saya, dengan Phonegap 3.3.0 ini berfungsi.

Informasi lebih lanjut, di halaman proyek Github: https://github.com/phonegap-build/StatusBarPlugin

Untuk menyembunyikan bilah status, tambahkan kode berikut di file di MainViewController.mbawah fungsi-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Jawaban https://stackoverflow.com/a/19249775/1502287 berfungsi untuk saya, tetapi saya harus mengubahnya sedikit agar berfungsi dengan plugin kamera (dan kemungkinan lainnya) dan tag meta viewport dengan "height = device- height "(tidak menyetel bagian tinggi akan menyebabkan keyboard muncul di atas tampilan dalam kasus saya, menyembunyikan beberapa input di sepanjang jalan).

Setiap kali Anda membuka tampilan kamera dan kembali ke aplikasi Anda, metode viewWillAppear akan dipanggil, dan tampilan Anda akan menyusut sebesar 20px.

Selain itu, tinggi perangkat untuk viewport akan menyertakan 20 piksel ekstra, membuat konten dapat digulir dan 20 piksel lebih tinggi dari tampilan web.

Inilah solusi lengkap untuk masalah kamera:

Di MainViewController.h:

@interface MainViewController : CDVViewController
@property (atomic) BOOL viewSizeChanged;
@end

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

Sekarang untuk masalah viewport, di pendengar acara perangkat Anda, tambahkan ini (menggunakan 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');
}

Ini adalah viewport yang saya gunakan untuk versi lain:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

Dan semuanya bekerja dengan baik sekarang.

Coba masuk ke file aplikasi (app name)-Info.plistdi XCode dan tambahkan kuncinya

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

Ini bekerja untuk saya tanpa masalah.

Untuk Cordova 3.1+, ada plugin yang menangani perubahan perilaku bilah status untuk iOS 7+.

Ini didokumentasikan dengan baik di sini , termasuk bagaimana bilah status dapat dikembalikan ke status pra-iOS7.

Untuk menginstal plugin, jalankan:

cordova plugin add org.apache.cordova.statusbar

Kemudian tambahkan ini ke config.xml

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

Saya menyelesaikan masalah saya dengan menginstal org.apache.cordova.statusbardan menambahkan di atas saya config.xml:

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

Konfigurasi ini hanya berfungsi untuk iOS 7+

Referensi: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Lihat plugin Cordova StatusBar baru yang mengatasi masalah tersebut. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution opsi # 3

Saya menggunakan potongan kode berikut untuk menambahkan kelas ke tubuh, jika iOS7 terdeteksi. Saya kemudian menata kelas itu untuk menambahkan 20pxmargin di bagian atas wadah saya. Pastikan Anda telah memasang plugin "device" dan kode ini ada di dalam acara "deviceready".

Dari membaca, saya telah mendengar bahwa pembaruan berikutnya untuk Phonegap (3.1 Saya yakin) akan lebih mendukung perubahan pada bilah status iOS7. Jadi ini mungkin hanya diperlukan sebagai perbaikan jangka pendek.

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

Jawaban Ludwig berhasil untuk saya.

Bagi siapa pun yang menggunakan jawabannya dan sekarang ingin mengubah warna margin putih (mungkin tampak sepele, tetapi membuat saya bingung), lihat ini:

Bagaimana cara mengubah warna latar belakang UIWebView setelah menggeser ke bawah UIWebView untuk memperbaiki masalah hamparan bilah status iOS7?

Cara lain adalah kompatibel ke belakang . Buat HTML sesuai dengan iOS 7(dengan margin tambahan 20px di atas) untuk memberikan full screentampilan itu dan potong margin ekstra itu iOS < 7.0. Sesuatu seperti berikut ini 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;
  }
}

Solusi ini tidak akan meninggalkan bilah hitam di atas iOS 7.0dan di atasnya, yang menurut pengguna iOS modern akan dianggap aneh dan lama .

Tulis kode berikut di dalam AppDelegate.m di acara didFinishLaunchingWithOptions (persis sebelum baris terakhir kode " return YES; "):

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

Saya akan menunggu tanggapan Anda! :)

jika kami menggunakan plugin kamera untuk galeri gambar, bilah status akan kembali jadi untuk memperbaiki masalah itu tambahkan baris ini

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

untuk

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

fungsi di dalam CVDCamera.m dalam daftar plugin

Tulis kode berikut di dalam AppDelegate.m di acara didFinishLaunchingWithOptions saat memulai.

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

Dan perbaiki untuk iOS di atas 7 ke atas.

Untuk menjaga bilah status tetap terlihat dalam potret tetapi menyembunyikannya dalam lanskap (yaitu layar penuh), coba yang berikut ini:

Masuk MainViewController.h:

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

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

Ini adalah kombinasi dari apa yang saya temukan dalam diskusi ini dan diskusi StackOverflow tertaut, beberapa kode dari plugin Cordova StatusBar (agar tidak meng-hardcode nilai 20px), dan beberapa mantera di pihak saya (saya bukan pengembang iOS jadi Saya meraba-raba jalan ke solusi ini).

Pertama-tama, Tambahkan plugin Perangkat di proyek Anda. ID Plugin adalah: org.apache.cordova.device dan repositori adalah: https://github.com/apache/cordova-plugin-device.git

Setelah itu gunakan fungsi ini dan panggil di setiap halaman atau layar: -

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

Cara terbaik untuk mengontrol latar belakang Status Bar - 2017

Setelah frustasi terus menerus, banyak pencarian di Internet, ini adalah langkah-langkah yang perlu Anda ambil:

1. Pastikan Anda menggunakan Plugin Status Bar
2. Tambahkan pengaturan ini ke config.xml Anda:

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

3. Gunakan kode berikut di onDeviceReady

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

Ini berfungsi untuk saya di iOS & Android.

Semoga berhasil!