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