App-Entwicklung mit Xamarin 10.02.2022, 09:58 Uhr

Ordnung ist die halbe App

Mobile Apps sollen mit einem durchdachten User Interface glänzen. Eine wichtige Voraussetzung ist das passende Layout.
(Quelle: Foto: Olga Moonlight / Shutterstock)
Der Entwurf und letztendlich auch die Umsetzung der Benutzerschnittstelle für Apps der mobilen Plattformen ist eine besondere Herausforderung. Auf einer begrenzten Bildschirmgröße sind alle Elemente anzuordnen und dabei ist stets die User Experience, also ein maximaler Kundennutzen im Blick zu behalten.
Unterschiedliche Gerätetypen (Smartphone und Tablet) und Betriebssysteme (iOS, Android) machen die Aufgabe noch komplizierter. Bei der plattformübergreifenden Programmierung wird versucht eine App für beide Systeme aus einer gemeinsamen Quellcodebasis zu erstellen. Ein langjährig etabliertes Vorgehen ist das Framework Xamarin aus dem Hause Microsoft. Programmiert wird mit C# und das User Interface wird mit XAML deklarativ erstellt. Aus der generischen Beschreibung der Benutzerschnittstelle generiert der Compiler jeweils eine native App für die Zielplattform und verwendet dabei auch die Controls von iOS beziehungsweise Android für die Darstellung.
Zur Festlegung der Seitenstrukturen kommen dabei Layout Container zum Einsatz. Als erstes sollten Sie einen Blick auf die unterschiedlichen Layout Container von Xamarin.Forms werfen. Diese muss man kennen, damit man in der Praxis den passenden Aufbau des User Interfaces wählen kann. Bevor man mit der konkreten Umsetzung des Layouts im Quellcode startet, ist es sinnvoll sich über den Einsatz der genannten Layout Container Gedanken zu machen. Mit anderen Worten: Sie brauchen ein Konzept. Ein solches Konzept kann im Falle des UI-Entwurfs in einer Skizze bestehen, welche eine Planung zur Anordnung und Schachtelung der Layout-Container vornimmt. Danach wird es um die technische Umsetzung, also die Codierung mittels XAML gehen. Das Ergebnis ist noch keine fertige Benutzeroberfläche, sondern ein tragfähiges Layout für eine plattformübergreifend programmierte App in Xamarin.Forms für iOS und Android.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar