Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Xamarin.iOS - AutoLayout + iOS 9

Xamarin.iOS - AutoLayout + iOS 9

Nouveautés d'AutoLayout avec iOS 9 :
- NSLayoutAnchor
- UILayoutGuide
- UIStackView

Cyril

May 19, 2016
Tweet

More Decks by Cyril

Other Decks in Programming

Transcript

  1. AUTOLAYOUT
    IOS 9
    Meetup Cross-Platform Native Mobile Dev
    Cyril CATHALA
    @CyrilCathala

    View Slide

  2. 84% des devices sous iOS 9
    (9 mai 2016)
    iOS 9; 84%
    iOS 8; 11%
    Earlier; 5%

    View Slide

  3. iOS 9
    3D Touch
    SFSafariViewController
    Spotlight
    Contacts APIs
    UIKit

    View Slide

  4. nouveautés du
    UIKIT

    View Slide

  5. NSLAYOUTANCHOR
    UILAYOUTGUIDE
    UISTACKVIEW

    View Slide

  6. API de contraintes avec
    NSLAYOUTANCHOR

    View Slide

  7. J’ADORE CONSTRUIRE MES VUES ET CONTRAINTES
    VIA CODE, JE FAIS ÇA PARTOUT !
    Un développeur maso

    View Slide

  8. OH NON, OBLIGÉ DE GÉRER MES CONTRAINTES
    DANS LE CODE …
    Un développeur malchanceux

    View Slide

  9. C’ÉTAIT MIEUX AVANT ?

    View Slide

  10. NSLAYOUTCONSTRAINT
    var constraint = NSLayoutConstraint.Create(
    button2,
    NSLayoutAttribute.Leading,
    NSLayoutRelation.Equal,
    button1,
    NSLayoutAttribute.Trailing,
    1,
    15);
    button1 button2
    15

    View Slide

  11. View Slide

  12. VISUAL FORMAT LANGUAGE (VFL)
    var constraints = NSLayoutConstraint.FromVisualFormat(
    @”H:|-[button1(==button2)]-15-[button2]-|",
    NSLayoutFormatOptions.AlignAllTop, null, views);
    button1 button2
    15

    View Slide

  13. View Slide

  14. Qui dit mieux ?
    NSLAYOUTANCHOR !

    View Slide

  15. var constraint = NSLayoutConstraint.Create(
    button2,
    NSLayoutAttribute.Leading,
    NSLayoutRelation.Equal,
    button1,
    NSLayoutAttribute.Trailing,
    1,
    15);
    button2.LeadingAnchor.ConstraintEqualTo(button1.TrailingAnchor, 15);

    View Slide

  16. DEMO TIME !
    NsLayoutAnchor

    View Slide

  17. meilleur agencement avec
    UILAYOUTGUIDE

    View Slide

  18. JE VEUX CENTRER UN GROUPE DE VUES AU MILIEU
    DE L’ÉCRAN !
    Solution :
    Créer une UIView qui
    contient les vues, puis
    centrer la UIView

    View Slide

  19. JE VEUX AJOUTER DES ESPACES DYNAMIQUES
    ENTRE MES VUES !
    Solution :
    Créer des UIViews
    pour chaque espace,
    puis associer des
    contraintes

    View Slide

  20. PROBLÈME :
    Ajout d’éléments inutiles dans la
    hiérarchie visuelle

    View Slide

  21. UILAYOUTGUIDE
    N’intervient pas dans la hiérarchie
    visuelle !
    Bémol : pas dispo dans le designer 

    View Slide

  22. var guide = new UILayoutGuide();
    View.AddLayoutGuide(guide);
    guide.LeadingAnchor
    .ConstraintEqualTo(View.LeadingAnchor)
    .Active = true;

    View Slide

  23. DEMO TIME !
    UILayoutGuide

    View Slide

  24. la révolution avec
    UISTACKVIEW

    View Slide

  25. STACK VIEW
    Empile des vues
    Horizontal ou Vertical
    Basé sur Auto Layout
    Imbricable !

    View Slide

  26. ALIGNMENT
    SPACING
    DISTRIBUTION

    View Slide

  27. DISTRIBUTION
    Fill FillEqually FillProportionnally
    EqualSpacing EqualCentering

    View Slide

  28. ALIGNMENT
    Fill
    Center
    Leading
    Trailing
    Top
    Bottom

    View Slide

  29. ALIGNMENT BASELINE
    FirstBaseline LastBaseline

    View Slide

  30. WE FEEL THAT YOU CAN BUILD MOST OF YOUR USER
    INTERFACES WITH STACK VIEWS, SO WE RECOMMEND
    STARTING WITH STACK VIEW AND USING CONSTRAINTS
    AS NEEDED.
    Jason Yao, Ingénieur Apple, WWDC 2015

    View Slide

  31. DEMO TIME !
    Stack View

    View Slide

  32. APIS
    • AddArrangedSubview
    • RemoveArrangedSubview
    • Qui n’enlève pas de l’arborescence visuelle !
    • ArrangedSubviews
    • Compatible avec les animations 

    View Slide

  33. JE DOIS CIBLER IOS 7, JE SUIS
    TRISTESSE
    :’(
    Un développeur malheureux

    View Slide

  34. View Slide

  35. Mysteries of Auto Layout 1 & 2
    https://developer.apple.com/videos/play/wwdc2015/218
    Paul Hudson sur Youtube
    Doc Xamarin
    https://developer.xamarin.com/guides/ios/platform_features/introductio
    n_to_ios9/uistackview

    View Slide

  36. MERCI !
    @CYRILCATHALA

    View Slide