
Dans cette troisième itération, Xamarin.Forms s’enrichit de plusieurs nouvelles fonctionnalités. Nous avons notamment l’ajout de Visual State Manager aux outils de la bibliothèque Xamarin.Forms. Visual State Manager permet de définir les différents états des mises en page et des contrôles de manière déclarative dans XAML ou C# afin de mettre à jour l’interface utilisateur de l’application mobile développée. Pour vous faire une idée de ce dont Visual State Manager est capable, vous pouvez vous référer à l'image ci-dessous qui présente le code pour effectuer un changement du mode d’affichage de l’image de la caméra en fonction l’orientation de l’appareil.
Pour faire suivre la rotation de l’image à l’écran avec celle de la position de l’appareil, l’on a eu besoin de faire appel à plusieurs nouveaux éléments introduits dans cette nouvelle version de Xamarin.Forms.
Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <ContentPage.Resources> <Style TargetType="FlexLayout"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList x:Name="CommonStates"> <VisualStateGroup> <VisualState x:Name="Portrait"> <VisualState.Setters> <Setter Property="Direction" Value="Column"/> <Setter Property="Margin"> <OnPlatform x:TypeArguments="Thickness" Default="0"> <On Platform="iOS" Value="0,30"/> </OnPlatform> </Setter> </VisualState.Setters> </VisualState> <VisualState x:Name="Horizontal"> <VisualState.Setters> <Setter Property="Direction" Value="Row"/> <Setter Property="Margin"> <OnPlatform x:TypeArguments="Thickness" Default="0"> <On Platform="iOS" Value="30,0"/> </OnPlatform> </Setter> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> <Style TargetType="Image"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList x:Name="CommonStates"> <VisualStateGroup> <VisualState x:Name="Portrait"> <VisualState.Setters> <Setter Property="AbsoluteLayout.LayoutBounds" Value="30, 0.5, 40, 40"/> <Setter Property="AbsoluteLayout.LayoutFlags" Value="YProportional"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Horizontal"> <VisualState.Setters> <Setter Property="AbsoluteLayout.LayoutBounds" Value="0.5, 0.9, 40, 40"/> <Setter Property="AbsoluteLayout.LayoutFlags" Value="PositionProportional"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ContentPage.Resources> |
En se référant au code ci-dessus, l’on note l’utilisation du nouvel élément FlexLayout servant à la mise en page des éléments de l’interface graphique. À noter que FlexLayout est inspiré du module de mise en page Flexbox utilisé pour concevoir plus facilement des pages adaptatives flexibles sans faire appel aux propriétés CSS Float ou Position dans les pages web.
Tout comme la propriété Flexbox permet d’adapter les éléments de la page web en fonction de la taille de l’écran, FlexLayout permet également d’adapter l’interface de l’application aux différentes tailles des écrans d’appareils mobiles sur lesquelles ces applications s’exécutent. Pour résumer, l’équipe de Xamarin (Microsoft) explique que « FlexLayout est idéal pour gérer la distribution et l’espacement du contenu dans vos mises en page. Il vous permet également de contrôler la direction de votre mise en page, la justification et l’alignement entre les autres propriétés ».
Par ailleurs, de même que Flexbox va de pair avec CSS qui est utilisé pour décrire la présentation et le style des documents HTML, FlexLayout est également le compagnon idéal de CSS. Ainsi, les développeurs peuvent donc utiliser, en plus de XAML, les propriétés de CSS pour effectuer la mise en page de leurs interfaces utilisateurs. Pour les utiliser, l’équipe de Xamarin souligne que « les feuilles de style peuvent être ajoutées en tant que fichiers CSS distincts dans votre projet, ou “inline” dans vos ressources. Une variété de sélecteurs communs sont disponibles pour composer vos styles ».
À côté de ces nouveaux éléments, nous avons l’ajout du support pour la prise en charge des langues qui s’écrivent de droite à gauche telles que les langues sémitiques (l’arabe, l’hébreu, etc.). Ainsi avec Xamarin.Forms 3.0, il est possible de concevoir des applications avec le contenu des pages défini de manière conventionnelle (gauche à droite) et qui passent à un affichage de droite à gauche après que l’utilisateur a sélectionné dans ses paramètres de localisation une région où la langue s’écrit de droite à gauche.
Au-delà de ces améliorations, de nombreux bogues ont été corrigés dans cette nouvelle version. Xamarin.Forms 3.0 est disponible sur Nuget, le gestionnaire de paquets de Microsoft, et attend d’être évalué par les développeurs.

Source : Xamarin
Et vous ?


Voir aussi




