GUI nach Maß dank Xamarin.Forms – Teil 1

Erstellung von GUIs für Android mit Xamarin Studio
Kommentare

Xamarin hat im Laufe der letzten Jahre eine rapide Entwicklung durchgemacht: Aus der .NET Runtime für Unix wurde ein veritables Cross-Plattform-System, das mit Xamarin.Forms sogar einen eigenen plattformunabhängigen GUI-Stack anbietet. Im ersten Teil dieser Artikelserie beschäftigen wir uns mit der Aktualisierung von Visual Studio, dem Start der Erstellung von GUIs mit Xamarin Studio und der Fehlersuche.

Diese Artikelserie wird Schritt für Schritt erklären, wie man GUIs für Android mit Xamarin Studio erstellt. Im ersten Teil widmen wir uns zunächst der Aktualisierung von Visual Studio, dem Start der Erstellung von GUIs mit Xamarin Studio und der Fehlersuche. Im zweiten Teil geht es um Fragmentierung, Lokalisierung und Testing in Xamarin Studio. Später beschäftigen wir uns mit der gesamten Hostplattform und wollen in Teil 3 die Android-Besonderheiten bei der Entwicklung mit Xamarin näher kennenlernen, bevor wir uns in Teil 4 mit den Sicherheitsvorkehrungen und Gefahren befassen.

Trotz der reichhaltigen Möglichkeiten von Xamarin.Forms gibt es immer wieder Situationen, in denen man lieber auf die nativen Steuerelemente der jeweiligen Hostplattform zurückgreift. Außerdem gibt es keine offizielle Möglichkeit, Xamarin.Forms-Formulare in einem WYSIWYG-Editor zu bearbeiten – auf die diversen Workarounds wollen wir an dieser Stelle nicht weiter eingehen. Darüber hinaus gibt es immer wieder Steuerelemente von Drittanbietern, die nur in einer bestimmten Umgebung lebensfähig sind. Werbesysteme sind ein klassischer Problemfall, der Cross-Platform-Entwicklern schon einmal graue Haare verpasst.

Kurz gefasst: Es gibt eine Vielzahl von Gründen für komplett native Benutzerschnittstellen. In diesem Fall schlägt die Stunde der in Xamarin Studio bzw. in Visual Studio verbauten Designerprogramme, die die Arbeit erheblich erleichtern.

Aktualisierung von Visual Studio

Wer auf seiner Workstation eine ältere, also vor der Build 2016 heruntergeladene, Version von Visual Studio verwendet, sollte seine IDE auf die aktuellste Version –Update 2 – aktualisieren. Microsoft bietet  ein Programm an, das die (auch auf schnellen Workstations eine gute Stunde dauernde) Aktualisierung automatisch vornimmt. Achten Sie darauf, die aktuellste Version von Xamarin durch manuelle Auswahl mit zu installieren. Je nach Systemkonfiguration kann es vorkommen, dass das Installationsprogramm das Paket „vergisst“.

Klicken Sie nach dem obligaten Neustart auf New Project, und erzeugen Sie ein neues Projekt vom Typ Visual C# | Android | Blank App. In den folgenden Beispielen wird vom Projektnamen „GUITest“ ausgegangen.

Bevor wir uns der eigentlichen Erstellung von Benutzerinterfaces zuwenden, noch eine kleine Erklärung zum Hintergrund. Android arbeitet mit im XML-Format vorliegenden Steuerelementen bzw. Formularen, die zur Laufzeit von einem Extraktor in Klassenhierarchien umgewandelt werden.

Auch wenn man Steuerelemente theoretisch zur Laufzeit erzeugen und einfügen kann, entstehen die meisten Formulare aus Layoutdateien, die während der Programmausführung maximal um Kleinigkeiten erweitert werden. Die Zusammenstellung der Layoutfiles erfolgt – je nach Fasson des Entwicklers – entweder von Hand in einem an Webdesign erinnernden Prozess, oder durch verschiedene Generatoren.

Xamarin im Videotutorial

entwickler.tutorialsIn unserem entwickler.tutorial Einstieg in Cross-Plattform-App-Development mit Xamarin zeigt Jörg Neumann, wie Xamarin funktioniert und wie Sie das Maximum aus der Plattform herausholen können. Wer sich jetzt anmeldet, sichert sich das 3-in-1 Gratistutorial – und kann das erste Kapitel des Tutorials kostenlos sehen!

GUIs mit Xamarin Studio

