Speichern von Omas Rezepten mit Xamarin.Forms

Meine Oma macht die besten, fluffigsten, knieweichen Brötchen, die je jemand gegessen hat. Das Problem ist, es gibt eine Menge geheimer Zutaten (und ich spreche nicht nur Liebe), die in diese Brötchen gehen, und diese Zutaten und Anweisungen sind alle im Kopf meiner Großmutter gespeichert.

Wir alle haben solche Familienrezepte, und anstatt sie möglicherweise zu vergessen, werden wir in diesem Artikel eine mobile App für iOS und Android mit Xamarin.Forms erstellen, die sie für mich und zukünftige Generationen meiner Familie speichern wird!

Wenn Sie also daran interessiert sind, mobile Anwendungen zu schreiben, aber nicht die Zeit haben, immer wieder dieselbe App für jede Plattform zu schreiben, ist dieser Artikel genau das Richtige für Sie! Machen Sie sich keine Sorgen, wenn Sie C# nicht von einem Erdbeer-Brezel-Salat kennen; Ich schreibe seit über 8 Jahren Xamarin-Apps, und dieser Artikel ist eine Tour durch Xamarin.Forms, die Ihnen genügend Informationen geben soll, um mit dem eigenen Lernen zu beginnen.

Was ist dieses Xamarin-Zeug?

Mehr als nur ein lustiges Wort, Xamarin ermöglicht es Entwicklern, native iOS- und Android-Anwendungen mit genau denselben SDKs und UI-Steuerelementen zu erstellen, die in Swift und XCode für iOS oder Java und Android Studio für Android verfügbar sind.

Der Unterschied besteht darin, dass die Apps mit C# unter Verwendung von .NET Framework und Visual Studio oder Visual Studio für Mac entwickelt werden. Die resultierenden Apps sind jedoch genau die gleichen. Sie sehen aus, fühlen sich an und verhalten sich genauso wie native Apps, die in Objective-C, Swift oder Java geschrieben wurden.

Xamarin glänzt, wenn es um Code-Sharing geht. Ein Entwickler kann mithilfe nativer Steuerelemente und SDKs seine Benutzeroberfläche für jede Plattform erstellen und anpassen, aber dann eine Bibliothek mit gemeinsam genutzter App-Logik schreiben, die von allen Plattformen gemeinsam genutzt wird.

Es ist dieses Code-Sharing, bei dem enorme Zeiteinsparungen realisiert werden können.

Und wie bei den leckeren Brötchen, die meine Oma backt, ist es schwer, sich nicht mehr zu sehnen, nachdem sie einmal auf den Geschmack gekommen sind, Code zu teilen – und hier kommt Xamarin.Forms ins Spiel.

Xamarin.Forms

Xamarin.Forms übernimmt das Konzept der traditionellen Xamarin-Entwicklung und fügt ihm eine Abstraktionsebene hinzu.

Anstatt die Benutzeroberfläche für iOS und Android separat zu entwickeln, führt Xamarin.Forms ein UI-Toolkit ein, mit dem Sie native mobile Apps aus einer einzigen Codebasis schreiben können.

Stellen Sie sich das so vor: Sie haben eine App, die eine Schaltfläche benötigt. Jede Plattform hat das Konzept einer Schaltfläche. Warum sollten Sie die Benutzeroberfläche mehrmals schreiben müssen, wenn Sie wissen, dass der Benutzer Ihrer App nur auf eine Schaltfläche tippen muss?

Das ist eines der Probleme, die Xamarin.Forms löst.

Es bietet ein Toolkit der am häufigsten verwendeten Steuerelemente und Benutzerinteraktionsereignisse für sie, sodass wir die Benutzeroberflächen für unsere Apps nur einmal schreiben müssen. Beachten Sie jedoch, dass Sie nicht auf die von Xamarin.Forms bereitgestellten Steuerelemente beschränkt sind – Sie können weiterhin Steuerelemente verwenden, die nur auf einer einzigen Plattform innerhalb einer Xamarin.Forms-App vorhanden sind. Außerdem können wir die Anwendungslogik wie zuvor zwischen den Plattformen teilen.

