Interface Builder: a cosa servono i Delta iOS 6/7 del layout di UIView?


111

Ho appena notato la proprietà Delta di iOS 6/7 che si trova sotto il layout delle strutture di UIView.

A cosa serve e perché manca da AutoLayout?

inserisci qui la descrizione dell'immagine

Risposte:


83

Questo in realtà si riferisce al Delta tra la posizione del layout da iOS6 a iOS7.

In iOS7, alcune visualizzazioni possono nascondere la barra di stato o renderla trasparente e, in effetti, è sovrapposta alla tua visualizzazione. Quindi, se metti un elemento dell'interfaccia utente su (0.0, 0.0) su iOS6, apparirà sotto la barra di stato, ma su iOS7 apparirà parzialmente coperto sotto la barra di stato. Quindi in quel caso vorresti un delta che corrisponda all'altezza della barra di stato (20,0 punti) in modo che il layout sia lo stesso in iOS6 e iOS7.

Credo che questo non sia necessario se usi il layout automatico, ma ovviamente perdi il supporto per iPad1, cosa che molti di noi non sono disposti a concedere in questo momento.


27
Per me, ho scoperto che è il delta da iOS 7 a iOS 6. Ho abbassato i miei elementi di 20 punti, quindi ho impostato un -20 per Delta Y.
guptron

questo è particolarmente utile con UIProgressView che è molto più sottile in iOS 7
Lee Probert,

108

Nota: ho notato questa domanda qualche tempo fa, ma sto solo postando la mia risposta ora perché l'NDA è stato revocato

Perché non viene visualizzato per AutoLayout?

Come avrai notato, iOS 7 presenta un aspetto completamente nuovo. L'aspetto degli elementi dell'interfaccia utente è cambiato, ma anche alcune delle loro dimensioni (o metriche in generale). Questo può rendere il design dell'interfaccia per ospitare sia iOS 7 che i suoi predecessori un po 'un problema.

La linea ufficiale di Apple è quella di utilizzare AutoLayout per risolvere questo problema; questo dovrebbe richiedere molto il fastidio di disporre gli elementi dell'interfaccia utente per te. A volte incorporare questo non è facile, soprattutto se devi ancora supportare iOS 5 per motivi di lavoro o se le tue interfacce sono gestite in un modo che rende difficile l'implementazione del layout automatico. In quanto tale, Apple sembra aver fornito un modo per rendere il tuo lavoro un po 'più semplice se rientri in questa categoria di nicchia, e hanno chiamato questo iOS 6/7 Delta.

Ok allora, cosa fa?

Sebbene l'etichetta in Interface Builder sia un po 'poco chiara su cosa significhi "Delta" in questo contesto, il codice contenuto nel file .xib che corrisponde a questa funzione è un po' più chiaro:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

Il nome della chiave insetFor6xAndEarlierindica esplicitamente cosa fa; puoi fornire inserti alternativi per gli elementi dell'interfaccia utente quando eseguito sui predecessori di iOS 7. Ad esempio, quanto sopra definisce la seguente modifica delta:

x: 50
y: 100
width: -100
height: 200

Sebbene i valori memorizzati in .xib non corrispondano direttamente ai valori citati, esiste una correlazione tra di loro.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

Le immagini seguenti mostrano visivamente questo cambiamento. È un esempio piuttosto estremo, ma serve a dimostrare la sua abilità. In pratica, mi aspetterei solo di avere cambiamenti delta di pochi pixel.

Visualizzazione iOS7

Visualizzazione iOS6

Potresti notare che i valori sono inversi per la visualizzazione iOS 6; questo perché i delta sono relativi al tipo di vista con cui stai lavorando. Se stai modificando per iOS 6, i delta ci sono per trasformare correttamente l'elemento per iOS 7 (il contrario dell'esempio sopra).

Per visualizzare i diversi stili, è possibile modificare il modo in cui Interface Builder lo presenta in base al sistema operativo su cui sarebbe in esecuzione. Questo è contenuto in File Inspector-> Interface Builder Document (1a scheda sulla barra di destra), in questo modo:

Switch stile interfaccia

Esiste se mi piace codificare manualmente la mia interfaccia?

Non direttamente, ma è possibile ottenere facilmente lo stesso effetto effettuando controlli condizionali sulla versione del sistema operativo all'interno del codice e impostando di conseguenza la posizione / dimensione corretta. L'abilità delta esiste in Interface Builder perché non ci sarebbe un modo semplice per avere un posizionamento condizionale senza avere il codice per farlo, e il punto di Interface Builder è quello di ottenere un gran numero di codice fuori mano possibile per l'interfaccia utente.

