Interface Builder: À quoi servent les deltas de la mise en page iOS 6/7 d'UIView?

111

Je viens de remarquer la propriété Delta iOS 6/7 trouvée sous la disposition des structures de UIView.

À quoi sert-il et pourquoi est-ce absent de la mise en page automatique?

entrez la description de l'image ici

Frederick C. Lee
la source

Réponses:

83

Cela fait en fait référence au delta entre la position de mise en page d'iOS6 à iOS7.

Dans iOS7, certaines vues peuvent masquer la barre d'état ou la rendre transparente et, en fait, elle est superposée au-dessus de votre vue. Donc, si vous mettez un élément d'interface utilisateur à (0.0, 0.0) sur iOS6, il apparaîtra sous la barre d'état, mais sur iOS7, il apparaîtra partiellement couvert sous la barre d'état. Donc, dans ce cas, vous voudriez un delta qui correspond à la hauteur de la barre d'état (20,0 points) afin que la disposition soit la même dans iOS6 et iOS7.

Je pense que ce n'est pas nécessaire si vous utilisez la mise en page automatique, mais bien sûr, vous perdez le support iPad1, ce que beaucoup d'entre nous ne sont pas prêts à concéder pour le moment.

digarok
la source
27
Pour moi, j'ai trouvé que c'était le delta d'iOS 7 à iOS 6. J'ai abaissé mes éléments de 20 points, puis mis un -20 pour Delta Y.
guptron
ceci est particulièrement utile avec le UIProgressView qui est beaucoup plus mince sous iOS 7
Lee Probert
108

Remarque: j'ai remarqué cette question il y a quelque temps, mais je ne publie ma réponse que maintenant car la NDA a été levée

Pourquoi n'apparaît-il pas pour la mise en page automatique?

Comme vous l'avez peut-être remarqué, iOS 7 apporte un tout nouveau look. L'apparence des éléments de l'interface utilisateur a changé, mais certaines de leurs tailles (ou métriques en général) ont également changé. Cela peut rendre la conception de l'interface compatible avec iOS 7 et ses prédécesseurs un peu pénible.

La ligne officielle d'Apple est d'utiliser AutoLayout pour résoudre ce problème; cela devrait vous éviter les tracas liés à la présentation des éléments de l'interface utilisateur. Parfois, l'incorporer n'est pas facile, surtout si vous devez toujours prendre en charge iOS 5 pour des raisons professionnelles, ou si vos interfaces sont gérées de manière à rendre la mise en œuvre automatique difficile. En tant que tel, Apple semble avoir fourni un moyen de rendre votre travail un peu plus facile si vous tombez dans cette catégorie de niche, et ils ont appelé cet iOS 6/7 Deltas.

Ok alors, qu'est-ce que ça fait?

Bien que l'étiquette dans Interface Builder ne soit pas un peu claire sur ce que signifie `` Delta '' dans ce contexte, le code contenu dans le fichier .xib qui correspond à cette fonctionnalité est un peu plus clair:

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

Le nom de la clé insetFor6xAndEarlierindique explicitement ce que cela fait; vous pouvez fournir des insertions alternatives pour les éléments de l'interface utilisateur lorsqu'ils sont exécutés sur les prédécesseurs d'iOS 7. Par exemple, ce qui précède définit le changement de delta suivant:

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

Alors que les valeurs stockées dans le .xib ne correspondent pas directement aux valeurs citées, il existe une corrélation entre elles.

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

Les images ci-dessous montrent ce changement visuellement. C'est un exemple assez extrême, mais c'est pour démontrer sa capacité. Je ne m'attendrais en pratique qu'à des changements delta de quelques pixels seulement.

Vue iOS7

Vue iOS6

Vous remarquerez peut-être que les valeurs sont inverses pour la vue iOS 6; c'est parce que les deltas sont relatifs au type de vue avec lequel vous travaillez. Si vous éditez pour iOS 6, les deltas existent afin de transformer correctement l'élément pour iOS 7 (l'inverse de l'exemple ci-dessus).

Afin d'afficher les différents styles, vous pouvez modifier la façon dont Interface Builder le présente en fonction du système d'exploitation sur lequel il s'exécuterait. Ceci est contenu dans le document Inspecteur de fichiers-> Interface Builder (1er onglet sur la barre de droite), comme suit:

Commutateur de style d'interface

Cela existe-t-il si j'aime coder mon interface à la main?

Pas directement, mais vous pouvez facilement obtenir le même effet en effectuant des vérifications conditionnelles de la version du système d'exploitation dans votre code et en définissant la position / taille correcte en conséquence. La capacité delta existe dans Interface Builder car il n'y aurait pas de moyen simple d'avoir un positionnement conditionnel sans avoir de code pour le faire, et le but d'Interface Builder est de retirer autant de code que possible pour l'interface utilisateur.