Die Statistiken zur Codefreigabe für Apps, die mit Xamarin.Forms entwickelt wurden, können außerhalb der Charts liegen. Der Code einer Konferenzorganisations-App wird zu 93 % auf iOS und zu 91 % auf Android geteilt. Die App ist Open Source. Werfen Sie einen Blick auf den Code.

Xamarin.Forms bietet mehr als nur UI-Steuerelemente. Es enthält außerdem ein MVVM-Framework, einen Pub/Sub-Messaging-Dienst, eine Animations-API und einen Abhängigkeitsdienst sowie weitere.

Aber heute werden wir uns auf die UI-Funktionen zum Erstellen unserer Rezeptmanager-App konzentrieren.

Die App, die wir bauen

Die Rezeptmanager-App wird eine unkomplizierte Benutzeroberfläche haben. Wir werden in der Küche arbeiten, also muss es einfach zu bedienen sein!

Es wird aus 3 Bildschirmen bestehen . Die erste zeigt eine Liste aller Rezepte, die derzeit in der App geladen sind.

Wenn Sie dann auf eines dieser Rezepte tippen, können Sie die Details auf einem zweiten Bildschirm sehen:

Von dort aus können Sie auf eine Bearbeitungsschaltfläche tippen, um Änderungen am Rezept auf dem dritten Bildschirm vorzunehmen:

Sie können diesen Bildschirm auch aufrufen, indem Sie auf dem Bildschirm mit der Rezeptliste auf die Schaltfläche „Hinzufügen“ tippen.

Die Entwicklungsumgebung

Xamarin-Apps werden mit C# und .NET unter Verwendung von Visual Studio unter Windows oder Visual Studio für Mac auf dem Mac erstellt, aber Sie müssen auch die iOS- oder Android-SDKs und -Tools installiert haben. Es könnte ein kleines Problem sein, alles in der richtigen Reihenfolge zu installieren, aber die Visual Studio-Installationsprogramme kümmern sich nur darum, die IDE zu installieren, aber auch die Plattform-Tools.

Obwohl zum Erstellen von iOS-Apps immer ein Mac erforderlich ist, können Sie diese Apps mit Xamarin weiterhin in Visual Studio unter Windows entwickeln und debuggen! Wenn also Windows Ihr Problem ist, müssen Sie Ihre Umgebung nicht vollständig ändern.

Sehen wir uns nun an, wie Xamarin.Forms uns helfen kann, einige Familienrezepte aus einer Codebasis zu speichern!

Rezeptlistenseite: Gestaltung der Benutzeroberfläche

Beginnen wir damit, darüber zu sprechen, wie wir die Benutzeroberfläche für unsere App zum Speichern von Rezepten gestalten werden!

Insgesamt besteht jeder Bildschirm in Xamarin.Forms aus 3 Elementen. Eine Page . Mindestens ein Element namens Layout . Und mindestens ein Control .

Die Seite

Die Seite ist das Ding, das alles, was auf dem Bildschirm angezeigt wird, gleichzeitig hostet. Die Page ist auch bei der Navigation innerhalb einer App zentral.

Wir teilen Xamarin.Forms mit, welche Page über einen Navigationsdienst angezeigt werden soll. Dieser Dienst kümmert sich dann darum, jede Seite so anzuzeigen, dass sie für das Betriebssystem geeignet und nativ ist.

Mit anderen Worten, der Code zum Navigieren zwischen Bildschirmen wurde ebenfalls abstrahiert!

Schließlich, obwohl nicht die einzige Möglichkeit, dies zu tun, codiere ich die Benutzeroberfläche meiner Page in XAML. (Die andere Möglichkeit wäre die Verwendung von C#.) XAML ist eine Auszeichnungssprache, die beschreibt, wie eine Seite aussieht. Und jetzt genügt es zu sagen, dass es HTML irgendwie ähnlich ist.

Das Layout

Alle Steuerelemente auf einer Seite werden durch ein sogenanntes Layout angeordnet.

Einer Seite können ein oder mehrere Layouts hinzugefügt werden.

Es gibt verschiedene Arten von Layouts in Formularen. Einige der gebräuchlichsten sind Stack-, Absolute-, Relative-, Grid-, Scroll- und Flex-Layouts.

Die Kontrollen

Dann endlich die Steuerung. Dies sind die Widgets Ihrer App, mit denen der Benutzer interagiert.

Formulare verfügen über viele Steuerelemente, die verwendet werden, unabhängig davon, welche Art von Anwendung Sie erstellen. Dinge wie Beschriftungen, Schaltflächen, Eingabefelder, Bilder und natürlich Listenansichten.

Wenn Sie einem Bildschirm ein Steuerelement hinzufügen, fügen Sie es einem Layout hinzu. Es ist das Layout, das sich darum kümmert, herauszufinden, wo genau auf dem Bildschirm das Steuerelement erscheinen soll.

So generieren Sie die folgenden Bildschirme auf iOS bzw. Android:

Ich habe dieses XAML verwendet:

 <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="https://xamarin.com/schemas/2014/forms" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="SmashingRecipe.RecipeListPage" Title="Recipes"> <ContentPage.Content> <StackLayout> <ListView x:Name="recipesList"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Name}"/> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage.Content> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" /> </ContentPage.ToolbarItems> </ContentPage>

Hier passieren ein paar wichtige Dinge.

Das erste ist das <StackLayout> . Dies weist Forms an, alle folgenden Steuerelemente in einem Stapel anzuordnen.

Es gibt zufällig nur ein einziges Steuerelement im Layout, und das ist ein <ListView> , und wir werden ihm einen Namen geben, damit wir später darauf verweisen können.

Dann gibt es noch ein bisschen Boilerplate-Zeremonie für die ListView , bevor wir zu dem kommen, wonach wir suchen: der <TextCell> . Dies weist Forms an, einfachen Text in jeder Zelle der Liste anzuzeigen.

Wir sagen der <TextCell> den Text, den sie anzeigen soll, durch eine Technik namens Data Binding . Die Syntax sieht wie folgt aus Text="{Binding Name}" . Wobei Name eine Eigenschaft einer Recipe -Klasse ist, die … nun, Recipes modelliert.

Wie werden die Rezepte der Liste hinzugefügt?

Zusammen mit jeder XAML-Datei gibt es eine „CodeBehind“-Datei. Dieser CodeBehind ermöglicht es uns, Dinge wie die Behandlung von Benutzerinteraktionsereignissen, die Einrichtung oder andere App-Logik auszuführen.

Es gibt eine Funktion, die in jeder Page überschrieben werden kann, namens OnAppearing – die, wie Sie sicher erraten haben, aufgerufen wird, wenn die Page erscheint.

 protected override void OnAppearing() { base.OnAppearing(); recipesList.ItemsSource = null; recipesList.ItemsSource = App.AllRecipes; }

Beachten Sie die recipesList.ItemsSource = AllRecipes;

Dies sagt der ListView – „Hey! Alle Ihre Daten befinden sich in der aufzählbaren App.AllRecipes (eine anwendungsweite Variable) und Sie können jede der Eigenschaften des untergeordneten Objekts zum Abbinden verwenden!“.

Eine Liste mit Rezepten ist schön und gut – aber Sie können nichts backen, ohne zuerst die Details des Rezepts zu sehen – und darum kümmern wir uns als Nächstes.

Handhabung des Events

Ohne auf Benutzerberührungen zu reagieren, ist unsere App nichts weiter als eine Liste köstlich klingender Rezepte. Sie klingen gut, aber ohne zu wissen, wie man sie zubereitet, nützt es nicht viel!

Lassen Sie uns jede Zelle in der ListView auf Taps reagieren lassen, damit wir sehen können, wie das Rezept erstellt wird!

