Xamarin.iOS - AutoLayout + iOS 9

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

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