2 pièce(s) jointe(s)
Microsoft annonce la disponibilité de la version 3.0 de la bibliothèque Xamarin.Forms
Xamarin annonce la disponibilité de la version 3.0 de la bibliothèque Xamarin.Forms
qui s’étoffe avec Visual State Manager, FlexLayout, CSS pour concevoir les IU
Xamarin vient d’annoncer la disponibilité générale de la version 3.0 de Xamarin.Forms, sa bibliothèque multiplateforme regroupant un ensemble d’outils qui permet de concevoir des interfaces utilisateurs (IU) natives pour iOS, Android et des applications universelles Windows.
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:
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.
:fleche: Télécharger Xamarin.Forms 3.0
Source : Xamarin
Et vous ?
:fleche: Avez-vous testé cette nouvelle version de Xamarin.Forms ?
:fleche: Quel est votre avis sur les nouveautés implémentées ?
Voir aussi
:fleche: Microsoft a annoncé son intention de rendre le SDK Xamarin open source et propose déjà gratuitement les outils Xamarin via Visual Studio
:fleche: Xamarin Studio 6.0 et Xamarin for Visual Studio 4.1 disponibles : une pile de nouveautés pour les outils de développement mobile multiplateforme
:fleche: Xamarin et Android Wear
:fleche: Le SDK de Xamarin est disponible sous licence MIT, l'entreprise a également présenté des fonctionnalités en préversion sur Visual Studio
:fleche: Xamarin prend désormais en charge iOS 10 et Android 7, le framework de développement mobile multi-plateformes de Microsoft passe en version 6.1
