Aplikacja powinna dobrze działać na wszystkich urządzeniach z Wear OS o różnych rozmiarach. w miarę możliwości i świetnie wygląda również na mniejszych ekranach. Ten przewodnik zawiera zalecenia, które pomogą Ci poprawić wrażenia użytkowników.
Aby dowiedzieć się więcej o zasadach projektowania układów adaptacyjnych, przeczytaj artykuł wskazówkami dotyczącymi projektowania.
Tworzenie układów elastycznych za pomocą aplikacji Horologist
Układy powinny mieć marże wyrażone w procentach. Ponieważ funkcja tworzenia wiadomości działa domyślnych w wartościach bezwzględnych, użyj komponentów z metody Biblioteka Horologistów, która zawiera te funkcje:
- Poziome marginesy są prawidłowo ustawiane na podstawie odsetka ekranu urządzenia rozmiaru.
- Odstępy u góry i u dołu są ustawione prawidłowo. Wiąże się to z pewnymi wyzwaniami
ponieważ zalecane odstępy u góry i u dołu mogą zależeć od komponentów
. Na przykład w elemencie
Chip
powinny występować inne odstępy niż w elemencieText
. podczas stosowania na liście. - Marginesy (
TimeText
) są ustawione prawidłowo.
Poniższy fragment kodu korzysta z wersji funkcji Horologist
ScalingLazyColumn
do tworzenia treści, które będą świetnie wyglądać na różnych urządzeniach.
rozmiarów ekranu Wear OS:
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 = { } ) } } }
Ten przykład przedstawia również ScreenScaffold
i AppScaffold
.
Są one koordynowane między aplikacją a poszczególnymi ekranami
(trasy nawigacji), by zapewnić prawidłowe przewijanie
Pozycjonowanie: TimeText
.
Pamiętaj o tych kwestiach dotyczących dopełnienia u góry i na dole:
- Specyfikacja pierwszego i ostatniego elementu
ItemType
w celu określenia poprawności dopełnienie. - Użycie właściwości
ResponsiveListHeader
w przypadku pierwszego elementu na liście, ponieważ NagłówkiText
nie powinny zawierać dopełnienia.
Pełną specyfikację znajdziesz w zestawach projektowych Figma. Więcej szczegóły i przykłady można znaleźć w materiałach na temat:
- Biblioteka Horologist zawiera komponenty, które pomagają tworzyć zoptymalizowane i zróżnicowane aplikacje na Wear OS.
- Przykład ComposeStarter to przykład omówionych w tym przewodniku zasad.
- Przykład z JetCaster to bardziej skomplikowany przykład tworzenia obsługuje różne rozmiary ekranów, korzystając z biblioteki Horologist.
Używanie układów przewijania w aplikacji
Jako opcję domyślną użyj układu przewijania, jak pokazano wcześniej na tej stronie. podczas wdrażania ekranów. Umożliwi to użytkownikom dotarcie do komponentów aplikacji niezależnie od ustawień wyświetlania czy rozmiaru ekranu urządzenia z Wear OS.
![Efekt różnego rozmiaru urządzenia i skalowania czcionek.](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=9&hl=pl)
Wpływ urządzeń o różnych rozmiarach i skalowanie czcionek.
Okna
Okna również powinny dać się przewijać, chyba że jest jakiś ważny powód.
Komponent ResponsiveDialog
udostępniony przez Horologist dodaje makro
:
- Domyślnie przewijanie.
- Popraw marże wyrażone w procentach.
- Przyciski, które dostosowują swoją szerokość do dostępnego miejsca, zapewniają elementy dotykowe.
![Adaptacyjne zachowanie okna dialogowego w aplikacji Horologist](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=9&hl=pl)
Elastyczne okna z domyślnie przewijaniem i przyciskami dopasowującymi się ilość dostępnego miejsca.
Ekrany niestandardowe mogą wymagać układów bez przewijania
Niektóre ekrany mimo to nadają się do układów bez przewijania. Kilka przykładów umieść główny ekran odtwarzacza w aplikacji do multimediów, a ekran treningu w aplikacja do fitnessu.
W takich przypadkach zapoznaj się z wytycznymi kanonicznymi zawartymi w zestawy projektowe Figma i zaprojektuj projekt dopasowany do rozmiaru. ekranu, z zachowaniem prawidłowych marginesów.
Zapewnianie zróżnicowanych doświadczeń dzięki punktom przerwania
Dzięki większym wyświetlaczom możesz udostępniać dodatkowe treści i funkcje. Do zastosuj tego rodzaju zróżnicowane środowisko, użyj punktów przerwania rozmiaru ekranu, pokazywać inny układ, gdy rozmiar ekranu przekracza 225 dp.
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. } // ...
Więcej takich możliwości przedstawiamy we wskazówkach dotyczących projektowania.
Testuj kombinacje rozmiarów ekranu i czcionek za pomocą podglądów
Podglądy tworzenia wiadomości ułatwiają tworzenie treści na ekranach o różnych rozmiarach ekranu z Wear OS. Użyj zarówno definicji urządzeń, jak i definicji podglądu skalowania czcionki, aby uzyskać te informacje:
- Największe rozmiary, na przykład największe czcionki wyświetlane na ekranach. sparowany z najmniejszym ekranem.
- Jak zróżnicowane środowisko działa w punktach przerwania.
Pamiętaj, aby zaimplementować podglądy za pomocą narzędzi WearPreviewDevices
i
WearPreviewFontScales
na wszystkich ekranach aplikacji.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Testowanie zrzutu ekranu
Oprócz testowania w wersji testowej zrzuty ekranu pozwalają na dotychczasowych urządzeniach. Jest to szczególnie przydatne, gdy te urządzenia mogą nie będą od razu dostępne, a problem może nie pojawić się innych rozmiarów ekranu.
Testowanie zrzutów ekranu pomaga określić regresje w określonych lokalizacjach w bazie kodu.
W naszych przykładach używamy Roborazzi do testowania zrzutów ekranu:
- Skonfiguruj pliki
build.gradle
projektu i aplikacji, których chcesz używać Roborazzi. - Utwórz test zrzutu ekranu dla każdego ekranu aplikacji. Przykład:
w przykładzie ComposeStarter test interfejsu
GreetingScreen
jest zaimplementowane tak jak wGreetingScreenTest
:
@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
}
}
Ważne uwagi:
FixedTimeSource
umożliwia generowanie zrzutów ekranu, w przypadku których nie można wykonać czynnościTimeText
mogą ulegać zmianom i w sposób niezamierzony spowodować niepowodzenie testów.WearDevice.entries
zawiera definicje najpopularniejszych urządzeń z Wear OS, więc aby testy zostały przeprowadzone na ekranach o reprezentatywnych rozmiarach.
Wygeneruj złote obrazy
Aby wygenerować obrazy ekranów, uruchom w terminalu to polecenie:
./gradlew recordRoborazziDebug
Zweryfikuj obrazy
Aby sprawdzić zmiany w istniejących obrazach, uruchom następujące polecenie w pliku terminal:
./gradlew verifyRoborazziDebug
Pełen przykład testowania zrzutu ekranu znajdziesz w przykładowym narzędziu ComposeStarter.