Thanh trạng thái iOS 7 với Bản đồ điện thoại

Question 1

Trong iOS 7, các ứng dụng Phonegap sẽ xuất hiện bên dưới thanh trạng thái. Điều này có thể gây khó khăn khi nhấp vào các nút / menu đã được đặt ở đầu màn hình.

Có ai đó biết cách khắc phục sự cố thanh trạng thái này trên iOS 7 trong ứng dụng Phonegap không?

Tôi đã cố gắng bù đắp toàn bộ trang web bằng CSS nhưng dường như nó không hoạt động. Có cách nào để bù đắp toàn bộ UIWebView hay chỉ làm cho thanh trạng thái hoạt động như trong iOS6?

Cảm ơn

Question 2

Tôi đã tìm thấy câu trả lời trên một chủ đề khác, nhưng tôi sẽ trả lời câu hỏi trong trường hợp ai đó thắc mắc.

Chỉ cần thay thế viewWillAppeartrong MainViewController.mvới điều này:

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

Ngoài bản sửa lỗi thay đổi kích thước của Ludwig Kristoffersson, tôi khuyên bạn nên thay đổi màu thanh trạng thái:

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

vui lòng cài đặt plugin đó cho phonegap: https://build.phonegap.com/plugins/505

Và sử dụng cài đặt chính xác như bên dưới, để kiểm soát lớp phủ của chế độ xem web:

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

Đối với tôi, với Phonegap 3.3.0, nó hoạt động.

Thông tin thêm, trên trang dự án Github: https://github.com/phonegap-build/StatusBarPlugin

Question 5

Để ẩn thanh trạng thái, hãy thêm mã sau vào tệp MainViewController.mdưới hàm-(void)viewDidUnload

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Question 6

Câu trả lời https://stackoverflow.com/a/19249775/1502287 phù hợp với tôi, nhưng tôi phải thay đổi một chút để làm cho nó hoạt động với plugin camera (và có thể là các plugin khác) và thẻ meta viewport với "height = device- height "(không đặt phần chiều cao sẽ khiến bàn phím xuất hiện trên chế độ xem trong trường hợp của tôi, ẩn một số đầu vào trên đường đi).

Mỗi lần bạn mở chế độ xem camera và quay lại ứng dụng của mình, phương thức viewWillAppear sẽ được gọi và chế độ xem của bạn sẽ thu nhỏ 20px.

Ngoài ra, chiều cao thiết bị cho chế độ xem sẽ bao gồm thêm 20 px, hiển thị nội dung có thể cuộn và cao hơn 20px so với webview.

Đây là giải pháp hoàn chỉnh cho vấn đề máy ảnh:

Trong MainViewController.h:

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

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

Bây giờ đối với vấn đề về khung nhìn, trong trình nghe sự kiện đã thiết bị của bạn, hãy thêm điều này (sử dụng 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');
}

Đây là khung nhìn tôi sử dụng cho các phiên bản khác:

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

Và tất cả đều hoạt động tốt.

Question 7

Hãy thử truy cập (app name)-Info.plisttệp của ứng dụng trong XCode và thêm các khóa

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

Điều này làm việc cho tôi mà không có vấn đề.

Question 8

Đối với Cordova 3.1+, có một plugin xử lý sự thay đổi hành vi của thanh trạng thái cho iOS 7+.

Đây là tài liệu độc đáo ở đây , bao gồm cả cách thanh trạng thái có thể được hoàn nguyên về trạng thái trước iOS7.

Để cài đặt plugin, hãy chạy:

cordova plugin add org.apache.cordova.statusbar

Sau đó thêm nó vào config.xml

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

Question 9

Tôi giải quyết vấn đề của mình bằng cách cài đặt org.apache.cordova.statusbarvà thêm vào trên cùng của tôi config.xml:

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

Các cấu hình này chỉ hoạt động cho iOS 7+

Tham khảo: http://devgirl.org/2014/07/31/phonegap-developers-guid/

Question 10

Xem plugin Cordova StatusBar mới giải quyết vấn đề chính xác. http://docs.icenium.com/troubleshooting/ios7-status-bar#solution option # 3

Question 11

Tôi sử dụng đoạn mã sau để thêm một lớp vào nội dung, nếu iOS7 được phát hiện. Sau đó, tôi định kiểu lớp đó để thêm 20pxlề ở đầu vùng chứa của mình. Đảm bảo rằng bạn đã cài đặt plugin "thiết bị" và mã này nằm trong sự kiện "deviceready".

Từ việc đọc xung quanh, tôi đã nghe nói rằng bản cập nhật tiếp theo cho Phonegap (tôi tin rằng 3.1) sẽ hỗ trợ tốt hơn các thay đổi đối với thanh trạng thái của iOS7. Vì vậy, điều này có thể chỉ cần thiết như một bản sửa lỗi ngắn hạn.

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

Question 12

Câu trả lời của Ludwig phù hợp với tôi.

Đối với bất kỳ ai đã sử dụng câu trả lời của mình và hiện đang tìm cách thay đổi màu của lề trắng (có vẻ tầm thường, nhưng tôi đã bối rối), hãy xem điều này:

Làm cách nào để thay đổi màu nền UIWebView sau khi trượt UIWebView xuống để khắc phục sự cố lớp phủ thanh trạng thái iOS7?

Question 13

Một cách khác là tương thích ngược . Tạo HTML theo iOS 7(với lề thêm 20px ở trên cùng) để có full screengiao diện như vậy và cắt bớt lề thừa đó đi iOS < 7.0. Một cái gì đó như sau trong 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;
  }
}

Giải pháp này sẽ không để lại thanh màu đen ở trên iOS 7.0và ở trên, điều mà người dùng iOS hiện đại sẽ thấy kỳ quặc và cũ kỹ .

Question 14

Viết mã sau bên trong AppDelegate.m trong sự kiện didFinishLaunchingWithOptions (chính xác trước dòng mã cuối cùng của nó " return YES; "):

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

Tôi sẽ đợi phản hồi của bạn! :)

Question 15

nếu chúng tôi sử dụng plugin camera cho thư viện hình ảnh, thanh trạng thái sẽ quay lại, vì vậy để khắc phục sự cố đó, vui lòng thêm dòng này

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

đến

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

chức năng bên trong CVDCamera.m trong danh sách plugin

Question 16

Viết mã sau bên trong AppDelegate.m trong sự kiện didFinishLaunchingWithOptions khi bắt đầu.

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

Và sửa lỗi cho iOS 7 trở lên.

Question 17

Để giữ thanh trạng thái hiển thị ở chế độ dọc nhưng ẩn nó ở chế độ ngang (tức là toàn màn hình), hãy thử các cách sau:

Trong MainViewController.h:

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

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

Đây là sự kết hợp giữa những gì tôi đã tìm thấy trong này và các cuộc thảo luận StackOverflow được liên kết, một số mã từ plugin Cordova StatusBar (để không mã hóa giá trị 20px) và một số câu thần chú về phía tôi (tôi không phải là nhà phát triển iOS nên Tôi đã tìm cách của tôi để giải pháp này).

Question 18

Trước hết, Thêm plugin Thiết bị vào dự án của bạn. Id plugin là: org.apache.cordova.device và kho lưu trữ là: https://github.com/apache/cordova-plugin-device.git

Sau đó, sử dụng chức năng này và gọi nó trên mọi trang hoặc màn hình: -

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

Cách tốt nhất để kiểm soát nền Thanh trạng thái - 2017

Sau khi liên tục thất vọng, tìm kiếm rất nhiều trên Internet, đây là những bước bạn cần thực hiện:

Đảm bảo rằng bạn sử dụng Plugin thanh trạng thái
Thêm cài đặt này vào config.xml của bạn:

<tên sở thích = "StatusBarOverlaysWebView" value = "false" />

Sử dụng mã sau trên onDeviceReady

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

Nó hoạt động cho tôi trên iOS và Android.

Chúc may mắn!