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!