Android-erfahrene Entwickler bemerken in Abbildung 1 einen kleinen Unterschied im Ordnerlayout: Die Layoutdatei heißt hier Main.AXML, anstatt wie normalerweise eine gewöhnliche XML-Datei zu sein. Dieser Unterschied ist durchaus relevant. XML-Dateien können mehrere Versionen einer Ressource enthalten und sind somit nicht mit den für normale .xml-Dateien vorgesehenen Werkzeugen kompatibel.

Nach dem Öffnen via Doppelklick erscheint aufgrund suboptimaler Zoomeinstellungen in der Regel lediglich ein graues Rechteck auf der oberen Seite des Bildschirms. Dieses Problem lässt sich durch Anklicken der Portrait- oder Landscape-Buttons beheben. Nach Anklicken der Knöpfe sollte das Formular ungefähr wie in Abbildung 1 gezeigt aussehen.

Abb. 1: Das von Microsoft vorgegebene Formular ist nicht besonders komplex

Abb. 1: Das von Microsoft vorgegebene Formular ist nicht besonders komplex

Die auf der rechten Seite des Bildschirms befindliche Toolbox bietet eine Liste von Steuerelementen an, die sich per Drag and Drop beliebig auf dem Bildschirm platzieren lassen. Wir wollen fürs Erste einen weiteren Knopf einfügen: Er liegt in der Kategorie „Button“, und fügt sich beim Einbauen automatisch unter dem schon vorhandenen „Hello-World“-Knopf ein. Das liegt daran, dass Android-Formulare so gut wie immer automatisch gelayoutet werden.

Die Navigation durch Formulare geht besonders bequem von der Hand, wenn man eine baumartige Ansicht der Inhalte des Layouts hat. Diese wird von Xamarins Android Designer von Haus aus nicht angezeigt, lässt sich aber durch Anklicken von View | Other windows | Document outline oder das Drücken von CTRL + ALT + T auf den Bildschirm holen.

Richtig bequem lässt es sicher immer dann arbeiten, wenn man die Toolbox öffnet und das herumschwebende Document-Outline-Fenster unter ihr andockt. Auf diese Art und Weise entsteht auf der linken Seite des Bildschirms ein kombiniertes Fenster aus Toolbox und Dokumentenoutline, das bei der Bearbeitung hilfreich ist.

Um diesen Sachverhalt nachzuvollziehen, wollen wir den Quellcode des Formulars betrachten. Klicken Sie auf den Source-Tab, um den XAML-Code aus Listing 1 auf den Bildschirm zu holen.

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <Button
    android:id="@+id/MyButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/Hello" />
  <Button
    android:text="Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button1" />
</LinearLayout>

Das in Listing 1 gezeigte Codesnippet ist insofern interessant, als dass es die Verwendung von Ausbreitungsattributen demonstriert. Das Layoutsystem analysiert den zur Verfügung stehenden Bildschirmplatz zur Laufzeit und weist den einzelnen Widgets je nach Verfügbarkeit Platz zu.

Wir sehen in Listing 1 gleich mehrere Attribute: match_parent übernimmt die Dimension des Elternelements, während wrap_content den minimal nötigen Platz zur Darstellung der Inhalte einnimmt. Mittels fill_parent weist man das Steuerelement dazu an, den maximal möglichen Platz einzunehmen.

Für das Zuweisen dieser Attribute müssen Sie nicht unbedingt in die Codeansicht wechseln. Wer die einzelnen Widgets im Editor markiert, sieht neben den bekannten Drag-Controllern auch die in Abbildung 2 und Abbildung 3 aufgeschlüsselten Pfeile. Wer sie anklickt, setzt das Skalierungsverhalten der jeweiligen Achse automatisch auf den gewünschten Wert.

Abb. 2: Nach außen zeigende Pfeile aktivieren die Option „Match Parent“ (Bildquelle: Xamarin)

Abb. 2: Nach außen zeigende Pfeile aktivieren die Option „Match Parent“ (Bildquelle: Xamarin)

Abb. 3: Nach innen zeigender Pfeil versetzt Steuerelement in Wrap- Content-Modus (Bildquelle: Xamarin)

Abb. 3: Nach innen zeigender Pfeil versetzt Steuerelement in Wrap- Content-Modus (Bildquelle: Xamarin)

Abermaliges Anklicken des Steuerelements ersetzt die Vergrößerungssteuerelemente durch die in Abbildung 4 gezeigten Pulleys. Sie erlauben das Festlegen der Breite der Margins, die dem von Haus aus zugewiesenem Platz zusätzlichen Raum abziehen.

Abb. 4: Margins lassen sich direkt aus dem Editor heraus konfigurieren (Bildquelle: Xamarin)

Abb. 4: Margins lassen sich direkt aus dem Editor heraus konfigurieren (Bildquelle: Xamarin)

Smarter Knopf

