Area sicura di Xcode 9


150

Durante l'esplorazione di Xcode9 Beta Trovate aree sicure su builder di interfacce Visualizza il visualizzatore di gerarchie. Mi sono incuriosito e ho cercato di conoscere la documentazione di Safe Area on Apples, in sostanza il documento dice "L'area di visualizzazione che interagisce direttamente con il layout automatico" Ma non mi ha soddisfatto, voglio sapere Uso pratico di questa nuova cosa.

Qualcuno ha qualche indizio?

inserisci qui la descrizione dell'immagine

Paragrafo di conclusione dal documento Apple per area sicura.

La classe UILayoutGuide è progettata per eseguire tutte le attività precedentemente eseguite da viste fittizie, ma per farlo in un modo più sicuro ed efficiente. Le guide di layout non definiscono una nuova vista. Non partecipano alla gerarchia di viste. Al contrario, definiscono semplicemente una regione rettangolare nel sistema di coordinate della vista proprietaria che può interagire con il layout automatico.


1
Puoi guardare la sessione del WWDC. Tutto è spiegato lì. Non sono sicuro del nome. Qualcosa con Xcode o InterfaceBuilder nel suo nome.
Maik639,

Risposte:


282

Safe Area è una guida di layout (Guida di layout di Safe Area ) .
La guida al layout che rappresenta la parte della vista non oscurata da barre e altri contenuti. In iOS 11+, Apple sta deprecando le guide di layout superiore e inferiore e le sostituisce con una singola guida di layout di area sicura.

