Schlagwort-Archive: MvvmCross

iOS-Oberflächen mit MvvmCross

Wer MvvmCross in einem Cross-Platform-Mobile-Projekt einsetzt hat die Auswahl zwischen vier verschiedenen Ansatzen zur UI-Erstellung. Xamarin.Forms ist einer der möglichen Ansätze, der häufig eine gute Wahl darstellt (auch wenn es zurzeit noch keinen Designer hierfür gibt). Wer allerdings sehr genaue visuelle Anforderungen hat, fährt häufig mit eine nativen UI besser. Hierfür gibt es drei verschiedene Herangehensweisen:

  • Handkodiert: Alle visuellen Elemente werden im Code erzeugt. Dieser Ansatz ist unter iOS weiter verbreitet als auf den meisten anderen beliebten Plattformen. Hierdurch erhält man die maximale Kontrolle über alle Elemente der Benutzeroberfläche.
  • XIB-Dateien: XIB-Dateien sind XML-Dateien, die die visuellen Elemente beschreiben. XIB-Dateien werden üblicherweise nicht von Hand editiert, sondern mit Xcode’s Interface Builder erstellt. Seit Xamarin 4 gibt es auch in Xamarin Studio oder Visual Studio einen visuellen XIB-Editor.
  • Storyboard-Dateien: Dieser Ansatz ist der neueste. Storyboards sind ebenfalls XML-Dateien, die visuell mit Xcode, Xamarin Studio oder Visual Studio bearbeitet werden. Im Gegensatz zu XIB-Dateien enthalten Storyboards jedoch typischerweise mehrere Views zusammen mit einem Workflow, der den die Navigation zwischen diesen Views beschreibt.

MvvmCross unterstützt alle drei nativen Ansätze.

Handkodiert

Dieser Ansatz produziert offensichtlich die größte Anzahl Codezeilen. Für Entwickler, die gerade erst mit iOS anfangen, kann dies anfänglich abschreckend wirken. Der Vorteil: Keine Kampf mit den UI-Designern.

XIB-Dateien

Wer schon auf Xamarin 4 setzt und einen visuellen UI-Design-Editor bevorzugt, ist mit dieser Lösung wahrscheinlich am besten aufgehoben. Mit Xamarin Studio oder Visual Studio wird ein neuer XIB View Controller erzeugt. Damit dieser MvvmCross verwendet, muss die Basisklasse von UIViewController auf MvxViewController geändert werden. Im Beispiel unten wurden mit Hilfe des Designers drei UI-Elemente erzeugt. Als Namen wurden im Eigenschaftenfenster die (unkreativen) Namen UiLabel, UiTextField und UiButton definiert. Diese Elemente konnten dann im Data-Binding-Code angesprochen werden, der bei allen drei Ansätzen gleich aussieht.

Elementnamen setzen

Storyboard-Dateien

Der große Vorteil von Storyboards, die Möglichkeit, den Screenflow im Designer zu definieren, passt nicht so gut zum Navigationsansatz von MvvmCross. Wenn man einen Übergang von View A zu View B im Designer beschreibt, gilt dieser Übergang nur für iOS. Meist ist es sinnvoller, diese Navigationslogik in die plattformübergreifenden ViewModels zu verlagern. Daher ist es am besten, einen ein-ViewController-pro-Storyboard-Ansatz zu wählen, wenn man Storyboards mit MvvmCross verwendet.

Die Storyboard-ID setzen

Im Editor sollte die Storyboard-ID gleich dem Namen des ViewControllers gesetzt werden. Wie beim XIB-Ansatz sollte die Basisklasse von UIViewController auf MvxViewController geändert werden. Als nächstes sollte ein Konstruktor erstellt werden, der einen IntPtr an den Konstruktor der Basisklasse weiterreicht. Im letzten Schritt wird noch die ViewController-Klasse mit dem [MvxFromStoryboard]-Attribut dekoriert.

Zusammenfassung

Die gute Nachricht: Zum Projektstart muss die Wahl des Entwicklungsansatzes nicht getroffen werden. MvvmCross erlaubt die Erstellung jeder einzelnen View mit dem besten Ansatz für die jeweilige View. Es muss nur sichergestellt werden, dass es nicht mehrere Views für das gleiche ViewModel und die gleiche Plattform gibt.

Ich habe die Beispiele im MvvmCross Starter Pack Nuget (ab 4.0.0-beta8) so aktualisiert, dass eine XIB-Datei statt dem bisherigen handkodierten Ansatz mit absoluten Koordinaten (aus der Zeit vor Auto Layout) verwendet wird. Dies sollte den Einstieg in die iOS-Welt für erleichtern.

DWX14-Nachtrag: Einführung in Xamarin und MvvmCross


Bei der diesjährigen Developer Week in Nürnberg durfte ich einen Vortrag zu Cross-Platform-Entwicklung mit Xamarin und MvvmCross halten. Das hat mir großen Spaß mit Live-Coding und den Fragen aus dem Publikum.

Die Folien zum Vortrag sind auf Slidshare auf deutsch und englisch verfügbar. Der Code aus dem Live-Coding, den ich mit Hilfe von Ninja Coder erstellt habe, ist auf Github verfügbar.

Eine App-interne Statusleiste für Xamarin.iOS und MvvmCross

Für eine iPad-App für unseren Kunden Smart Enterprise Solutions brauchten wir die Möglichkeit, dem Anwender mehrere Nachrichten anzuzeigen. Diese Nachrichten waren hauptsächlich Rückmeldungen der Business-Logik-Schicht, die mit dem Backend kommuniziert. Die Nachrichten sollten innerhalb der App sichtbar sein. The messages should be visible inside the app. Einige der Nachrichten sollten vom Anwender bestätigt werden müssen während andere nach einer bestimmten Zeit wieder verschwinden sollten.

Die finale Statusleiste sieht so aus:

StatusBar

Der Code hierzu ist unter https://github.com/lothrop/StatusBar.iOS frei zugänglich.

Die Statusleiste heißt StatusView. Um die StatusView zu verwenden, sollte man sie mit Hilfe von Auto Layouts an den linken, rechten und unteren Rand andocken. StatusView wird durch das ViewModel MessageViewModel mit Daten befüllt. MessageViewModel beinhaltet eine ObservableCollection<IMessageItem>. Man kann MessageItems an jeder der Stelle der Collection hinzufügen oder entfernen oder auch innerhalb der Collection verschieben.

Ein Anwendungsbeispiel steht in der Datei MainViewController.cs.

Vielen Dank an Smart Enterprise Solutions, die mir erlaubt haben, diese Code zu veröffentlichen.