Démarrez-vous Xamarin Forms? Créons une interface utilisateur simple

Howdy! «C’est un plaisir pour moi de vous avoir ici. 💚 J'imagine que vous êtes dans cet article car vous débutez dans Xamarin Forms et vous souhaitez améliorer vos connaissances. 💕

Cette fois, nous allons créer une interface utilisateur simple étape par étape, qui nous aidera à améliorer de nombreuses compétences XAML importantes qui nous faciliteront la vie lors du développement d'une interface utilisateur dans Xamarin Forms. Notre conception d'aujourd'hui est obtenue à partir de Dribble créé par l'utilisateur Yana .

Nous allons reproduire cette interface utilisateur et je soulignerai quelques points importants que nous aborderons: [19659003] ✔ Identification de la mise en page principale
✔ Contrôles qui se chevauchent
✔ Gestion de la liste de cartes avec un CollectionView

Alors, commençons! 😎

🔧 Création des paramètres de base

Tout d'abord, ajoutons le package PancakeView Nuget.

🔧 Ensuite, ajoutez l'espace de noms suivant:

 xmlns: PanCake = "clr-namespace: Xamarin.Forms.PancakeView; assembly = Xamarin.Forms.PancakeView"

Ajoutez les lignes suivantes, qui nous aideront à masquer la barre d'état sur iOS:

 xmlns: ios = "clr-namespace: Xamarin.Forms.PlatformConfiguration.iOSSpecific; assembly = Xamarin.Forms.Core"
    ios: Page.PrefersStatusBarHidden = "True"
    ios: Page.PreferredStatusBarUpdateAnimation = "Fondu"

Et enfin, réglons notre écran uniquement pour les conceptions verticales. Si vous ne savez pas comment le faire, vous pouvez voir ce message .

🕵 Identifier la mise en page principale

La première étape que nous devons garder à l'esprit est de sélectionner la bonne mise en page . Dans ce cas, nous utiliserons une grille. Si vous voulez en savoir plus sur les grilles, vous pouvez aller ici . Dans l'image suivante, nous allons analyser les colonnes et les lignes nécessaires à notre structure principale.

Implémentation du code:

    < Grid   RowDefinitions  =  " Auto, Auto, Auto, Auto, Auto, Auto, Auto  " > 
     
 </  Grid > 

✔ Contrôles de chevauchement

Dans ce étape, nous répliquerons les lignes 1, 2 et 3 (comme spécifié dans l'image de structure ci-dessus). L'un des points les plus importants ici est d'apprendre un moyen simple de chevaucher des contrôles. 💪

Ces lignes sont composées des éléments suivants:

1. Image principale: Comme vous pouvez le voir, cette image a un rayon de coin en bas. C’est pourquoi nous utiliserons PancakeView. À l'intérieur de la structure principale, ajoutez la ligne de code suivante:

 < PanCake:  PancakeView   Grid.Row  =  " 0 "    Grid.RowSpan  =  " 3 "    CornerRadius  =  " 0,0,55,55  " > 
      < Image    Source  = "  Main  "   Aspect  =  " AspectFill "   /> 
 </  PanCake:  PancakeView > 
     

2. Icône ➕ Titre ➕ Image arrondie:

⚠ À obtenir le chevauchement avec l'image ajoutée ci-dessus, il vous suffit d'ajouter la ligne suivante dans le même numéro de couleur utilisé dans l'explication précédente – dans ce cas, le numéro de ligne 0.

Dans cette partie, ajoutons une autre Grille, qui contiendra les trois éléments mentionnés ci-dessus. Il est important de savoir que nous utiliserons également PancakeView pour obtenir l'image arrondie.

    < Grid   Grid.Row  =  " 0  "   ColumnDefinitions  = "  *, *, *  "   Padding  = "  20,40,20,0  " > 
          
           < Image   Grid.Column  = "  0  "   Source  =  " Points "    HorizontalOptions  =  " Start "    HeightRequest  =  " 20 "   /> 
          
           < Label   Grid.Column  =  " 1  "   Text  = "  CardInfo  "   VerticalTextAlignment  = "  Center  "   TextColor  =  " Blanc "    FontAttributes  =  " Gras "    ] HorizontalTextAlignment  =  " Center "   /> 
          
           < PanCake:  PancakeView   Grid.Column  = [19659022] " 2 "    HorizontalOptions  =  " End "    CornerRadius  =  " 25  "    WidthRequest  = "  50  "   HeightRequest  = "  50  " > 
                < Image    Source  = "  Modèle  "   Aspect  = [19659022] " AspectFill "   /> 
           </  PanCake:  PancakeView > 
 </  Grid [19659022]> 