Data Binding ist unter Android nur sehr rudimentär implementiert. Das Zuweisen von Event Handlern erfolgt normalerweise zur Laufzeit. Unser Projektskelett führt dies im Code Behind vor – OnCreate weist dem Click-Event des Knopfs einen Delegaten zu, der den auszuführenden Code bereitstellt (Listing 2).

 
protected override void OnCreate(Bundle bundle)
{
  base.OnCreate(bundle);

  SetContentView(Resource.Layout.Main);

  Button button = FindViewById<button>(Resource.Id.MyButton);

  button.Click += delegate { button.Text = string.Format("{0} clicks!", count++); };
}

Xamarin Studio greift von XAML verwöhnten Entwicklern an dieser Stelle unter die Arme – im auf der unteren rechten Bildschirmkante eingeblendeten Properties-Feld gibt es einen Wert onClick, dessen Nutzung allerdings etwas Umdenken voraussetzt. Doppeltes Anklicken des Felds öffnet den für uns derzeit nicht relevanten Ressourcenselektor. Geben Sie stattdessen den Wert susWelcome ein.

Zur Nutzung des Handlers müssen Sie im Code-Behind eine Methode anlegen, die von Xamarin zur Laufzeit mit dem Steuerelement verdrahtet wird. Im Fall des Namens susWelcome sieht der dazu notwendige Code wie in Listing 3 aus.

 
[Activity(Label = "GUITest", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
  int count = 1;

  [Export("susWelcome")]
  public void susWelcome(View v)
  {
    Button b = (Button)v;
    b.Text = "Autsch!";
  }

Android Event Handler werden immer mit einem Zeiger auf das für die Auslösung zuständige Steuerelement ausgeliefert. Das ist insofern interessant, als dass Android-Entwickler einen Event Handler gerne mit mehreren Widgets verdrahten. Wundern Sie sich also nicht, wenn onPuberLevitating für eine ganze Kohorte von Sprayern verantwortlich ist.

Export weist den in Xamarin integrierten Compiler dazu an, die betreffende Methode für Java sichtbar zu machen. Das ist wichtig, da das Fehlen der passenden Funktion zur Laufzeit zu einem Absturz des GUI-Stacks führt. Für die Nutzung der in Java.Interop beheimateten Exportierfunktion ist das Hinzufügen einer Referenz auf die Assembly Mono.Android.Export.dll erforderlich. Diese lässt sich wie jeder andere Assembly-Verweis einpflegen.

Damit ist das Programm auch schon für die Ausführung bereit. Klicken Sie auf den Play-Knopf in der Toolbar, um die Kompilation anzuwerfen. Die Virtual Machine (VM) „Xamarin_ANDROID_API_23“ erwies sich in den Tests des Autors als am unproblematischsten. Im Rahmen des ersten Starts konstruiert Visual Studio eine virtuelle Maschine, wozu etwas Zeit erforderlich ist.

Fehlersuche

Googles Android-Emulator erweist sich unter Windows mitunter als zickig; paradoxerweise treten Probleme immer dann gehäuft auf, wenn die Basishardware extrem leistungsfähig ist. Als erste Gegenmaßnahme ist ein Windows-Neustart zwingend erforderlich.

Funktioniert die VM danach noch immer nicht, sollten sie von Hand gestartet werden. Zur Fehlersuche eignet sich das von Google bereitgestellte AVD-Verwaltungstool.

Wählen Sie im nächsten Schritt das problematische AVD – die Abkürzung steht übrigens für Android Virtual Device – aus, und öffnen Sie seine Eigenschaften über den Edit-Button. Bei auf x86-Technologie basierenden virtuellen Maschinen ist es mitunter hilfreich, die Option „Use Host GPU“ zu deaktivieren. Wer den Microsoft-eigenen Android-Emulator benutzt, findet hier eine Liste von häufigen Fehlerquellen.

Reißen alle Stricke, so bietet sich die Nutzung realer Hardware an. Aus Platzgründen können wir an dieser Stelle darauf nicht weiter eingehen. Versetzen Sie das jeweilige Telefon in den Entwicklermodus und verbinden Sie es mit dem Rechner.

Tests auf realen Geräten Nach Meinung des Autors sollte man Handcomputerapplikationen immer auf einem realen Gerät testen. Erstens lassen sich heutige Hochleistungssmartphones nur sehr schwer auf Workstations emulieren (Displayauflösung!), zweitens gibt es massive haptische Differenzen zwischen einem echten Telefon und einem per Tastatur und Maus zu bedienenden analogen Gerät.

Im zweiten Teil der Artikelserie geht es um die Fragmentierung, Lokalisierung und das Testing in Xamarin Studio.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -