Comment obtenir une barre d'état noire sur iPhone X sur iOS 11

Question

Par défaut, la barre d'état d'un iPhone X ressemble à ceci:

Mais je voudrais y parvenir:

J'ai essayé de définir preferredStatusBarStyle sur lightContent mais cela n'a fonctionné qu'après avoir défini l'arrière-plan derrière la barre d'état sur noir.

Pour corriger les coins arrondis, j'ai fini par ajouter une autre sous-vue avec des coins arrondis.

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

Je me demande si c'est la meilleure approche .. il doit y avoir une meilleure façon d'y parvenir.

---

[~ # ~] mise à jour [~ # ~]

C'est une terrible idée car:

• Comme le souligne @ Moritz , le directives d'Apple l'interdit explicitement:

Ne masquez pas et n'attirez pas particulièrement l'attention sur les principales fonctions d'affichage. N'essayez pas de masquer les coins arrondis de l'appareil, le boîtier du capteur ou l'indicateur d'accès à la Écran d'accueil en plaçant des barres noires en haut et en bas de l'écran. N'utilisez pas d'ornements visuels tels que des crochets, des lunettes, des formes ou du texte pédagogique pour attirer une attention particulière sur ces zones.

• Les coins arrondis en haut de la vue peuvent sembler agréables, mais vous devrez ajouter des exceptions dans le code pour vous assurer que les coins arrondis ne sont pas affichés sur d'autres iPhones. Vous devrez le mettre dans tous vos ViewControllers/Storyboards .. Ce n'est pas si bien.

• Les coins arrondis en bas de la vue apparaîtront directement dans les captures d'écran, mais les coins en haut (définis manuellement) ne le seront pas. Ce sera moche lorsque les utilisateurs partageront votre application.

Answer 1

La disposition des zones sûres est une solution à votre problème.

J'ai essayé de suivre la solution dans mes projets existants et cela fonctionne bien.

• Définissez la couleur d'arrière-plan noir (ou ce que vous voulez) sur la vue principale de votre contrôleur de vue.
• Ajoutez maintenant une vue enfant (avec un fond blanc) et définissez ses contraintes par rapport à la disposition de la zone de sécurité (ou suivez le guide de disposition supérieur et inférieur si la version Xcode est inférieure à 9).
• Considérez cette vue enfant (avec un fond blanc) comme vue principale et traitez la conception ultérieure avec elle.

Voici un exemple d'instantané avec résultat. En activant ou désactivant la disposition de la zone de sécurité, j'ai testé et implémenté.

FYI: Dans ces instantanés, la vue principale a un fond rouge et la vue enfant a une couleur de fond bleu.

Disposition de la zone de sécurité:

Mise en page automatique