Für verschiedene Bildschirmgrößen entwickeln

Ihre App sollte auf Wear OS-Geräten aller Größen funktionieren, je mehr Platz verfügbar ist, und sehen auch auf kleineren Bildschirmen gut aus. In diesem Leitfaden finden Sie Empfehlungen, wie Sie diese Nutzererfahrung optimieren können.

Weitere Informationen zu den Designprinzipien für adaptive Layouts finden Sie in den Tipps für das Design.

Responsive Layouts mit Horologist erstellen

Layouts sollten prozentbasierte Ränder haben. Da die Funktion „Compose“ Standard in absoluten Werten verwenden, verwenden Sie Komponenten aus dem Horologenbibliothek mit folgenden Funktionen:

  • Die horizontalen Ränder sind basierend auf einem Prozentsatz des Gerätebildschirms richtig festgelegt. Größe.
  • Der obere und untere Abstand sind richtig eingestellt. Dies birgt besondere Herausforderungen da der empfohlene Abstand oben und unten von den Komponenten abhängen kann, verwendet. Beispielsweise sollte ein Chip einen anderen Abstand haben als ein Text. -Komponente, wenn sie in einer Liste verwendet wird.
  • TimeText Ränder sind richtig festgelegt.

Im folgenden Code-Snippet wird die Horologen-Version des ScalingLazyColumn-Layout, um Inhalte zu erstellen, die auf verschiedenen Geräten gut aussehen der Wear OS-Bildschirmgrößen:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

In diesem Beispiel werden auch ScreenScaffold und AppScaffold veranschaulicht. Diese Koordination zwischen der App und den einzelnen Bildschirmen (Navigationsrouten), um für ein korrektes Scrollverhalten und TimeText-Positionierung.

Für den Abstand oben und unten ist Folgendes zu beachten:

  • Die Spezifikation des ersten und letzten ItemType, um die korrekte Abstand.
  • Die Verwendung von ResponsiveListHeader für das erste Element in der Liste, weil Text-Header sollten keinen Abstand haben.

Die vollständigen Spezifikationen finden Sie in den Figma-Designkits. Weitere Informationen Details und Beispiele finden Sie hier:

  • Die Horologenbibliothek enthält Komponenten, die beim Erstellen und differenzierte Apps für Wear OS optimieren.
  • ComposeStarter-Beispiel: ein Beispiel für die die in diesem Leitfaden erläutert werden.
  • JetCaster-Beispiel – ein komplexeres Beispiel für das Erstellen eines App für unterschiedliche Bildschirmgrößen, mit der Horologen-Bibliothek.

Scroll-Layouts in Ihrer App verwenden

Verwenden Sie als Standardauswahl ein Scroll-Layout, wie weiter oben auf dieser Seite gezeigt. Implementierung Ihrer Bildschirme. So können Nutzer auf die Komponenten Ihrer App zugreifen unabhängig von den Anzeigeeinstellungen oder der Bildschirmgröße des Wear OS-Geräts.

Die Auswirkungen unterschiedlicher Gerätegröße und Schriftskalierung

Die Auswirkungen unterschiedlicher Gerätegrößen und die Schriftskalierung.

Dialogfelder

Die Dialogfelder sollten auch gescrollt werden können, es sei denn, es gibt einen sehr guten Grund, dies nicht zu tun. Mit der Komponente ResponsiveDialog von Horologist Folgendes:

  • Standardmäßig scrollen.
  • Prozentuale Margen korrigieren.
  • Schaltflächen, die ihre Breite anpassen, wenn der Platz ausreicht, um eine größere Tippziele
Adaptives Dialogverhalten beim Horologen

Responsive Dialogfelder mit standardmäßigem Scrollen und Schaltflächen, die sich anpassen an den verfügbaren Speicherplatz.

Für benutzerdefinierte Bildschirme sind möglicherweise nicht scrollbare Layouts erforderlich

Einige Bildschirme eignen sich möglicherweise immer noch für Layouts ohne Scrollen. Mehrere Beispiele den Hauptbildschirm des Players in einer Medien-App und den Trainingsbildschirm Fitness-App.

Sehen Sie sich in diesen Fällen die kanonischen Hinweise an, die in der Figma-Designkits an und implementieren ein Design, das auf die Größe responsiv ist. des Bildschirms mit den richtigen Rändern.

Durch Haltepunkte differenzierte Inhalte anbieten

Auf größeren Displays können Sie zusätzliche Inhalte und Funktionen präsentieren. Bis Implementieren Sie diese Art von differenzierter Erfahrung, verwenden Sie Haltepunkte für die Bildschirmgröße, mit einem anderen Layout, wenn die Bildschirmgröße 225 dp überschreitet:

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...
List.kt

Im Leitfaden für das Design werden weitere dieser Möglichkeiten erläutert.

Kombinationen von Bildschirm- und Schriftgrößen mit Vorschauen testen

Mit der Funktion Vorschauen erstellen können Sie Apps für verschiedene Wear OS-Bildschirmgrößen entwickeln. Verwenden Sie die Vorschaudefinitionen für Geräte und für die Schriftskalierung, um Folgendes zu sehen:

  • Wie Ihre Bildschirme bei extremen Größen aussehen, z. B. mit der größten Schriftart mit dem kleinsten Bildschirm gekoppelt.
  • Wie sich Ihre differenzierte Erfahrung über Haltepunkte hinweg verhält.

Implementieren Sie Vorschauen mit WearPreviewDevices und WearPreviewFontScales für alle Bildschirme in Ihrer App.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Screenshot-Test

Neben Vorschautests können Sie auch Screenshots vorhandenen Hardwaregrößen. Das ist besonders nützlich, wenn diese Geräte stehen Ihnen nicht sofort zur Verfügung und das Problem tritt auf anderen Bildschirmgrößen.

Mit Screenshot-Tests können Sie auch Regressionen an bestimmten Stellen in Ihre Codebasis zu verbessern.

In unseren Beispielen wird für Screenshot-Tests Roborazzi verwendet:

  1. Konfigurieren Sie die zu verwendenden build.gradle-Dateien für Projekt und Anwendung. Roborazzi.
  2. Erstellen Sie einen Screenshot-Test für jeden Bildschirm in Ihrer App. Beispiel: Im ComposeStarter-Beispiel ist ein Test für GreetingScreen wie in GreetingScreenTest zu sehen:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Wichtige Hinweise:

  • Mit FixedTimeSource kannst du Screenshots generieren, wenn das TimeText nicht variieren und führen versehentlich dazu, dass Tests fehlschlagen.
  • WearDevice.entries enthält Definitionen für die gängigsten Wear OS-Geräte. dass die Tests für einen repräsentativen Bereich von Bildschirmgrößen durchgeführt werden.

Goldene Bilder generieren

Führen Sie den folgenden Befehl in einem Terminal aus, um Bilder für Ihre Bildschirme zu generieren:

./gradlew recordRoborazziDebug

Images prüfen

Um Änderungen an vorhandenen Images zu prüfen, führen Sie den folgenden Befehl in einem Terminal:

./gradlew verifyRoborazziDebug

Ein vollständiges Beispiel für Screenshot-Tests finden Sie im Beispiel ComposeStarter.