Layout für Tablet- und Desktop-Apps

Xamarin.Forms unterstützt alle Gerätetypen, die auf den unterstützten Plattformen verfügbar sind, sodass Apps zusätzlich zu Smartphones auch auf folgenden Plattformen ausgeführt werden können:

  • Ipads
  • Android-Tablets,
  • Windows-Tablets und -Desktopcomputer (mit Windows 10).

Auf dieser Seite wird kurz folgendes erläutert:

  • die unterstützten Gerätetypen und
  • wie Layouts für Tablets im Vergleich zu Smartphones optimiert werden.

Gerätetypen

Größere Bildschirmgeräte sind für alle Plattformen verfügbar, die von unterstützt werden Xamarin.Forms.

iPads (iOS)

Die Xamarin.Forms Vorlage schließt automatisch iPad-Unterstützung ein, indem die Einstellung Info.plist-Geräte > auf Universal konfiguriert wird (was bedeutet, dass sowohl iPhone als auch iPad unterstützt werden).

Um ein angenehmes Starterlebnis zu bieten und sicherzustellen, dass die Vollbildauflösung auf allen Geräten verwendet wird, sollten Sie sicherstellen, dass ein iPad-spezifischer Startbildschirm (mithilfe eines Storyboards) bereitgestellt wird. Dadurch wird sichergestellt, dass die App auf iPad mini-, iPad- und iPad Pro-Geräten ordnungsgemäß gerendert wird.

Vor iOS 9 haben alle Apps den Vollbildmodus auf dem Gerät verwendet, aber einige iPads können jetzt Multitasking mit geteiltem Bildschirm ausführen. Dies bedeutet, dass Ihre App nur eine schlanke Spalte auf der Seite des Bildschirms, 50 % der Bildschirmbreite oder den gesamten Bildschirm einnehmen kann.

iPad Split Screen Example (iPad Split Screen Beispiel)

Die Funktion für geteilte Bildschirme bedeutet, dass Sie Ihre App so entwerfen sollten, dass sie mit einer Breite von nur 320 Pixeln oder einer Breite von bis zu 1366 Pixeln gut funktioniert.

Android-Tablets

Das Android-Ökosystem verfügt über eine Vielzahl von unterstützten Bildschirmgrößen, von kleinen Smartphones bis hin zu großen Tablets. Xamarin.Forms kann alle Bildschirmgrößen unterstützen, aber wie bei den anderen Plattformen sollten Sie die Benutzeroberfläche für größere Geräte anpassen.

Wenn Sie viele verschiedene Bildschirmauflösungen unterstützen, können Sie Ihre nativen Bildressourcen in unterschiedlichen Größen bereitstellen, um die Benutzererfahrung zu optimieren. Weitere Informationen zum Strukturieren der Ordner und Dateinamen in Ihrem Android-App-Projekt finden Sie in der Dokumentation zu Android-Ressourcen (und insbesondere zum Erstellen von Ressourcen für unterschiedliche Bildschirmgrößen).

Windows-Tablets und -Desktops

Zur Unterstützung von Tablets und Desktopcomputern unter Windows müssen Sie die Windows-UWP-Unterstützung verwenden, die universelle Apps erstellt, die auf Windows 10 ausgeführt werden.

Apps, die auf Windows-Tablets und -Desktops ausgeführt werden, können zusätzlich zur Ausführung im Vollbildmodus auf beliebige Dimensionen angepasst werden.

für geteilten Windows-Bildschirm

Optimieren für Tablet und Desktop

Sie können Ihre Xamarin.Forms Benutzeroberfläche anpassen, je nachdem, ob ein Smartphone oder ein Tablet/Desktopgerät verwendet wird. Dies bedeutet, dass Sie die Benutzererfahrung für Großbildgeräte wie Tablets und Desktopcomputer optimieren können.

Device.Idiom

Sie können die Device -Klasse verwenden, um das Verhalten Ihrer App oder Benutzeroberfläche zu ändern. Mithilfe der Device.Idiom -Enumeration können Sie

if (Device.Idiom == TargetIdiom.Phone)
{
    HeroImage.Source = ImageSource.FromFile("hero.jpg");
} else {
    HeroImage.Source = ImageSource.FromFile("herotablet.jpg");
}

Dieser Ansatz kann erweitert werden, um erhebliche Änderungen an einzelnen Seitenlayouts vorzunehmen oder sogar völlig unterschiedliche Seiten auf größeren Bildschirmen zu rendern.

Nutzen von FlyoutPage

Ist FlyoutPage ideal für größere Bildschirme, insbesondere auf dem iPad, wo es verwendet, UISplitViewController um eine native iOS-Erfahrung zu bieten.

Lesen Sie diesen Xamarin-Blogbeitrag , um zu erfahren, wie Sie Ihre Benutzeroberfläche so anpassen können, dass Telefone ein Layout verwenden und größere Bildschirme ein anderes verwenden können (mit FlyoutPage).