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

0f740d9341667ba314885a84fec15fcd?s=128

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
  2. 84% des devices sous iOS 9 (9 mai 2016) iOS

    9; 84% iOS 8; 11% Earlier; 5%
  3. iOS 9 3D Touch SFSafariViewController Spotlight Contacts APIs UIKit

  4. nouveautés du UIKIT

  5. NSLAYOUTANCHOR UILAYOUTGUIDE UISTACKVIEW

  6. API de contraintes avec NSLAYOUTANCHOR

  7. J’ADORE CONSTRUIRE MES VUES ET CONTRAINTES VIA CODE, JE FAIS

    ÇA PARTOUT ! Un développeur maso
  8. OH NON, OBLIGÉ DE GÉRER MES CONTRAINTES DANS LE CODE

    … Un développeur malchanceux
  9. C’ÉTAIT MIEUX AVANT ?

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

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

    null, views); button1 button2 15
  13. None
  14. Qui dit mieux ? NSLAYOUTANCHOR !

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

    15); button2.LeadingAnchor.ConstraintEqualTo(button1.TrailingAnchor, 15);
  16. DEMO TIME ! NsLayoutAnchor

  17. meilleur agencement avec UILAYOUTGUIDE

  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
  19. JE VEUX AJOUTER DES ESPACES DYNAMIQUES ENTRE MES VUES !

    Solution : Créer des UIViews pour chaque espace, puis associer des contraintes
  20. PROBLÈME : Ajout d’éléments inutiles dans la hiérarchie visuelle

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

    pas dispo dans le designer 
  22. var guide = new UILayoutGuide(); View.AddLayoutGuide(guide); guide.LeadingAnchor .ConstraintEqualTo(View.LeadingAnchor) .Active =

    true;
  23. DEMO TIME ! UILayoutGuide

  24. la révolution avec UISTACKVIEW

  25. STACK VIEW Empile des vues Horizontal ou Vertical Basé sur

    Auto Layout Imbricable !
  26. ALIGNMENT SPACING DISTRIBUTION

  27. DISTRIBUTION Fill FillEqually FillProportionnally EqualSpacing EqualCentering

  28. ALIGNMENT Fill Center Leading Trailing Top Bottom

  29. ALIGNMENT BASELINE FirstBaseline LastBaseline

  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
  31. DEMO TIME ! Stack View

  32. APIS • AddArrangedSubview • RemoveArrangedSubview • Qui n’enlève pas de

    l’arborescence visuelle ! • ArrangedSubviews • Compatible avec les animations 
  33. JE DOIS CIBLER IOS 7, JE SUIS TRISTESSE :’( Un

    développeur malheureux
  34. None
  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
  36. MERCI ! @CYRILCATHALA