Global...

Apple vous recommande vivement d'utiliser AutoLayout, cela vous facilite la vie dans la plupart des cas. Si vous ne pouvez pas l'utiliser (pour les raisons mentionnées ci-dessus), les deltas vous offrent la flexibilité de positionner vos éléments d'interface utilisateur de manière appropriée, en fonction des métriques du système d'exploitation actuel, sans avoir besoin de les repositionner manuellement dans le code. Un bon exemple est d'ajuster l'absence de barre d'état, mais il existe de nombreux autres cas d'utilisation.

Naturellement, si vous développez uniquement pour iOS7 et supérieur, vous n'avez pas besoin de connaître cette fonctionnalité / ne la découvrirez pas. Vous n'avez besoin de deltas que si vous avez besoin d'appareils iOS6 exécutant votre application avec le SDK iOS7, sans mise en page automatique.

Au moment de la rédaction de cet article (21 août), je ne trouve aucune documentation concernant cette fonctionnalité, ni aucune mention dans le matériel de la WWDC. J'ai eu une pièce de théâtre, et après quelques recherches, c'est ce que j'ai découvert.

WDUK
la source
2
Merci beaucoup WDUK
Kamar Shad
Aucune propriété pour l'instant, c'est ce que j'avais besoin de savoir
Jasper
30

Je sais que cela a déjà été répondu, il suffit d'ajouter une petite variante en espérant que cela pourrait également aider ceux qui n'utilisent pas la mise en page automatique et souhaitent toujours prendre en charge iOS 6.1 et les versions antérieures.

Lisez ce guide de transition d'Apple - Prise en charge de la version antérieure

Choisissez "Afficher sous" sur "iOS 7.0 et versions ultérieures"

entrez la description de l'image ici

Interface utilisateur de base pour iOS 7. Pour iOS 6, indiquez une valeur delta appropriée. Utilisez l'aperçu pour voir comment cela s'affichera sur les appareils iOS 7 et iOS 6.

entrez la description de l'image ici

Étapes rapides:

Sélectionnez chaque enfant immédiat de la vue racine individuellement et ajoutez 20 px à sa valeur «Y».

entrez la description de l'image ici

Ensuite, sélectionnez tous les enfants immédiats collectivement et donnez le delta Y à -20px. Vous pouvez également le faire par lots ou individuellement.

entrez la description de l'image ici

Saran
la source
9

La mise en page automatique nécessite au moins iOS 6.0. Si vous souhaitez prendre en charge iOS 5.0, vous ne pouvez pas utiliser la mise en page automatique.

Et ces deltas sont utilisés pour vous aider à ajuster la position de la vue sur différentes versions d'iOS (principalement iOS 7 et iOS version inférieure à 7).

J'utilise ces valeurs pour m'aider à aimer cette image. entrez la description de l'image ici

soleil heureux
la source
1
Lorsque je change cela, rien ne se passe du tout, y a-t-il une autre étape?
Acier recyclé
@RecycledSteel voir ma réponse ici: lien
Riskov
3

Pour voir iOS 6/7 Delta en action, je vais faire une démonstration avec un SegmentedControl qui apparaît correctement sur les appareils iOS 6 et iOS 7.

Tout d'abord, sélectionnez votre .Xib ou ViewController dans Storyboard. Décochez Utiliser la mise en page automatique et sélectionnez " Afficher sous iOS 7 et versions ultérieures "

entrez la description de l'image ici

Dans le canevas Interface Builder, placez votre SegmentedControl de sorte que son origine.y soit 20. Dans iOS 6/7 Delta, choisissez -20 pour DeltaY

entrez la description de l'image ici

Cela rendra votre SegmentedControl placé sous la barre d'état dans les appareils iOS 6 et iOS 7

entrez la description de l'image ici entrez la description de l'image ici

Autres citations utiles du guide du développeur sur la barre d'état iOS 7

Les deltas peuvent être définis individuellement pour chaque vue et fonctionnent comme prévu. Si votre storyboard ou nib est configuré pour afficher comme iOS 6, alors la définition des deltas entraînera le décalage et / ou le redimensionnement de cette vue du montant delta défini lors de l'exécution dans iOS 7. Alternativement, si votre storyboard ou nib est configuré pour afficher sous iOS 7, les deltas seront appliqués lors de l'exécution sous iOS 6

onmyway133
la source
0

Si vous utilisez AutoLayout, alors Delta n'est pas disponible. Essayez ceci (testé sur iPhone 4s sous 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;
}
}
Marcelo dos Santos
la source