XAML Fest de janvier pour .NET MAUI – interface utilisateur de la carte Uber 🚗

Nous lançons XAML Fest avec une reconstruction de l’interface utilisateur de la carte de style Uber. Voir par vous-même!

Bienvenue dans le premier article d’exploration de l’interface utilisateur du XAML Fest de janvier ! 🎉 Aujourd’hui, nous nous dirigeons vers le monde du covoiturage en décomposant et en recréant l’interface utilisateur de la carte Uber à l’aide de .NET MAUI avec XAML.

Cet élément d’interface élégant et fonctionnel est un élément essentiel de la conception d’applications modernes, et je suis ravi de l’explorer avec vous.

⚠ Préparation du voyage

Avant de plonger dans le code et la conception, il est essentiel d’être bien préparé pour tirer le meilleur parti de cet article. Vous trouverez ci-dessous quelques notes d’instructions pour améliorer votre expérience et votre efficacité lorsque vous reproduisez l’interface utilisateur de la carte Uber :

▪ Voir l’interface utilisateur d’origine : Au début, une image de l’interface utilisateur originale de la carte Uber sera présentée, divisée en blocs. Chaque bloc correspond à une partie différente du design sur lequel nous allons travailler.

▪ Conception détaillée des blocs : Chaque bloc comportera une image avec l’élément de conception spécifique sur lequel nous nous concentrons, mis en évidence dans un encadré. Cette approche fournira une vision claire et ciblée de chaque aspect de la conception.

▪ Conseils sur les blocs de code : Dans chaque bloc de code, recherchez un commentaire disant : « Ici, ajoutez le code qui est expliqué dans le bloc suivant. » Ce commentaire vous indique d’insérer l’explication du code de bloc à venir juste à ce stade, garantissant ainsi un codage transparent et organisé.

Avec ces directives à l’esprit, vous êtes prêt à naviguer en douceur dans la réplication de l’interface utilisateur de la carte Uber, acquérant à la fois une expérience pratique et des informations plus approfondies sur .NET MAUI et XAML. Commençons et bon codage ! 🚀

Prenons la route! 🚗💨

Prêt à commencer ce voyage exaltant ? Préparons-nous et décomposons la conception originale de l’interface utilisateur de la carte Uber en blocs gérables. Cette approche nous permet de nous concentrer sur chaque élément individuellement, garantissant une compréhension approfondie et claire lorsque nous reconstruisons chaque élément dans .NET MAUI et XAML.

Étape 1 : Configurer la structure et l’image principale

Tout d’abord, dans cette section, définissons la structure principale de la carte. Cette structure contiendra les éléments visuels de cette étape et des suivantes.

Comme observé dans l’image de référence pour la réplication, la carte présente des bords arrondis. Pour ce faire, nous utiliserons le contrôle aux frontières. Pour organiser efficacement les éléments internes, un Disposition de la pile verticale seront employés, comme démontré ci-dessous :

<Border  Stroke="Silver" 
StrokeThickness="1" 
StrokeShape="RoundRectangle 20" 
Margin="20" 
HorizontalOptions="Fill" 
HeightRequest="320">
     
  <VerticalStackLayout  
  BackgroundColor="LightBlue" 
  Spacing="10">
	    
  
		    
  
		    
  
	    
  </VerticalStackLayout>
    
</Border>

Veuillez noter que le Disposition de la pile verticale est défini avec un fond LightBlue. Ce détail est crucial pour l’aspect visuel de votre UI.

✍️ Si vous souhaitez en savoir plus sur Borders, référez-vous à l’article Application de la bordure dans .NET MAUI. Ou en savoir plus des informations sur VerticalStackLayout ici.

Maintenant, après avoir terminé l’étape précédente, procédons à l’ajout de l’image principale.

<Image  Source="ubermainimage"
  HorizontalOptions="Center" 
    HeightRequest="160"/>

Votre travail doit refléter l’apparence de l’image suivante :

Étape 2 : ajouter une description

Nous sommes désormais sur le point de débloquer une nouvelle compétence : apprendre à appliquer divers styles à une seule étiquette.

Bien que cette étape puisse être accomplie avec deux labels distincts, nous la démontrerons avec un seul pour présenter le processus.

<Label  Margin="10,0">
  <Label.FormattedText>
    <FormattedString>
      <Span  Text="Necesitas hacer un envio al otro lado de la cuidad? &#10;&#10;"  FontAttributes="Bold"  FontSize="17"/>
      <Span  Text="Entrega rapida en la cuidad"/>
    </FormattedString>
  </Label.FormattedText>
</Label>

Finalement, vous obtiendrez un résultat semblable à l’image suivante :

Étape 3 : Ajouter un bouton Envoyer l’article

Dans cette étape, il suffit d’ajouter le bouton permettant d’envoyer un article. Voyons comment procéder :

<Button Text="Envia un articulo" 
  TextColor="Black" 
  CornerRadius="20" 
  Margin="10,0" 
  BackgroundColor="White" 
  HorizontalOptions="Start"/>

Enfin, vous verrez un résultat semblable à l’image suivante :

Et notre interface utilisateur Uber Card est terminée !

Merci d’avoir lu! 👋 À la prochaine fois ! 💚💕