3. Enfin, Description ➕ SearchBar:

 < Label   Grid.Row  =  " 1 "    Padding [19659021] =  " 0,180,0,0 "    HorizontalTextAlignment  =  " Center "    FontSize [19659021] =  " 23 "    Texte  =  " Don  ' t sais comment exprimer  & # 10;  vos sentiments?  "   TextColor  = "  White  "   FontAttributes  =  " Gras "   /> 

 < SearchBar   Grid.Row  =  " 2 "    BackgroundColor  =  " Transparent "    Margin  =  " 30 "   / > 

À ce stade, nous avons le résultat suivant:

🎯 Gestion de la liste des cartes avec un CollectionView [19659008] Avant la liste des cartes, ajoutons les étiquettes Titre et Description:

   < Libellé   Grid.Row  =  " 3 "    Padding  =  " 30,30,0,10 "    FontSize  =  " 25 "    FontAttributes  = [19659022] " Gras "    Texte  =  " Choisissez votre carte parfaite "   /> 

 < Libellé   Grid.Row  =  " 4 "    Padding  =  " 30,0 "    Texte  =  " Si vous  ' cherchez le moyen idéal d'exprimer ce que vous pensez de quelque chose, une façon simple de vous dire  ' êtes amoureux.  "   TextColor  = "  Silver  "  /> 

Maintenant, continuons avec la liste. Il est important de savoir qu’il a été rendu conforme au modèle MVVM (Model-View-View-Model) (c’est pourquoi les propriétés sont liées). Si vous voulez en savoir plus à ce sujet, vous pouvez visiter ce poste .

   < CollectionView   Grid.Row  =  " 5 " 
        HorizontalScrollBarVisibility  =  " Jamais  " 
        Marge  = "  0,20  "
        ItemsSource  = "  {Reliure cartes}  "
        VerticalOptions  = "  StartAndExpand  "
        ItemsLayout  = "  HorizontalList  " 
        HeightRequest  = [19659022] " 135 "  >  
        < CollectionView.ItemTemplate > 
            < DataTemplate > 
                 < Grille   RowDefinitions  =  " Auto "    Margin  =  " 8,0 "  >  
                     < Frame   Grid.Row  =  " 0 "    HasS hadow  =  " False "    CornerRadius  =  " 20 "    BackgroundColor  =  " # e7ebf1 "    WidthRequest  =  " 95 "    HorizontalOptions  =  ] " Début "  > 
                          < Image   Grid.Row  =  " 0 "    HorizontalOptions  =  " Center "    Source  =  " {Binding Picture} "  [19659020] WidthRequest  =  " 150 "   /> 
                     </  Frame > 
                 </  Grid [19659022]> 
            </  DataTemplate > 
        </  CollectionView.ItemTemplate > 
 </  CollectionView > 

Last Étape: Ajout des boutons du bas!

 < Grid   Grid.Row  =  " 6 "    ColumnDefinitions  =  ] " *, * "  > 
    < Button   Grid.Column  =  " 0 "    Texte  =  " Choisissez un texte "    TextColor  =  " Blanc "    FontAttributes  =  " Gras "    BackgroundColor  =  " # ff5061 "    Margin  =  " 20,0 "    HeightRequest  =  " 60 "    CornerRadius [19659021] =  " 30 "   /> 
    < Button   Grid.Column  =  " 1 "    Texte [19659021] =  " Écrivez votre propre "    TextColor  =  " Black "    BorderColor  =  " # ff5061 "    BorderWidth  =  " 3 "    FontAttributes  =  ] " Gras "    Marge  =  " 20,0 "    HeightRequest  =  "  60  "   CornerRadius  = "  30  "  /> 
 </  Grid > [19659348] ->

Et notre interface utilisateur simple est terminée! 😎

Merci d'avoir lu! 💚💕 Vous pouvez voir le code complet sur mon dépôt Github .

À la prochaine fois! 🤓