Jak pojawia się czarny pasek stanu na iPhone X na iOS 11

Question

Domyślnie pasek stanu na iPhone X wygląda następująco:

Ale chciałbym aby to osiągnąć:

Próbowałem ustawić preferredStatusBarStyle na lightContent, ale zadziałało to tylko po ustawieniu tła za pasku stanu na czarny.

Aby naprawić zaokrąglone rogi, doszedłem do dodania kolejnego wydziału z zaokrąglonymi narożnikami.

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     view.backgroundColor = .black 

     let roundedView = UIView(
      frame: CGRect(
       x: 0, 
       y: UIApplication.shared.statusBarFrame.height, 
       width: view.frame.width, 
       height: view.frame.height 
      ) 
     ) 
     roundedView.layer.cornerRadius = 10 
     roundedView.layer.masksToBounds = true 
     roundedView.backgroundColor = .white 
     view.addSubview(roundedView) 

     let label = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 60)) 
     label.text = "Black statusbar!" 
     label.textAlignment = .center 
     roundedView.addSubview(label) 
    } 

    override var preferredStatusBarStyle: UIStatusBarStyle { 
     return .lightContent 
    } 
} 

Zastanawiam się, czy to jest najlepsze podejście .. musi być lepszy sposób, aby to osiągnąć.

---

UPDATE

To straszny pomysł, ponieważ:

• Jako @Moritz punktów obecnie, Apple's guidelines wyraźnie zabrania tego:

Nie mama sk lub zwróć szczególną uwagę na kluczowe funkcje wyświetlania. Nie należy próbować ukrywać zaokrąglonych rogów urządzenia, obudowy czujnika ani wskaźnika w celu uzyskania dostępu do ekranu głównego przez umieszczenie czarnych pasów na górze i dole ekranu . Nie należy używać ozdób wizualnych, takich jak zamki, ramki, kształty lub teksty instruktażowe, aby zwrócić szczególną uwagę na te obszary.

• Zaokrąglone rogi w górnej części widoku może wyglądać dobrze, ale trzeba będzie dodać wyjątków w kodzie, aby upewnić się, że zaokrąglone narożniki nie są pokazane na innych iPhone'ów. Będziesz musiał umieścić to we wszystkich twoich ViewControllers/Storyboards. To nie jest takie wspaniałe.

• Zaokrąglone rogi u dołu widoku będą wyświetlane bezpośrednio na zrzutach ekranu, ale narożniki u góry (ustawione ręcznie) nie będą widoczne. To będzie brzydkie, gdy użytkownicy będą udostępniać Twoją aplikację.

Answer 1

Układ bezpiecznego obszaru to rozwiązanie Twojego problemu.

Próbowałem podążać za rozwiązaniem w moich istniejących projektach i działa dobrze.

• Ustaw czarny kolor tła (lub jakikolwiek chcesz) do głównego widoku kontrolera widoku.
• Teraz dodaj widok podrzędny (z białym tłem) i ustaw jego ograniczenia względem Układu bezpiecznego obszaru (lub postępuj zgodnie z przewodnikiem układu górnego i dolnego, jeśli wersja Xcode jest poniżej 9).
• Rozważ ten widok podrzędny (z białym tłem) jako główny widok i za jego pomocą przetestuj dalszy projekt.

Oto przykładowa migawka z wynikiem, Włączając lub wyłączając układ bezpiecznego obszaru, przetestowałem i zaimplementowałem.

FYI: W tych migawkach główny widok ma czerwone tło, a widok podrzędny ma niebieskie tło.

Safe Area Układ:

autoLayout