Top Banner

of 129

Meetup CocoaHeads Montpellier : conf©rence sur l'Auto Layout

Feb 07, 2017

ReportDownload

Technology

backelite

  • AUTO LAYOUTCOCOAHEADS - MONTPELLIER - 12 MAI 2016

  • 13 MAI 2016 BACKELITEBACKELITE

    SOMMAIRE

    Introduction Comprendre lAuto Layout Utiliser lAuto Layout Matriser lAuto Layout Bonnes pratiques

    2

  • INTRODUCTION

  • 13 MAI 2016 BACKELITE

    UTILISATION MULTI-CONTEXTE

    Linterface utilisateur doit rpondre dynamiquement 2 types de changements :

    changements externes

    changements internes

    4

  • 13 MAI 2016 BACKELITE

    CHANGEMENTS EXTERNES

    Utilisateur redimensionne la fentre de lapplication (OS X) Utilisateur ouvre / ferme le Split View sur un iPad La rotation de lappareil Lapparition / disparition de la barre de status en mode (enregistrement,

    appel en cours) Le support de diffrentes catgories de tailles dcran (size classes) Le support de diffrentes tailles dcran

    5

  • 13 MAI 2016 BACKELITE

    CHANGEMENTS INTERNES

    Le contenu affich change Le support de linternationalisation le support des types dynamiques

    6

  • LES TROIS APPROCHES PRINCIPALES

    7

    Les Frames LAutoresizingMask LAuto Layout

  • 13 MAI 2016 BACKELITE

    LES FRAMES

    Le calcul des frames : le moyen le plus flexible et le plus puissant

    mais

    ne supporte que les changements externes requiert un effort considrable pour designer, dbogguer et maintenir leffort augmente d'autant plus que l'interface doit tre dynamique.

    8

  • 13 MAI 2016 BACKELITE

    LAUTORESIZINGMASK

    Simplifie la cration de mise en page (layout) Permet dallger leffort de design

    mais

    Ne convient que pour des agencements simples. Ne supporte que les changements externes.

    9

  • 13 MAI 2016 BACKELITE

    LAUTO LAYOUT

    Supporte les changements externes et internes. Gre une plus large palette dagencement. Allge leffort de design, de dboggage et de maintenance mme pour les

    mises en page complexe.

    10

  • COMPRENDRE L'AUTO LAYOUT

  • 13 MAI 2016 BACKELITE

    QUEST CE QUE LAUTO LAYOUT ?

    LAuto Layout

    est un systme dagencement, de mise en page, descriptif bas sur des contraintes

    12

    Calcule dynamiquement la taille ainsi que les dimensions de toutes les vues de la hirarchie en fonction de contraintes places sur ces vues.

  • 13 MAI 2016 BACKELITE

    ANATOMIE DUNE CONTRAINTE

    13

  • 13 MAI 2016 BACKELITE

    LES ATTRIBUTS

    14

  • 13 MAI 2016 BACKELITE

    LES RELATIONS

    // Egalit Blue.leading = 1.0 * Red.trailing + 8.0

    // Supriorit View.width >= 0.0 * NotAnAttribute + 40.0 // Infriorit View.width

  • 13 MAI 2016 BACKELITE

    LES PRIORITS

    Priorit vont de 1 1000 Required est 1000 DefaultHigh est 750 DefaultLow est 250 Les priorits les plus fortes lemporte

    16

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    La plupart des vues nont pas de taille prfixe Dautres ont une taille prdfinie

    sizeToFit sizeThatFits:

    Avec lAuto Layout, cette taille se nomme lintrinsicContentSize

    17

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    18

    Vue Intrinsic Content Size

    UIView -

    UISlider Largeur

    UILabels, UIButton, UISwitch, UITextfield Hauteur et largeur

    UITextView, UIImageView Peut vari

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    intrinsicContentSize() est mieux que sizeToFit() Appeler invalidateIntrinsicContentSize() chaque que lintrinsicContentSize

    doit tre recalcul

    19

    public func intrinsicContentSize() -> CGSize

    public func invalidateIntrinsicContentSize()

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    LintrinsicContentSize gnre deux contraintes par dimensions

    20

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    LintrinsicContentSize gnre deux contraintes par dimensions

    21

    view.height >= 0.0 x NotAnAttribute + intrinsicContentSize.height

    view.height

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    LintrinsicContentSize gnre deux contraintes par dimensions

    22

    view.height >= 0.0 x NotAnAttribute + intrinsicContentSize.height view.width >= 0.0 x NotAnAttribute + intrinsicContentSize.width

    view.height

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    LintrinsicContentSize gnre deux contraintes par dimensions

    23

    view.height >= 0.0 x NotAnAttribute + intrinsicContentSize.height view.width >= 0.0 x NotAnAttribute + intrinsicContentSize.width

    view.height

  • 13 MAI 2016 BACKELITE

    INTRINSIC CONTENT SIZE

    LintrinsicContentSize gnre deux contraintes par dimensions

    24

    view.height >= 0.0 x NotAnAttribute + intrinsicContentSize.height view.width >= 0.0 x NotAnAttribute + intrinsicContentSize.width

    view.height

  • 13 MAI 2016 BACKELITE

    CONTENT HUGGING & CONTENT COMPRESSION

    25

  • 13 MAI 2016 BACKELITE

    CONTENT HUGGING & CONTENT COMPRESSION

    Il est possible de modifier leur priorits

    26

    func setContentHuggingPriority(priority: UILayoutPriority, forAxis axis: UILayoutConstraintAxis)

    func setContentCompressionResistancePriority(priority: UILayoutPriority, forAxis axis: UILayoutConstraintAxis)

  • 13 MAI 2016 BACKELITE

    LE PROCESSUS DAGENCEMENT

    27

    Vues

    Contraintes

    Priorits

    intrinsic ContentSize

    Moteur dagencement (layout engine)

    Mise en page (layout)

  • 13 MAI 2016 BACKELITE

    LE PROCESSUS DAGENCEMENT

    28

    Constraints

    change

    Update Pass

    Layout Pass

    Display

    Application Run Loop

  • 13 MAI 2016 BACKELITE

    LE PROCESSUS DAGENCEMENT

    Les changements dune contrainte activation / dsactivation changement de la constant ou de la priorit suppression de la vue dans la hirarchie

    Le moteur dagencement recalcule la mise en page : lorsquil reoit de nouvelles valeurs Les vues appellent superview.setNeedsLayout()

    29

  • 13 MAI 2016 BACKELITE

    LE PROCESSUS DAGENCEMENT

    updateConstraintes est appel A chaque cycle du moteur dagencement Lorsquon fait appel setNeedsUpdateConstraintes()

    Overrider lorsque : Les changements des contraintes est trop lents Une vue fait rgulirement des changements sur ses contraintes Appel du super la fin de la mthode

    30

  • 13 MAI 2016 BACKELITE

    LE PROCESSUS DAGENCEMENT

    La phase de Layout

    Traverse la hirarchie de vue de haut en bas Appel layoutSubviews()

    Positionne les frames de chaque sous-vue Copie les frames venant du moteur dagencement

    31

  • 13 MAI 2016 BACKELITE

    LES PROBLMES QUE LON PEUT RENCONTRER

    Layout ambigu : plusieurs agencements sont possibles Pas assez de contraintes Contraintes optionnels dont la priorit sont gales

    Layout insatisfait : aucun agencement possible Certaines contraintes se contredisent

    32

  • UTILISER L'AUTO LAYOUT

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Le canvas permet :

    de crer rapidement, via un clique droit + glisser, une contrainte entre deux vue.

    34

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Le panneau Structure de document permet :

    de lister les contraintes de crer via un clique droit +

    glisser rapidement des contraintes entre deux vues.

    35

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Loutil dalignement permet de rapidement ajouter des contraintes sur les centres et les bordures

    36

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Loutils de rsolutions des problmes dAuto Layout permet :

    dajouter les contraintes manquantes

    de repositionner et redimensionner les vues mal positionnes

    de faire une remise zro des contraintes

    de supprimer tous les contraintes

    37

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Linspecteur de taille permet :

    de lister toutes les contraintes qui affectent la vue slectionne.

    de filtrer les contraintes suivant les classes de tailles.

    de filtrer les contraintes par leur type attributs (leading, trailing)

    38

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Linspecteur de taille permet :

    de modifier rapidement la constante, la relation et la priorit dune contrainte

    39

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Linspecteur dattributs permet :

    de modifier la relation, la priorit, la constante, le multiplier de la contrainte

    dintervertir le premier et le deuxime lment

    de marquer la contrainte comme fictive

    40

  • 13 MAI 2016 BACKELITE

    VIA INTERFACE BUILDER

    Linspecteur dattributs permet :

    de modifier les priorits des content hugging et content compression

    de dfinir une largeur et une hauteur fictives pour le contenu (intrinsicContentSize)

    41

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    item1.attribute1 = multiplier x item2.attribute2 + constant

    42

    public convenience init(item view1: AnyObject, attribute attr1: NSLayoutAttribute, relatedBy relation: NSLayoutRelation, toItem view2: AnyObject?, attribute attr2: NSLayoutAttribute, multiplier: CGFloat, constant c: CGFloat)

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = sup