How To Xamarin – Teil 2: Anpassung der Benutzeroberfläche auf verschiedene mobile Endgeräte

Entwickelt man eine App mit Xamarin, die später auf verschiedenen Plattformen lauffähig und gut aussehen soll, ist es wichtig, dass das UI auch auf allen Geräten gleich aussieht und sich nichts verschiebt oder unlesbar wird. Selbst wenn man vor hat, seine App nur für eine Plattform zu entwickeln, bietet jeder Hersteller eine Vielzahl an Geräten mit unterschiedlichsten Größen und Auflösungen des Displays. Besser ist es natürlich, das UI immer wieder auf verschiedenen Emulatoren oder Geräten zu testen, um bereits bei der Entwicklung schon mal ein paar unterschiedliche Displays abzudecken und sich daran zu orientieren, ob man auf dem richtigen Weg ist.

Um dieses Ziel zu erreichen, gibt es verschiedene Vorgehensweisen. Doch die beste Methode ist es, wenn sich das UI selbst durch das jeweilige Layout ausrichtet.

Xamarin liefert bereits verschiedenste Layouts, die sog. Xamarin.Forms. Beispielsweise wird bei einem „GridLayout“ alles in einem Gitternetz angeordnet. Bei einem „StackLayout“ werden alle Elemente „gestapelt“. Werden bei der Programmierung ein paar Sachen beachtet, skaliert das jeweilige Layout die Anordnung der UI-Elemente sobald die App auf einem größeren/kleineren Display oder das Smartphone im Landscape-Modus verwendet wird.Bei der Programmierung ist zu beachten, dass man feste Pixelwerte nur verwendet, wenn es wirklich nicht anders geht. Die richtige Methode ist es, die bereits vorgefertigten Attribute und Werte von Xamarin zu verwenden.

Beispiel

Beispielsweise möchte man in seiner App eine „LoginView“ haben, in der es jeweils ein Eingabefeld für Nutzername und für das Passwort gibt sowie einen Button, um die Anmeldedaten abzusenden. Möchte man, dass sich diese drei Elemente untereinander anordnen und sich immer über die volle Breite des Displays erstrecken (egal ob Landscape oder Portrait) bietet sich ein „StackLyout“ an, welches diese drei UI-Elemente als Kind-Elemente beinhaltet. Gibt man dem „StackLayout“ nun noch das Attribut „HorizontalOptions“ mit dem vorgefertigten Wert „FillAndExpand“, wird sich das „StackLayout“ immer über die verfügbare Breite erstrecken. Gibt man ihm noch das Attribut „Orientation“ mit dem Wert „Vertical“, werden sich alle Elemente darin immer vertikal zueinander anordnen.

Das Beispiel sieht dann so aus:

<StackLayout HorizontalOptions="FillAndExpand" Orientation="Vertical">
  <Entry />
  <Entry />
  <Button />
</StackLayout>

Wichtig ist es also, wann immer es möglich ist, die vorgefertigten Attribute und Werte von Xamarin zu verwenden.

In meinem nächsten Blog-Beitrag erkläre ich euch, worauf man achten muss, wenn man eine bereits vorhandene Xamarin App auf ein Windows Phone 8 anpassen möchte.

Wer jetzt schon mehr Infos zu Xamarin haben möchte, kann sich auch meinen ausführlichen Bericht dazu durchlesen.

Quellen:

• https://forums.xamarin.com/discussion/comment/235227#Comment_235227