Complessivamente...

Apple consiglia vivamente di utilizzare AutoLayout, ti semplifica la vita nella maggior parte dei casi. Se non è possibile utilizzarlo (per i motivi sopra menzionati), i delta offrono la flessibilità di posizionare gli elementi dell'interfaccia utente in modo appropriato, in base alle metriche del sistema operativo corrente, senza la necessità di riposizionarli manualmente nel codice. Un buon esempio è correggere la mancanza della barra di stato, ma ci sono molti altri casi d'uso.

Naturalmente, se stai sviluppando solo per iOS7 e versioni successive, non è necessario conoscere questa funzione / non la scoprirai. Solo se è necessario che i dispositivi iOS6 eseguano la tua applicazione quando sono costruiti con l'SDK iOS7, senza il layout automatico, hai bisogno dei delta.

Al momento della scrittura (21 agosto), non riesco a trovare alcuna documentazione relativa a questa funzione, né alcuna menzione nel materiale WWDC. Ho fatto un gioco e, dopo un po 'di ricerca, questo è quello che ho scoperto.


2
Grazie mille WDUK
Kamar Shad

Nessuna proprietà finora, questo è quello che avevo bisogno di sapere
Jasper

30

So che è già stata data una risposta, aggiungendo solo una piccola variante sperando che possa aiutare anche coloro che non utilizzano il layout automatico e vogliono comunque supportare iOS 6.1 e versioni precedenti.

Leggi questa Guida alla transizione di Apple - Supporto della versione precedente

Scegli "Visualizza come" su "iOS 7.0 e versioni successive"

inserisci qui la descrizione dell'immagine

Interfaccia utente di base per iOS 7. Per iOS 6 fornire un valore delta adeguato. Usa l'anteprima per vedere come verrà eseguito il rendering nel dispositivo iOS 7 e iOS 6.

inserisci qui la descrizione dell'immagine

Passaggi rapidi:

Seleziona singolarmente ogni figlio immediato della vista root e aggiungi 20px al suo valore "Y".

inserisci qui la descrizione dell'immagine

Quindi, seleziona tutti i figli immediati collettivamente e assegna delta Y come -20px. Puoi anche farlo in batch o individualmente.

inserisci qui la descrizione dell'immagine


9

Il layout automatico richiede almeno iOS 6.0. Se vuoi supportare iOS 5.0 non puoi usare AutoLayout.

E questi delta vengono utilizzati per aiutarti a regolare la posizione di visualizzazione su diverse versioni di iOS (principalmente iOS 7 e versioni iOS inferiori a 7).

Uso questi valori per aiutarmi a apprezzare questa immagine. inserisci qui la descrizione dell'immagine


1
Quando li cambio non succede nulla, c'è un altro passaggio coinvolto?
Acciaio riciclato

@RecycledSteel vedi la mia risposta qui: link
Riskov

3

Per vedere iOS 6/7 Delta in azione, farò una demo con un SegmentedControl che appare correttamente su entrambi i dispositivi iOS 6 e iOS 7.

Per prima cosa, seleziona il tuo .Xib o ViewController in Storyboard. Deseleziona Usa layout automatico e seleziona " Visualizza come iOS 7 e versioni successive "

inserisci qui la descrizione dell'immagine

Nell'area di disegno di Interface Builder, posiziona il tuo SegmentedControl in modo che la sua origine.y sia 20. In iOS 6/7 Delta, scegli -20 per DeltaY

inserisci qui la descrizione dell'immagine

Questo renderà il tuo SegmentedControl posizionato sotto la barra di stato in entrambi i dispositivi iOS 6 e iOS 7

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine

Altre citazioni utili dalla Guida per sviluppatori alla barra di stato di iOS 7

I delta possono essere impostati individualmente per ogni vista e funzionano come ci si aspetterebbe. Se lo storyboard o il pennino è impostato per essere visualizzato come iOS 6, l'impostazione dei delta causerà lo spostamento e / o il ridimensionamento della vista in base alla quantità delta impostata quando viene eseguito in iOS 7. In alternativa, se lo storyboard o il pennino è impostato per la visualizzazione in iOS 7, i delta verranno applicati se eseguito in iOS 6


0

Se utilizzi AutoLayout, Delta non è disponibile. Prova questo (testato su iPhone 4s con iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
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.