Apps entwickeln? Xamarin!
Entwurf der Benutzeroberfläche
Wer auf einen Designer für die Benutzeroberfläche bei Xamarin hofft, wird enttäuscht. Hier ist im Moment noch XAML-Handarbeit gefragt. Microsoft hat mit den letzten Visual-Studio-Patches in diesem Bereich Erweiterungen vorgenommen, derzeit ist aber das direkte XAML-Coding noch die Methode der Wahl. Dank des separaten Vorschaufensters ist das keine grosse Hürde, die Vorteile von XAML überzeugen schnell. Zum einen liest es sich leichter als komplett programmatisch erzeugte Oberflächen in C#, und zum anderen können Konflikte bei der Versionierung einfacher gelöst werden als in designergeneriertem Code.
In XAML stehen verschiedenste Seiten, Layouts, Zellen und viele andere Steuerungselemente zur Verfügung [4]. Farben und auch ganze Themes können dynamisch geladen werden, sodass zur Laufzeit der App das Aussehen geändert werden kann. Sobald sich der Farbwert einer Ressource ändert, aktualisiert sich jede Komponente, die diese Farbressource benutzt. Das ermöglicht mit wenig Aufwand einen Nachtmodus oder eine generelle Theme-Auswahl (Bild 4).
Vergleich zweier Farbschemata auf Android (Bild 4)
Man kann in XAML, abhängig von der Plattform, unterschiedliche Abstände, Farben, Sichtbarkeiten und andere verfügbare Eigenschaften setzen. Falls aber Bedingungen benötigt werden oder Zellen einer Tabelle vom Inhalt abhängig sein sollen, muss eine separate C#-Klasse erstellt werden.
Jedes Xamarin.Forms-Steuerungselement wird von einem Renderer in die nativen Komponenten von Android, iOS und Windows umgewandelt. Diese Renderer kann man als Entwickler erweitern und so den Komponenten ein benutzerdefiniertes Aussehen und Verhalten verleihen. Damit die App einheitlich aussieht, kommt man aufgrund der verschiedenen nativen Komponenten und Richtlinien kaum um eigene Renderer herum.
Die ListView ist eine der wichtigsten Komponenten, da sie beliebig viele Elemente tabellarisch darstellen kann. Das Steuerungselement wird in eine UITableView auf iOS umgewandelt. Im Renderer zum Beispiel im iOS-Projekt erbt man dann von der Klasse ListViewRenderer und überschreibt nach Bedarf die Methode OnElementChanged. Dort hat man dann durch die Eigenschaft Element Zugriff auf das Xamarin-Element (ListView), und durch die Eigenschaft Control kann die gerade erstellte iOS-Komponente (UITableView) angesprochen werden (Listing 1). So lassen sich Änderungen direkt am nativen Steuerungselement vornehmen (Bild 5). Konvention ist es, vom Xamarin-Steuerungselement zu erben und dann explizit nur diese Subklasse zu rendern. Man erstellt beispielsweise eine Klasse AdvancedListView, kann in XAML die selbst definierten Eigenschaften setzen und in den Renderern auf jeder Plattform auf diese zugreifen und basierend darauf das Element verändern.
Listing 1: Renderer für eine ListView auf iOS
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using ReportServer.App.iOS.Renderers;
// Registriert diesen Renderer für alle
// Steuerungselemente des Typs "ListView”
[assembly: ExportRenderer(typeof(ListView),
typeof(CustomListViewRenderer))]
namespace ReportServer.App.iOS.Renderers
{
public class CustomListViewRenderer :
ListViewRenderer
{
protected override void OnElementChanged(
ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
// this.Element : Xamarin.Forms.ListView
// this.Control : UIKit.UITableView
// Sofern das iOS-Steuerungselement bereits
// erstellt ist
if (Control != null)
{
// Entfernt alle unnötigen Trennlinien, indem
// eine (leere) TableFooterView hinzugefügt
// wird
Control.TableFooterView = new UIView();
// Setzt den Abstand der Trennlinien zu allen
// Rändern auf 0
Control.SeparatorInset = UIEdgeInsets.Zero;
}
}
}
}
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using ReportServer.App.iOS.Renderers;
// Registriert diesen Renderer für alle
// Steuerungselemente des Typs "ListView”
[assembly: ExportRenderer(typeof(ListView),
typeof(CustomListViewRenderer))]
namespace ReportServer.App.iOS.Renderers
{
public class CustomListViewRenderer :
ListViewRenderer
{
protected override void OnElementChanged(
ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
// this.Element : Xamarin.Forms.ListView
// this.Control : UIKit.UITableView
// Sofern das iOS-Steuerungselement bereits
// erstellt ist
if (Control != null)
{
// Entfernt alle unnötigen Trennlinien, indem
// eine (leere) TableFooterView hinzugefügt
// wird
Control.TableFooterView = new UIView();
// Setzt den Abstand der Trennlinien zu allen
// Rändern auf 0
Control.SeparatorInset = UIEdgeInsets.Zero;
}
}
}
}
Beispiel-Renderer für eine ListView (Bild 5)
Was jede grössere Applikation benötigt, ist ein Menü. Dessen wohl am weitesten verbreitete Ausprägung ist das Hamburger-Menü (Bild 6). Bei einem Klick auf das sogenannte Hamburger-Icon erscheint eine Seite, die über die aktuelle Ansicht gelegt wird oder die aktuelle Seite beiseite schiebt. Bei Xamarin kann einfach eine MasterDetailPage verwendet werden, an welche die Menü-Seite und die aktuelle Seite angehängt werden. Zusätzlich kann dann das Verhalten beziehungsweise die Animation des Menüs gewählt werden. Das ist ein sehr praktisches Feature und kaum irgendwo anders so einfach zu implementieren.
Das Hamburger-Menü der Mobilapplikationen (Bild 6)
Fußnoten
Autor(in)
Joshua
Rutschmann
