Top Banner

Click here to load reader

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 = superview.centerX

    43

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX

    44

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX

    45

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX

    46

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = 1.0 x superview.centerX

    47

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX

    48

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX

    49

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    VIA LE CODE

    button.centerX = superview.centerX + 0.0

    50

    NSLayoutConstraint(item: button, attribute: .CenterX, relatedBy: .Equal, toItem: superview, attribute: .CenterX, multiplier: 1.0,

    constant: 0.0)

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    button.bottom = superview.bottom -

    NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .Equal, toItem: superview, attribute: .Bottom, multiplier: 1.0,

    constant: -padding)

    VIA LE CODE

    51

    item1.attribute1 = multiplier x item2.attribute2 + constant

  • 13 MAI 2016 BACKELITE

    NSLAYOUTANCHOR

    Simplifie la cration de contrainte Facilite la lisibilit

    52

    b.topAnchor.constraintEqualToAnchor(view.topAnchor, constant:10)

    b.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant:10)

    NSLayoutConstraint(item:b, attribute: .Top, relatedBy: .Equal, toItem:view, attribute:.Top, multiplier:1, constant:10)

    NSLayoutConstraint(item:b, attribute:.Leading, relatedBy:.Equal, toItem:view, attribute:.Leading, multiplier:1, constant:10)

  • 13 MAI 2016 BACKELITE

    NSLAYOUTANCHOR

    Empche la cration de contrainte invalide

    53

    v1.leadingAnchor.constraintEqualToConstant(100) // Error: may not respond to method

    v1.leadingAnchor.constraintEqualToAnchor(v2.widthAnchor) // Error: incompatible pointer type

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    Simplifie la cration de contraintes Facilite la lisibilit Supporte les relations, les priorits, les alignements

    54

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    55

    cancelButton acceptButton

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    56

    [cancelButton]-[acceptButton]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    57

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton]-[acceptButton]", options: [], metrics: nil, views: viewsDictionary)

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    58

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton]-[acceptButton]", options: [], metrics: nil, views: viewsDictionary)

    let cancelButton: UIButton = let acceptButton: UIButton = let viewsDictionary = ["cancelButton": cancelButton, "acceptButton": acceptButton]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    59

    [cancelButton]-[acceptButton]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    60

    [cancelButton ] -[acceptButton ]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    61

    [cancelButton(72)]12-[acceptButton(50)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    62

    [cancelButton(72 )]12-[acceptButton(50)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    63

    [cancelButton(72@250)]12-[acceptButton(50)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    64

    [cancelButton(72@250)]12-[acceptButton(50)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    65

    [cancelButton(72@250)]12-[acceptButton( 50)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    66

    [cancelButton(72@250)]12-[acceptButton(>=50)]

  • 13 MAI 2016 BACKELITE

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton(72@250)]12-[acceptButton(>=50)]", options: [], metrics: nil, views: viewsDictionary)

    LE LANGUAGE DU FORMAT VISUEL

    67

  • 13 MAI 2016 BACKELITE

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton(72@250)]( )-[acceptButton(>=50)]", options: [], metrics: metricsDictionary, views: viewsDictionary)

    LE LANGUAGE DU FORMAT VISUEL

    68

  • 13 MAI 2016 BACKELITE

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton(72@250)](spacing)-[acceptButton(>=50)]", options: [], metrics: metricsDictionary, views: viewsDictionary)

    LE LANGUAGE DU FORMAT VISUEL

    69

  • 13 MAI 2016 BACKELITE

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton(72@ )](spacing)-[acceptButton(>=50)]", options: [], metrics: metricsDictionary, views: viewsDictionary)

    LE LANGUAGE DU FORMAT VISUEL

    70

  • 13 MAI 2016 BACKELITE

    NSLayoutConstraint.constraintsWithVisualFormat( "[cancelButton(72@p)](spacing)-[acceptButton(>=50)]", options: [], metrics: metricsDictionary, views: viewsDictionary)

    LE LANGUAGE DU FORMAT VISUEL

    71

    let metricsDictionary = ["spacing": 12, "p": 250]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    72

    [cancelButton]-[acceptButton]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    73

    [cancelButton]-[acceptButton ]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    74

    [cancelButton]-[acceptButton(==cancelButton)]

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    75

    |[cancelButton]-[acceptButton(==cancelButton)]|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    76

    | [cancelButton]-[acceptButton(==cancelButton)] |

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    77

    |-[cancelButton]-[acceptButton(==cancelButton)]-|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    78

    |- -[cancelButton]-[acceptButton(==cancelButton)]- -|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    79

    |-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    80

    H:|-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    81

    H:|-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    82

    NSLayoutConstraint.constraintsWithVisualFormat( "H:|-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|", options: [], metrics: metricsDictionary, views: viewsDictionary)

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    83

    NSLayoutConstraint.constraintsWithVisualFormat( "H:|-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|", options: options, metrics: metricsDictionary, views: viewsDictionary)

    let options: NSLayoutFormatOptions = .AlignAllTop

  • 13 MAI 2016 BACKELITE

    LE LANGUAGE DU FORMAT VISUEL

    84

    NSLayoutConstraint.constraintsWithVisualFormat( "V:|-5-[cancelButton]-[acceptButton(==cancelButton)]-5-|", options: options, metrics: metricsDictionary, views: viewsDictionary)

    let options: NSLayoutFormatOptions = .AlignAllCenterX

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    Mthodes sur UIView

    85

    // ajout public func addConstraint(constraint: NSLayoutConstraint) public func addConstraints(constraints: [NSLayoutConstraint])

    // suppression public func removeConstraint(constraint: NSLayoutConstraint) public func removeConstraints(constraints: [NSLayoutConstraint])

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    translatesAutoresizingMaskIntoConstraints convertit les frames en contraintes est true pour les contraintes crer via le code

    Si on utilise les frames, le mettre true Sinon ne pas oublier de le mettre a false !

    86

    v1.translatesAutoresizingMaskIntoConstraints = false

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    87

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    88

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    89

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    90

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    91

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    92

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    93

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    AJOUT DE CONTRAINTES

    94

    Sur quelle vue ajouter les contraintes ?

  • 13 MAI 2016 BACKELITE

    ACTIVATION / DSACTIVATION DE CONTRAINTES

    Mthodes sur NSLayoutConstraint

    95

    // activation - dsactivation + (void)activateConstraints:(NSArray *)constraint; + (void)deactivateConstraints:(NSArray *)constraint;

  • 13 MAI 2016 BACKELITE

    AUTO LAYOUT ET LES LABELS

    UILabel multi-ligne : Mettre le nombre de ligne 0 preferredMaxLayoutWidth indique la largeur pour le retour la ligne Ajuster les priorits de content hugging et content compression

    < iOS 8 : preferredMaxLayoutWidth != frame doit mettre la jour preferredMaxLayoutWidth la main

    96

  • 13 MAI 2016 BACKELITE

    AUTO LAYOUT ET SCROLLVIEW

    Dfini la contentSize de la scrollView Lensemble des contraintes doit relier les bords de la scrollview Utilise une contentView pour facilit la cration du layout Scroll horizontal : contentView.width > scrollview.width Scroll vertical : contentView.height > scrollview.height

    97

  • 13 MAI 2016 BACKELITE

    AUTO LAYOUT ET SCROLLVIEW

    98

    UIScrollview

    ContentView

    View View

    View

    View

  • 13 MAI 2016 BACKELITE

    ANIMATION

    // Ensures that all pending layout operations have been completed containerView.layoutIfNeeded()

    UIView.animateWithDuration(1.0) { // Make all constraint changes here myConstraint.constant = 0.0 // Forces the layout of the subtree animation block // and then captures all of the frame changes containerView.layoutIfNeeded()

    }

    99

  • MATRISER L'AUTO LAYOUT

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "", "", "=250)]>", "", "", "" )

    Will attempt to recover by breaking constraint

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.

    101

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "", "", "=250)]>", "", "", "" )

    Will attempt to recover by breaking constraint

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.

    102

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "", "", "=250)] (Names: messageTextField:0x7ff6da145570 )>", "", "", "" )

    Will attempt to recover by breaking constraint

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.

    103

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "", "=250)] (Names: messageTextField:0x7fbeabc31020 )>", "", "", "", "" )

    Will attempt to recover by breaking constraint

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.

    104

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "", "", "", "", "" )

    Will attempt to recover by breaking constraint

    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.

    105

  • 13 MAI 2016 BACKELITE

    COMPRENDRE LES LOGS DE LA CONSOLE

    Ajout didentifiants sur les contraintes

    Ajout didentifiants daccessibilit sur les vues

    Dsactiver le translateAutoresizingMaskIntoConstraints

    106

    labelToTop.identifier = "labelToTop"

    titleLabel.accessibilityIdentifier = "titleLabel"

    sendButton.translatesAutoresizingMaskIntoConstraints = false

  • 13 MAI 2016 BACKELITE

    DETECTION DES LAYOUTS AMBIGUS

    hasAmbigousLayout retourne vrai si la vue a sa frame mal plac

    exerciceAmbiguityInLayout commute entre les diffrentes possibilit de layout

    constraintAffectingLayoutForAxis return la liste des contraintes associs un axe

    _autolayoutTrace affiche un diagnostique sur la hirarchie de vue entire

    107

  • 13 MAI 2016 BACKELITE

    RSOUDRE LES LAYOUTS AMBIGUS

    Ajout de contraintes supplmentaires Mais ce nest pas toujours le cas Modification des priorits des contraintes existantes

    Content Hugging, Content Compression

    108

  • 13 MAI 2016 BACKELITE

    DSACTIVER LE SCROLL VERTICAL DUNE SCROLLVIEW

    109

    UIScrollview

    ContentView

    View View

    View

    View

    0

    0

    =

    =

  • 13 MAI 2016 BACKELITE

    DSACTIVER LE SCROLL HORIZONTAL DUNE SCROLLVIEW

    110

    UIScrollview

    ContentView

    View View

    View

    View

    0 0

    =

    =

  • 13 MAI 2016 BACKELITE

    VUE FLOTTANTE DANS UNE SCROLLVIEW

    111

    UIScrollview Container

    UIScrollview

    ContentView

    View View

    View

    ViewView flottante

    0

    0

    0

    0

  • 13 MAI 2016 BACKELITE

    LE SPLIT VIEW

    112

    Split View

    Master View Detail View

    00

    0 0

    0

    0

    0

    = 1/3 = x 3

  • 13 MAI 2016 BACKELITE

    LE SPLIT VIEW

    113

    Split View

    Master View Detail View

    0

    0

    0

    0

    0

    = 1/3 = x 3

  • 13 MAI 2016 BACKELITE

    RPARTITION DE VUES DE MME TAILLE SUR UN AXE

    114

    Superview

    Vue 1 Vue 2 Vue 3 Vue 4

    = =

    = =

    = =

  • 13 MAI 2016 BACKELITE

    RPARTITION DE VUES DE MME TAILLE SUR UN AXE

    115

    Superview

    =

    Vue 1 Vue 2 Vue 3 Vue 4

    = =

    = =

    =

  • 13 MAI 2016 BACKELITE

    RPARTITION DE VUES AVEC ESPACEMENT DE MME TAILLE SUR UN AXE

    116

    Superview

    Vue 1 Vue 2 Vue 3

    = =

    =

    = =

    =

  • 13 MAI 2016 BACKELITE

    CENTRER UN GROUPE DE VUES

    117

    Superview

    ConteneurVue

    Vue

    Vue

    Vue0

    0

    0

    0

  • 13 MAI 2016 BACKELITE

    UILAYOUTGUIDE

    Dfinie un rectangle qui peut interagir avec le moteur dagencement. Remplace les dummy views

    118

    let space1 = UILayoutGuide() view.addLayoutGuide(space1)

    let space2 = UILayoutGuide() view.addLayoutGuide(space2)

    space1.widthAnchor.constraintEqualToAnchor(space2.widthAnchor).active = true

    saveButton.trailingAnchor.constraintEqualToAnchor(space1.leadingAnchor).active = true cancelButton.leadingAnchor.constraintEqualToAnchor(space1.trailingAnchor).active = true cancelButton.trailingAnchor.constraintEqualToAnchor(space2.leadingAnchor).active = true clearButton.leadingAnchor.constraintEqualToAnchor(space2.trailingAnchor).active = true

  • 13 MAI 2016 BACKELITE

    UILAYOUTGUIDE

    Dfinie un rectangle qui peut interagir avec le moteur dagencement. Remplace les dummy views

    119

    let space1 = UILayoutGuide() view.addLayoutGuide(space1)

    let space2 = UILayoutGuide() view.addLayoutGuide(space2)

    NSLayoutConstraint.constraintsWithVisualFormat( "H:[saveButton][space1][cancelButton][space2(==space1)][clearButton]",

    options: .AlignAllBaseline, metrics: nil, views: views)

  • 13 MAI 2016 BACKELITE

    TOP/BOTTOM LAYOUT GUIDE

    Reprsente le bord du haut et du bas de la surface visible du viewController courant

    En dessous de la statusBar ou navigationBar Au dessus de tabBar

    120

  • 13 MAI 2016 BACKELITE

    LAYOUT MARGINS GUIDE

    Reprsente les marges de la vue Utilise les valeurs le la proprit layoutMargins Marges de 8 points par dfaut sur chaque bord Les marges de la vue racine dun contrleur ne sont pas modifiable

    121

  • 13 MAI 2016 BACKELITE

    READABLE CONTENT GUIDE

    Dfinie la largeur maximal pour le texte Dpends de la taille du type dynamique Reste toujours entre les margins

    122

  • 13 MAI 2016 BACKELITE

    SEMANTIC CONTENT ATTRIBUTES

    Dtermine lorsque si la vue doit basculer lors dun changement du sens de la lecture

    Les position Leading et trailing sinversent Alors que Top, Bottom, Left et Right ne bouge pas

    123

  • BONNES PRATIQUES

  • 13 MAI 2016 BACKELITE

    BONNES PRATIQUES

    Ne plus utiliser les frames, bounds ou center pour changer les dimensions et la position de la vue

    viter de donner un largeur et longueur fixe une vue Donner des noms qui ont du sens vos vues Toujours utiliser Leading et Trailing translateAutoresizingMaskIntoConstraints = NO Utiliser les layoutMarginsGuides Utiliser les readableContentGuides pour les textes

    125

  • 13 MAI 2016 BACKELITE

    BONNES PRATIQUES

    Utiliser les topLayoutGuide et BottomLayoutGuide lorsque la vue stend sous les bars

    Evitez doverrider le layoutSubviews() Ne pensez plus frames mais relations Activer / Dsactiver les contraintes au lieu de les ajouter / retirer Utiliser les baselines au lieu de top/bottom Dterminer la taille dun composant via ses contraintes Override intrinsicContentSize judicieusement

    126

  • 13 MAI 2016 BACKELITE

    BONNES PRATIQUES

    Utiliser les priorits pour rsoudre votre layout Garder en tte la localisation Overrider updateContraints judicieusement Ne jamais dsactiver toutes les contraintes : self.view.constraints

    127

  • 13 MAI 2016 BACKELITE

    QUELQUES LIENS

    128

    Rfrences

    Auto Layout Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

    Adopting Auto Layout

    https://developer.apple.com/library/watchos/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html#//apple_ref/doc/uid/TP40010853-CH5-SW7

    Mysteries of Auto Layout, Part 1

    https://developer.apple.com/videos/play/wwdc2015/218/

    Mysteries of Auto Layout, Part 2

    https://developer.apple.com/videos/play/wwdc2015/219/

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1https://developer.apple.com/library/watchos/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html#//apple_ref/doc/uid/TP40010853-CH5-SW7

  • mickael.laloum@backelite.com

    www.backelite.com

    CONTACTEZ-NOUS

    13 MAI 2016 BACKELITE 129

    Mickael Laloum iOS Lead Developer

    mailto:mickael.laloum@backelite.com

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.