In der Code-Behind-Datei RecipeListPage können wir Ereignishandler zu Steuerelementen hinzufügen, um Benutzerinteraktionsereignisse abzuhören und darauf zu reagieren.

Umgang mit Tap-Ereignissen in der Listenansicht, dann:

 recipesList.ItemSelected += async (sender, eventArgs) => { if (eventArgs.SelectedItem != null) { var detailPage = new RecipeDetailPage(eventArgs.SelectedItem as Recipe); await Navigation.PushAsync(detailPage); recipesList.SelectedItem = null; } };

Da ist ordentlich was los.

Immer wenn jemand eine Zeile auswählt, wird ItemSelected auf der ListView .

Von den Argumenten, die an den Handler übergeben werden, hat das eventArgs Objekt eine SelectedItem -Eigenschaft, die zufällig das ist, was zuvor an die ListView gebunden wurde.

In unserem Fall ist das die Recipe -Klasse. (Wir müssen also nicht in der Master-Quelle nach dem Objekt suchen – es wird an uns weitergegeben.)

Rezeptdetailseite

Natürlich gibt es eine Seite, die uns die geheimen Zutaten und Anleitungen für die Zubereitung jedes Rezepts zeigt, aber wie wird diese Seite angezeigt?

Beachten Sie das await Navigation.PushAsync(detailPage); Linie von oben. Das Navigation ist ein plattformunabhängiges Objekt, das Seitenübergänge auf native Weise für jede Plattform handhabt.

Werfen wir nun einen Blick auf die Rezeptdetailseite:

Diese Seite wurde ebenfalls mit XAML erstellt. Das verwendete Layout (FlexLayout) ist jedoch ziemlich cool, da es von der CSS Flexbox inspiriert ist.

 <ContentPage.Content> <ScrollView> <FlexLayout AlignItems="Start" AlignContent="Start" Wrap="Wrap"> <Image Source="buns.png" FlexLayout.Basis="100%" /> <Label Text="{Binding Name}" HorizontalTextAlignment="Center" TextColor="#01487E" FontAttributes="Bold" FontSize="Large" Margin="10, 10" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Ingredients" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Ingredients}" Margin="10,10" FontSize="Small" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="Directions" FontAttributes="Bold" FontSize="Medium" TextColor="#EE3F60" Margin="10,10" HorizontalOptions="FillAndExpand" /> <BoxView FlexLayout.Basis="100%" HeightRequest="0" /> <Label Text="{Binding Directions}" Margin="10,10" FontSize="Small" /> </FlexLayout> </ScrollView> </ContentPage.Content>

Das FlexLayout ordnet seine Steuerelemente entweder in Zeilen oder Spalten an. Der große Vorteil liegt jedoch in der Tatsache, dass es automatisch erkennen kann, wie viel Platz auf dem Bildschirm übrig ist, um ein Steuerelement zu platzieren, und wenn nicht genug Platz vorhanden ist, kann es automatisch eine neue Zeile oder Spalte erstellen, um es unterzubringen!

Dies hilft sehr beim Umgang mit verschiedenen Bildschirmgrößen, von denen es in der mobilen Entwicklung viele gibt.

Nun, FlexLayout uns hilft, den Detailbildschirm gut aussehen zu lassen, müssen wir diese Rezepte noch bearbeiten, richtig?

Das ist Ihnen wahrscheinlich aufgefallen:

 <ToolbarItem Text="Edit" Clicked="Edit_Clicked" />

Diese Zeile ist dafür verantwortlich, eine Schaltfläche in die Symbolleiste der App einzufügen. Das Clicked="Edit_Clicked" teilt der Schaltfläche mit, dass beim Klicken im Code dahinter nach einer Funktion mit diesem Namen gesucht und dann deren Code ausgeführt wird.

Was in diesem Fall wäre, die Rezeptbearbeitungsseite zu instanziieren und diese mithilfe des zuvor erwähnten Navigation auf unseren Navigationsstapel zu verschieben.

Rezeptbearbeitungsseite

Eine Seite mit einer Liste von Rezepten: check! Eine Seite mit allen Details, um die Rezepte zu machen: check! Jetzt müssen wir nur noch die Seite erstellen, auf der wir ein Rezept eingeben oder ändern, während wir Oma beim Zaubern zusehen!

Schauen Sie sich zuerst die Bildschirme an:

Und jetzt der Code:

 <ContentPage.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TableView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Intent="Form" HasUnevenRows="true"> <TableSection Title="General"> <EntryCell x:Name="recipeNameCell" Label="Name" /> </TableSection> <TableSection Title="Ingredients"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="ingredientsCell" /> </StackLayout> </ViewCell> </TableSection> <TableSection Title="Directions"> <ViewCell> <StackLayout Padding="15"> <Editor x:Name="directionsCell" /> </StackLayout> </ViewCell> </TableSection> </TableView> <Button Text="Save" Grid.Row="1" Grid.Column="0" BackgroundColor="#EE3F60" TextColor="White" x:Name="saveButton" /> <Button Text="Cancel" Grid.Row="1" Grid.Column="1" BackgroundColor="#4CC7F2" TextColor="White" x:Name="cancelButton" /> </Grid> </ContentPage.Content>

Hier gibt es etwas mehr Code, und das liegt daran, dass ich das Grid -Layout verwende, um anzugeben, wie alles in einem zweidimensionalen Muster angeordnet werden soll.

Beachten Sie auch hier keine Datenbindung. Weil ich ein Beispiel geben wollte, wie man die Steuerelemente rein aus der Code-Behind-Datei füllen würde:

 void InitializePage() { Title = TheRecipe.Name ?? "New Recipe"; recipeNameCell.Text = TheRecipe.Name; ingredientsCell.Text = TheRecipe.Ingredients; directionsCell.Text = TheRecipe.Directions; saveButton.Clicked += async (sender, args) => { SaveRecipe(); await CloseWindow(); }; cancelButton.Clicked += async (sender, args) => { await CloseWindow(); }; }

Sehen Sie diese TheRecipe Eigenschaft? Es befindet sich auf Seitenebene, enthält alle Daten für ein bestimmtes Rezept und wird im Konstruktor der Seite festgelegt.

Zweitens sind die Clicked -Event-Handler für saveButton und cancelButton vollständig .NET-konform (und ja, ich erfinde ziemlich oft meine eigenen Worte).

Ich sage, sie sind .NET-ifiziert, weil die Syntax zur Behandlung dieses Ereignisses weder in Java noch in Objective-C nativ ist. Wenn die App auf Android oder iOS ausgeführt wird, ist das Verhalten genau wie bei einem Android-Klick oder einem iOS-TouchUpInside.

Und wie Sie sehen können, ruft jeder dieser Click-Event-Handler geeignete Funktionen auf, die entweder das Rezept speichern und die Seite schließen oder nur die Seite schließen.

Da ist es – wir haben die Benutzeroberfläche deaktiviert, um die Rezepte von jetzt bis zum Ende der Zeit zu speichern!

CSS Was?!? Oder die App hübsch machen

Das Beste kommt zum Schluss: Xamarin.Forms 3.0 gibt uns unter anderem die Möglichkeit, Steuerelemente mit CSS zu gestalten!

Das Xamarin.Forms-CSS entspricht nicht zu 100 % dem, was Sie möglicherweise von der Webentwicklung gewohnt sind. Aber es ist nah genug, dass sich jeder, der mit CSS vertraut ist, wie zu Hause fühlen wird. So wie ich bei Oma!

Nehmen wir also die Seite „Rezeptdetails“ und strukturieren sie um, sodass sie Cascading Style Sheets verwendet, um die visuellen Elemente festzulegen, anstatt alles direkt inline in XAML festzulegen.