Quando la vista è visibile sullo schermo, questa guida riflette la parte della vista che non è coperta da altri contenuti. L'area sicura di una vista riflette l'area coperta da barre di navigazione, barre delle schede, barre degli strumenti e altri antenati che oscurano la vista di un controller di vista. (In tvOS, l'area sicura incorpora la cornice dello schermo, come definita dalla overscanCompensationInsetsproprietà di UIScreen.) Copre anche qualsiasi spazio aggiuntivo definito dalla additionalSafeAreaInsetsproprietà del controller di visualizzazione . Se la vista non è attualmente installata in una gerarchia di vista o non è ancora visibile sullo schermo, la guida del layout corrisponde sempre ai bordi della vista.

Per la vista radice del controller di visualizzazione, l'area sicura in questa proprietà rappresenta l'intera parte del contenuto del controller di visualizzazione che è oscurata e tutti gli inserti aggiuntivi specificati. Per altre viste nella gerarchia della vista, l'area sicura riflette solo la parte di quella vista che è oscurata. Ad esempio, se una vista si trova interamente nell'area sicura della vista radice del controller di vista, gli inserimenti dei bordi in questa proprietà sono 0.

Secondo Apple, Xcode 9 - Nota di rilascio
Interface Builder utilizza UIView.safeAreaLayoutGuide in sostituzione delle guide di layout obsolete Top e Bottom in UIViewController. Per utilizzare la nuova area sicura, selezionare Guide layout area sicura nella finestra di ispezione File per il controller di visualizzazione, quindi aggiungere vincoli tra il contenuto e i nuovi ancoraggi area sicura. Questo impedisce che i tuoi contenuti vengano oscurati dalle barre superiore e inferiore e dalla regione di overscan su tvOS. I vincoli nell'area di sicurezza vengono convertiti in Alto e Basso quando si esegue la distribuzione in versioni precedenti di iOS.

inserisci qui la descrizione dell'immagine


Ecco un semplice riferimento come confronto (per ottenere effetti visivi simili) tra la Guida al layout (in alto e in basso) esistente e la Guida al layout in area sicura.

Layout dell'area sicura: inserisci qui la descrizione dell'immagine

AutoLayout

inserisci qui la descrizione dell'immagine


Come lavorare con il layout dell'area sicura?

Seguire questi passaggi per trovare la soluzione:

  • Abilita 'Layout area sicura', se non abilitato.
  • Rimuovere "tutti i vincoli" se mostrano una connessione con Super View e ricollegare tutti con un ancoraggio di layout sicuro. OPPURE Fare doppio clic su un vincolo e modificare la connessione dalla vista super all'ancoraggio SafeArea

Ecco un'istantanea di esempio, come abilitare il layout dell'area sicura e modificare il vincolo.

inserisci qui la descrizione dell'immagine

Ecco il risultato delle modifiche sopra

inserisci qui la descrizione dell'immagine


Progettazione del layout con SafeArea
Quando si progetta per iPhone X, è necessario assicurarsi che i layout riempiano lo schermo e non siano oscurati dagli angoli arrotondati del dispositivo, dalla custodia del sensore o dall'indicatore per accedere alla schermata Home.

inserisci qui la descrizione dell'immagine

La maggior parte delle app che utilizzano elementi dell'interfaccia utente standard forniti dal sistema come barre di navigazione, tabelle e raccolte si adattano automaticamente al nuovo fattore di forma del dispositivo. I materiali di sfondo si estendono ai bordi del display e gli elementi dell'interfaccia utente sono opportunamente inseriti e posizionati.

inserisci qui la descrizione dell'immagine

Per le app con layout personalizzati, anche il supporto di iPhone X dovrebbe essere relativamente semplice, soprattutto se l'app utilizza il layout automatico e aderisce alle guide di layout dell'area sicura e dei margini.

inserisci qui la descrizione dell'immagine


Ecco un esempio di codice (Rif. Da: Guida al layout dell'area sicura ) :
se si creano vincoli nel codice, utilizzare la proprietà safeAreaLayoutGuide di UIView per ottenere gli ancoraggi di layout pertinenti. Ricreamo l'esempio sopra di Interface Builder nel codice per vedere come appare:

Supponendo che abbiamo la vista verde come proprietà nel nostro controller di vista:

private let greenView = UIView()

Potremmo avere una funzione per impostare le viste e i vincoli chiamati da viewDidLoad:

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

Crea i vincoli di margine iniziali e finali come sempre usando layoutMarginsGuide della vista radice:

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

Ora, a meno che non si stia prendendo di mira solo iOS 11, sarà necessario racchiudere i vincoli della guida del layout dell'area sicura con #available e tornare alle guide di layout superiore e inferiore per le versioni precedenti di iOS:

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}


Risultato:

inserisci qui la descrizione dell'immagine


Dopo l' UIViewestensione, ti consente di lavorare con SafeAreaLayout in modo programmatico.

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

Ecco il codice di esempio in Objective-C :


Ecco la documentazione ufficiale per gli sviluppatori Apple per la guida al layout delle aree sicure


Area protetta è necessaria per gestire il design dell'interfaccia utente per iPhone-X. Ecco le linee guida di base su Come progettare l'interfaccia utente per iPhone-X usando Safe Area Layout


Per quanto riguarda la differenza tra marginse view.leadingAnchor: quando usi let margins = view.layoutMarginsGuidee usi successivamente margins.leadingAnchor, stai vincolando la vista ai margini della vista. Ciò aggiungerà ulteriore spazio ai lati. Se non lo desideri, usa semplicemente view.leadingAnchore view.trailingAnchornon vedrai spazi bianchi a sinistra o a destra ...
Miele

"L'area di sicurezza di una vista riflette l'area coperta da barre di navigazione, barre di tabulazione, barre degli strumenti e altri antenati che oscurano la vista di un controller di visualizzazione" Non vuoi dire non coperto? Il documento dice "non oscurato da barre e altri contenuti".
Miele

Ho visto uno strano comportamento in Xcode 10.1 in cui l'area sicura non si estende fino alla parte inferiore dello schermo in una vista a schermo intero. Credo di averlo causato trascinando accidentalmente una "barra delle schede" in basso, quindi eliminandola. Ho trovato questa riga nel file .storyboard che ho eliminato manualmente con un editor di testo. <simulatedToolbarMetrics key = "simulatedBottomBarMetrics" />. Questo l'ha risolto.
Dave Hubbard l'

20

Voglio menzionare qualcosa che mi ha colpito per primo quando stavo cercando di adattare un'app basata su SpriteKit per evitare i bordi arrotondati e la "tacca" del nuovo iPhone X, come suggerito dalle più recenti Linee guida per l'interfaccia umana : la nuova proprietà safeAreaLayoutGuidedei UIViewbisogni di eseguire una query dopo che la vista è stata aggiunta alla gerarchia (ad esempio, attivata -viewDidAppear:) al fine di segnalare un frame di layout significativo (altrimenti restituisce solo la dimensione dello schermo intero).

Dalla documentazione della proprietà:

La guida al layout che rappresenta la parte della vista non oscurata da barre e altri contenuti. Quando la vista è visibile sullo schermo , questa guida riflette la parte della vista che non è coperta da barre di navigazione, barre delle schede, barre degli strumenti e altre viste degli antenati. (In tvOS, l'area di sicurezza riflette l'area non coperta dalla cornice dello schermo.) Se la vista non è attualmente installata in una gerarchia di viste o non è ancora visibile sullo schermo, i bordi della guida del layout sono uguali ai bordi della vista .

(enfatizzare il mio)

Se lo leggi già -viewDidLoad:, layoutFramela guida sarà {{0, 0}, {375, 812}}invece del previsto{{0, 44}, {375, 734}}


Anch'io. Salto sempre alle proprietà disponibili di un tipo, guidato solo dai loro nomi, senza leggere completamente i documenti ...
Nicolas Miari,

18

inserisci qui la descrizione dell'immagine

  • All'inizio di iOS 7,0-11,0 < Deprecato > UIKitutilizza il topLayoutGuide & bottomLayoutGuide che è UIViewdi proprietà
  • iOS11 + utilizza safeAreaLayoutGuide che è anche UIViewproprietà

  • Attiva la casella di controllo Guida layout area sicura da File Inspector.

  • Le aree sicure consentono di posizionare le viste all'interno della parte visibile dell'interfaccia generale.

  • In tvOS , l'area sicura include anche inserti overscan dello schermo, che rappresentano l'area coperta dalla cornice dello schermo.

  • safeAreaLayoutGuide riflette la parte della vista che non è coperta da barre di navigazione, barre di tabulazione, barre degli strumenti e altre viste di antenati.
  • Usa le aree sicure come ausilio per disporre i tuoi contenuti come UIButton ecc.

  • Durante la progettazione per iPhone X, devi assicurarti che i layout riempiano lo schermo e non siano oscurati dagli angoli arrotondati del dispositivo, dalla custodia del sensore o dall'indicatore per accedere alla schermata Home.

  • Assicurati che gli sfondi si estendano ai bordi del display e che i layout scorrevoli verticalmente, come tabelle e raccolte, proseguano fino in fondo.

  • La barra di stato è più alta su iPhone X che su altri iPhone. Se l'app assume un'altezza fissa della barra di stato per posizionare i contenuti sotto la barra di stato, è necessario aggiornare l'app per posizionare dinamicamente i contenuti in base al dispositivo dell'utente. Tieni presente che la barra di stato su iPhone X non cambia altezza quando sono attive attività in background come la registrazione vocale e il rilevamento della posizione print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

  • L'altezza del contenitore degli indicatori domestici è di 34 punti.

  • Una volta abilitata la Guida al layout dell'area sicura, è possibile visualizzare le proprietà dei vincoli dell'area sicura elencate nel builder di interfaccia.

inserisci qui la descrizione dell'immagine

È possibile impostare vincoli con rispettivo self.view.safeAreaLayoutGuideas-

objC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

Swift:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

inserisci qui la descrizione dell'immagine

inserisci qui la descrizione dell'immagine

inserisci qui la descrizione dell'immagine


Trovo questa guida a punti elenco molto utile, ma cosa significa esattamente "L'area sicura non copre le barre di navigazione, le barre delle schede, le barre degli strumenti e le altre viste degli antenati"?
Chewie The Chorkie,

1
Esempio - Come nella barra degli strumenti precedente dell'ultima schermata (Oggi, Calendari e Posta in arrivo) che non è coperta da safreAreaGuide
Jack

8

Apple ha introdotto topLayoutGuide e bottomLayoutGuide come proprietà di UIViewController in iOS 7. Ti hanno permesso di creare vincoli per impedire che i tuoi contenuti vengano nascosti dalle barre UIKit come lo stato, la navigazione o la barra delle schede. Queste guide di layout sono obsolete in iOS 11 e sostituite da un'unica guida di layout di aree sicure.

Fare riferimento al collegamento per ulteriori informazioni.


5

La Guida al layout dell'area sicura consente di evitare la sovrapposizione di elementi dell'interfaccia utente del sistema durante il posizionamento di contenuti e controlli.

L'Area sicura è l'area tra gli elementi dell'interfaccia utente del sistema che sono Barra di stato, Barra di navigazione e Barra degli strumenti o Barra delle schede. Pertanto, quando aggiungi una barra di stato alla tua app, l'area sicura si restringe. Quando aggiungi una barra di navigazione all'app, l'area di sicurezza si restringe di nuovo.

Sull'iPhone X, l'area di sicurezza fornisce un riquadro aggiuntivo dai bordi superiore e inferiore dello schermo in verticale anche quando non viene visualizzata alcuna barra. In orizzontale, l'area sicura è inserita dai lati degli schermi e dall'indicatore home.

Questo è tratto dal video di Apple Designing per iPhone X in cui vengono anche visualizzati gli effetti di diversi elementi sull'area sicura.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.