iOS 7 Status bar dengan Phonegap


91

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


apa sebenarnya "masalah status bar"? Ada kode contoh untuk direproduksi?
Raptor

1
@ShivanRaptor Dengan iOS 7, bilah status sekarang menjadi bagian dari tampilan, jadi jika Anda memiliki hal-hal yang berada di bagian atas layar dengan versi iOS sebelumnya, sekarang berada di bawah bilah status, tidak secara otomatis didorong tepat di bawahnya, yang mana dapat menyebabkan beberapa masalah. Saran saya adalah membuat pembungkus untuk konten Anda, dan mengatur margin-top 20px.
Andrew Lively

@AndrewLively - Ini tidak benar-benar berfungsi saat halaman di-scroll, apakah ada cara untuk memindahkan UIWebView?
Luddig

Jawaban:


143

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

9
Apakah ada orang lain yang menggunakan ini dengan plugin In App Browser? Jika saya mengonfigurasi In App Browser sebagai "presentationstyle = layar penuh", margin bawah kosong akan muncul setelah browser ditutup. Sepertinya margin tersebut sama tingginya dengan toolbar InAppBrowser. Menyetel jenis presentasi ke "lembar halaman" akan memperbaiki hal ini di iPad, tetapi iPhone tampaknya selalu menggunakan "layar penuh". Ada solusi?
Paul

1
Sangat berterima kasih atas jawabannya - namun masalah yang sama berlaku untuk browser PhoneGap inApp - ini juga melapisi bilah status. Ada ide untuk itu?
Michael

2
Ya, kami menggunakan Cordova versi lama (2.3.0), dan untuk memperbaikinya Anda harus menyetel webViewBounds.origin.y = 20; di createViewsWithOptions. Juga, lihat apakah warna latar belakang disetel dan bermain-main dengannya. Lakukan pemeriksaan versi untuk iOS7 dan di atasnya, seperti dalam jawaban luar biasa dari LudWig Kristoffersson ini.
hnilsen

3
Juga - jika Anda menggunakan InAppBrowser, tampilan akan diinisialisasi ulang setiap kali Anda kembali. Jadi, akan lebih bijaksana untuk menambahkan tanda yang mengatakan itu sudah dijalankan ke MainViewController.m Anda.
hnilsen

14
Karena kode ini berjalan di viewWillAppear, Anda akan mengalami masalah dengan solusi ini jika aplikasi PhoneGap / Cordova Anda menampilkan tampilan asli lainnya (seperti dialog pengambilan kamera) dan kembali ke tampilan ini. Perbaikan bagi saya adalah menginisialisasi 'viewBounds' menjadi '[self.view bounds]' bukan '[self.webView bounds]'.
Chris Karcher

37

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

1
Bekerja Hebat :) Terima kasih banyak :)
rkaartikeyan

Sempurna - ini adalah solusi yang lebih baik untuk saya.
David Daudelin

Perbaikan ini berfungsi secara lokal setelah pembuatan Xcode, tetapi tidak setelah saya melakukan pembuatan peta telepon. Ada ide? Saya memiliki aplikasi ios yang dibangun dengan phonegap 2.9
DemitryT

Solusi ini berfungsi tetapi saya memiliki masalah dengan video layar penuh dan saya menemukan yang lain ini dan memperbaiki masalah saya zsprawl.com/iOS/2013/10/fixing-the-phonegap-status-bar-in-ios7
magorich

1
@KirankumarSripati sebenarnya solusi terakhir saya adalah ini Saya harap ini bekerja untuk Anda NSInteger screenSize = 0; // Global if ([[[UIDevice currentDevice] systemVersion] floatValue]> = 7) {CGRect viewBounds = [self.webView bounds]; viewBounds.origin.y = 20; jika (screenSize == 0) {viewBounds.size.height = viewBounds.size.height - 20; screenSize = viewBounds.size.height; } self.webView.frame = viewBounds; } Saya melakukannya karena ukuran aplikasi saya
berubah

22

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


Terima kasih banyak atas jawaban ini !! Saya mencoba dengan plugin ini: build.phonegap.com/plugins/715 , masalahnya adalah namanya sama. Tapi tidak pernah berhasil untukku. Terima kasih banyak!!
Jabel Márquez

Sejujurnya, saya tidak ingat apakah saya mencoba sebelum yang ini disebutkan oleh Anda.
xdemocle

20

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

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Ini berhasil. Ini akan menyembunyikan bilah status yang membuat aplikasi Anda menjadi layar penuh. Saya hanya mengujinya di simulator tetapi akan melaporkannya nanti ketika saya menjalankan build di iPhone dan iPad saya.
Rob Evans

Bekerja untuk saya di iOS pada iPad 2
Mark Williams

Ini berfungsi dengan baik di iPad Air iOS 7.1.2 dan tidak perlu ada perubahan atau plugin apa pun. Jawaban yang bagus, terima kasih!
Scriptlabs

Ini sepenuhnya mengabaikan semua yang dikatakan Apple tentang 'mode layar penuh imersif "dalam Panduan Antarmuka Manusia ... hanya karena Anda menggunakan pembungkus di atas iOS tidak berarti Anda dapat mengabaikan pola desain ...: /
jesses .co.tt

15

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.


Metode apa pun tanpa Jquery @dieppe
Arjun T Raj

cukup tambahkan kode ini ke - (void) imagePickerController: (UIImagePickerController *) picker didFinishPickingMediaWithInfo: (NSDictionary *) info {} metode di dalam CDVCamera.m yang juga memecahkan masalah kamera. NSLog (@ "KAMERA TERTUTUP"); [[UIApplication sharedApplication] setStatusBarHidden: YES withAnimation: UIStatusBarAnimationNone];
Arjun T Raj

Sobat, aku tidak tahu kata-kata untuk mengucapkan terima kasih! Saya telah berjuang dengan masalah penyusutan 20px dengan kamera, dan tidak dapat menemukan solusinya sampai sekarang ...
tuks

6

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.


Bagi saya, ini berfungsi di simulator dengan build lokal, tetapi tidak di iPad dengan build jarak jauh. Menggunakan PG 3.1 untuk build dan iOS7 di simulator dan iPad.
Per Quested Aronsson

@PerQuestedAronsson Anda mungkin ingin mencoba membangunnya secara lokal di iPad. Saya bekerja dengan iPad iOS7 dengan phonegap 3.1 tanpa masalah.
dk123

6

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" />

Anda juga dapat menyetel warna StatusBar yang secara default menjadi hitam: <preference name = "StatusBarBackgroundColor" value = "# 000000" /> Lihat: plugins.cordova.io/#/package/org.apache.cordova.statusbar
ezzadeen

2
Untuk Cordova 5+, plugin telah diganti namanya: plugin cordova tambahkan cordova-plugin-statusbar
raider33

5

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/



1

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


1

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 .


0

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! :)


Kode ini tampaknya berfungsi dengan baik untuk menyembunyikan bilah status dan memperbaiki masalah, saya juga melihat-lihat sedikit kemarin dan menemukan kedamaian kode yang pada dasarnya mengubah ukuran UIWebView dan memindahkannya ke bawah Saya menambahkan ini sebagai jawaban juga :)
Luddig

Itu hebat. Kode saya hanya menggunakan cara yang sederhana dan mudah untuk melakukannya! Kita semua melakukan hal yang sama dengan metode yang berbeda :)
Ehsan

0

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


0

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.


0

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).


0

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

0

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" />

  1. Gunakan kode berikut di onDeviceReady

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

Ini berfungsi untuk saya di iOS & Android.

Semoga berhasil!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.