Der erste Schritt ist das Erstellen des CSS-Dokuments! In diesem Fall sieht es wie folgt aus:

 .flexContent { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; } image { flex-basis: 100%; } .spacer { flex-basis: 100%; height: 0; } .foodHeader { font-size: large; font-weight: bold; color: #01487E; margin: 10 10; } .dataLabel { font-size: medium; font-weight: bold; color: #EE3F60; margin: 10 10; } .data { font-size: small; margin: 10 10; }

Zum größten Teil sieht es aus wie CSS. Da sind Klassen drin. Es gibt einen einzelnen Selektor für einen Klassentyp, Image . Und dann ein Haufen Immobiliensetzer.

Einige dieser Eigenschaftssetzer, z. B. flex-wrap oder flex-basis , sind spezifisch für Xamarin.Forms. In Zukunft wird das Team diesen mit xf- , um Standardpraktiken zu folgen.

Als nächstes wird es auf XAML-Steuerelemente angewendet.

 <ContentPage.Resources> <StyleSheet Source="../Styles/RecipeDetailStyle.css" /> </ContentPage.Resources> <ContentPage.Content> <ScrollView> <FlexLayout StyleClass="flexContent"> <Image Source="buns.png" /> <Label Text="{Binding Name}" StyleClass="foodHeader" /> <BoxView StyleClass="spacer" /> <Label Text="Ingredients" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Ingredients}" StyleClass="data" /> <BoxView StyleClass="spacer" /> <Label Text="Directions" StyleClass="dataLabel" HorizontalOptions="FillAndExpand" /> <BoxView StyleClass="spacer" /> <Label Text="{Binding Directions}" StyleClass="data" /> </FlexLayout> </ScrollView> </ContentPage.Content>

So sah es vorher aus.

Fügen Sie in Xamarin.Forms zum Verweisen auf das CSS-Dokument ein <StyleSheet Source="YOUR DOC PATH" /> hinzu. Dann können Sie die Klassen in jedem Steuerelement über die StyleClass Eigenschaft referenzieren.

Es bereinigt definitiv das XAML und macht auch die Absicht des Steuerelements klarer. Zum Beispiel ist jetzt ziemlich offensichtlich, was diese <BoxView StyleClass="spacer" /> !

Und das Image wird selbst gestylt, weil es ein Image ist und die Art und Weise, wie wir den Selektor im CSS definiert haben.

Natürlich ist CSS in Xamarin.Forms nicht so vollständig implementiert wie sein Web-Cousin, aber es ist immer noch ziemlich cool. Sie haben Selektoren, Klassen, können Eigenschaften festlegen und natürlich diese ganze Kaskadierungssache!

Zusammenfassung

Drei Bildschirme, zwei Plattformen, ein Artikel und endlos gespeicherte Rezepte! Und weißt du was noch? Sie können Apps mit Xamarin.Forms für mehr als Android und iOS erstellen. Sie können UWP-, macOS- und sogar Samsung Tizen-Plattformen erstellen!

Xamarin.Forms ist ein UI-Toolkit, mit dem Sie Apps erstellen können, indem Sie die Benutzeroberfläche einmal schreiben und die UI nativ auf den wichtigsten Plattformen rendern lassen.

Dazu wird ein SDK bereitgestellt, das eine Abstraktion der am häufigsten verwendeten Steuerelemente auf den Plattformen darstellt. Neben der UI-Güte bietet Xamarin.Forms auch ein MVVM-Framework mit vollem Funktionsumfang, einen Pub/Sub-Messaging-Dienst, eine Animations-API und einen Abhängigkeitsdienst.

Xamarin.Forms bietet Ihnen außerdem dieselben Codevorteile wie die herkömmliche Xamarin-Entwicklung. Jegliche Anwendungslogik wird von allen Plattformen gemeinsam genutzt. Und Sie können alle Ihre Apps mit einer einzigen IDE und einer einzigen Sprache entwickeln – das ist ziemlich cool!

Wohin als nächstes? Laden Sie den Quellcode für diese Xamarin.Forms-App herunter, um sie selbst auszuprobieren. Um mehr über Xamarin.Forms zu erfahren, einschließlich der Möglichkeit, eine App in Ihrem Browser zu erstellen, sehen Sie sich dieses Online-Tutorial an!