Material Design 3 w sekcji Utwórz

W Jetpack Compose dostępna jest implementacja Material Design 3, kolejny etap ewolucji Material Design. Material 3 ma zaktualizowany motyw, komponentów i funkcji personalizacji Material You, takich jak dynamiczne kolory. spójnie z nowym stylem wizualnym i interfejsem systemu na Androidzie 12. i innych.

Poniżej przedstawiamy implementację Material Design 3. z użyciem aplikacji Odpowiedz jako przykładu. Przykładowe odpowiedzi to w całości oparty na Material Design 3.

Odpowiedz na przykładową aplikację, używając Material Design 3
Rysunek 1. Odpowiedz na przykładową aplikację, używając interfejsu Material Design 3.
.

Zależność

Aby zacząć korzystać z Material 3 w aplikacji Compose, dodaj interfejs Compose Material 3 zależność od plików build.gradle:

implementation "androidx.compose.material3:material3:$material3_version"

Po dodaniu zależności możesz zacząć dodawać systemy Material Design w tym kolory, typografię i kształt.

Eksperymentalne interfejsy API

Niektóre interfejsy API M3 są uznawane za eksperymentalne. W takich przypadkach należy wyrazić zgodę na poziom funkcji lub pliku za pomocą adnotacji ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Motywy Material Design

Motyw M3 obejmuje te podsystemy: schemat kolorów, typografia i kształty. W przypadku dostosowywania zmiany te są automatycznie odzwierciedlane w komponentach M3, których używasz do tworzenia aplikacji.

Podsystemy stylu Material Design: kolor, typografia i kształty
Rysunek 2. Podsystemy Material Design: kolor, typografia i kształty
.

Jetpack Compose wdraża te koncepcje za pomocą pakietu M3 MaterialTheme funkcja kompozycyjna:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

Aby motywować treść aplikacji, określ schemat kolorów, typografię kształty dopasowane do Twojej aplikacji.

Schemat kolorów

Podstawą schematu kolorów jest zestaw 5 głównych kolorów. Każda z tych opcji kolory nawiązują do palety 13 tonów, które są używane w Material 3 Na przykład to jest schemat kolorów dla jasnego motywu na Odpowiedz:

Jasny schemat kolorów aplikacji Odpowiedz
Rysunek 3. Jasny schemat kolorów aplikacji Odpowiedz
.

Dowiedz się więcej o schematach kolorów i rolach kolorów.

Generuj schematy kolorów

Chociaż możesz ręcznie utworzyć niestandardowy ColorScheme, często łatwiej jest wygenerować go na podstawie kolorów źródłowych. Motyw Material Design Kreatora pozwala to zrobić i opcjonalnie eksportować Utwórz kod motywów. Wygenerowane zostaną te pliki:

  • Pole Color.kt zawiera kolory motywu ze wszystkimi zdefiniowanymi rolami z jasnego i ciemnego motywu.

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt zawiera konfigurację jasnych i ciemnych schematów kolorów, a aplikacja motyw.

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

Aby obsługiwać jasne i ciemne motywy, użyj funkcji isSystemInDarkTheme(). Na podstawie w ustawieniach systemu wybierz schemat kolorów: jasny czy ciemny.

Dynamiczne schematy kolorów

Dynamiczny kolor to kluczowy element Material You, w którym algorytm pobiera niestandardowe kolory z tapety użytkownika i stosowane do aplikacji i UI systemu. Ta paleta kolorów jest używana jako punkt początkowy do generowania jasnych i ciemnych schematów kolorów.

Odpowiedz na dynamiczny motyw aplikacji z tapety (po lewej) i domyślny motyw aplikacji (po prawej)
Rysunek 4. Odpowiedz na dynamiczny motyw aplikacji z tapety (po lewej) i domyślny motyw aplikacji (po prawej)
.

Dynamiczne kolory są dostępne na Androidzie 12 i nowszych. Jeśli kolor dynamiczny to możesz skonfigurować dynamiczny element ColorScheme. Jeśli nie, użyj opcji zapasowej na niestandardowy jasny lub ciemny kolor ColorScheme.

ColorScheme udostępnia funkcje kreatora do tworzenia dynamicznego light lub ciemny schemat kolorów:

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

Użycie kolorów

Dostęp do kolorów motywu Material Design w aplikacji możesz uzyskać za pomocą MaterialTheme.colorScheme:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

Każdej roli koloru można użyć w różnych miejscach w zależności od stan, widoczność i uwydatnienie.

  • Główny to kolor podstawowy używany w przypadku głównych komponentów, takich jak wyróżnienia. przyciski, stany aktywne i odcień podniesionych powierzchni.
  • Dodatkowy kolor klucza jest używany w przypadku mniej widocznych komponentów w interfejsie, takich jak jako ikony filtra i zwiększa możliwości ekspresji koloru.
  • Kolor trzeciorzędny służy do określenia ról kontrastujących akcentów, można wykorzystać, aby zrównoważyć kolor podstawowy i drugorzędny lub zwiększyć na jakiś element.

Projekt przykładowej aplikacji Odpowiedz używa koloru w kontenerze głównym podstawowy-kontener, aby podkreślić wybrany element.

Główny kontener i pola tekstowe z kolorem w kontenerze głównym.
Rysunek 5. Główny kontener i pola tekstowe mają kolor w kontenerze głównym.

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

W panelu nawigacji odpowiedzi możesz zobaczyć, w kontrastu, aby zapewnić wyróżnienie i akcent;

Kombinacja kontenera trzeciorzędnego i kontenera trzeciorzędnego dla przycisku pływającego działania.
Rysunek 6. Kombinacja kontenera trzeciorzędnego i kontenera trzeciorzędnego dla przycisku pływającego działania.

Typografia

Material Design 3 określa skalę typów, w tym style tekstu. które zostały zaadaptowane z interfejsu Material Design 2. Nazwy i grupowanie zostały uproszczony: display, nagłówek, tytuł, treść i etykieta i małych rozmiarów.

Domyślna skala typograficzna dla Material Design 3
Rysunek 7. Domyślna skala typograficzna dla Material Design 3
.
M3, Domyślny rozmiar czcionki/wysokość wiersza
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

Definiowanie typografii

Narzędzie Compose udostępnia klasę M3 Typography wraz z istniejącą TextStyle i klasy związane z czcionkami – do modelowania typu Material 3. skalę. Konstruktor Typography oferuje domyślne wartości dla każdego stylu, więc możesz je pominąć parametry, których nie chcesz dostosowywać:

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

Treść duża, średnia treść i średnia etykieta do różnych zastosowań typograficznych.
Rysunek 8. Treść – duża, średnia treść i średnia etykieta – do różnych zastosowań typograficznych.

Twój produkt prawdopodobnie nie będzie potrzebować wszystkich 15 domyślnych stylów z Material Design skalą typów. W tym przykładzie pokazujemy 5 rozmiarów dla ograniczonego zestawu, pozostałe wartości są pomijane.

Możesz dostosować typografię, zmieniając wartości domyślne TextStyle i właściwości związane z czcionkami, np. fontFamily i letterSpacing.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

Gdy określisz właściwość Typography, przekaż ją do MaterialTheme M3:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

Używanie stylów tekstu

Możesz pobrać typografię udostępnioną w funkcji kompozycyjnej M3 MaterialTheme przez przy użyciu MaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

Więcej informacji o wytycznych dotyczących materiałów znajdziesz tutaj typografii.

Kształty

Powierzchnie materiałowe mogą być wyświetlane w różnych kształtach. Kształty kierują uwagę, identyfikować komponenty, informować o stanie i wyrazić markę.

Skala kształtu określa styl narożników kontenera, oferując od kwadratu do pełnego zaokrąglenia.

Zdefiniuj kształty

Funkcja Compose udostępnia klasę M3 Shapes z rozwiniętymi parametrami pozwalającymi nowe kształty M3. Skala kształtu M3 przypomina skalę typu, co daje możliwość ekspresji różnych kształtów w całym interfejsie.

Istnieją różne rozmiary kształtów:

  • Bardzo mały
  • Mały
  • Średni
  • Duży
  • Bardzo duży

Domyślnie każdy kształt ma wartość domyślną, ale możesz to zmienić:

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

Zdefiniowany Shapes możesz przekazać do narzędzia MaterialTheme M3:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

Używanie kształtów

Możesz dostosować skalę kształtów dla wszystkich komponentów w komponentach MaterialTheme lub możesz to zrobić dla poszczególnych komponentów.

Zastosuj średnie i duże kształty z wartościami domyślnymi:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Średni kształt dla karty i duży kształt w przypadku pływającego przycisku polecenia w przykładowej aplikacji Odpowiedz.
Rysunek 9. Średni kształt dla karty i duży kształt w przypadku pływającego przycisku polecenia w przykładowej aplikacji Odpowiedz
.

Istnieją też 2 inne kształty – RectangleShape i CircleShape – które są częścią z kompozycji. Prostokąt nie ma promienia, a okrąg jest pełny zaokrąglone krawędzie:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

Poniższe przykłady pokazują niektóre komponenty z domyślnymi wartościami kształtu zastosowano do nich:

Domyślne wartości kształtów dla wszystkich komponentów Material 3.
Rysunek 10. Domyślne wartości kształtów dla wszystkich komponentów Material 3.

Więcej informacji o wytycznych dotyczących materiałów znajdziesz tutaj kształt.

Wyróżnienie

Nacisk w M3 jest oparty na różnych odmianach koloru i ich kolorze kombinacji. W wersji M3 istnieją 2 sposoby na wyróżnienie interfejsu użytkownika:

  • Stosując powierzchnię, wariant powierzchni i tło kolorów na powierzchni powierzchni z rozszerzonego systemu kolorów M3. Przykład: z warstwą powierzchni i umożliwia im inny poziom eksponowania.
.
Użycie neutralnych kombinacji kolorów w celu wzmocnienia przekazu.
Rysunek 11. Użycie neutralnych kombinacji kolorów, aby wzmocnić przekaz.
  • używanie różnych grubości czcionki w tekście. Powyżej pokazano, że można określić, niestandardowe wagi do skali typu, aby zapewnić zróżnicowanie emisyjności.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

Wysokość

Materiał 3 reprezentuje wysokość głównie za pomocą nakładek w tonach. To jest nowy sposobu odróżniania od siebie kontenerów i powierzchni – wysokość tonacji jest bardziej zauważalna – oprócz cieni.

Wysokość tonalna z uniesieniem cienia
Rysunek 12. Wysokość tonalna z uniesieniem cieniaE
.

Nakładki wysokości w ciemnych motywach zmieniły się też na Materiał 3. Kolor nakładki pochodzi z głównego boksu koloru.

Poziom cieni w porównaniu do tonacji w Material Design 3
Rysunek 13. Poziom cieni w porównaniu do tonacji w Material Design 3
.

Powierzchnia M3 – czyli kompozytowa baza za większością komponentów M3 – obejmuje obsługę uwydatniania tonalnego i cienia:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Składniki materiałowe

Material Design ma szeroki zestaw komponentów Material Design (takich jak przyciski, elementy, karty, pasek nawigacyjny), które są już zgodne z Materiałem Tworzenie pięknych aplikacji w stylu Material Design i motywowanie do tworzenia motywów. Możesz zacząć korzystać z komponentów z właściwościami domyślnymi.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3 udostępnia wiele wersji tych samych komponentów do wykorzystania w różnych rolach według znaczenia i uwagi.

Wyróżnienie przycisku od przycisku typu FAB, od przycisku podstawowego do przycisku tekstowego
Rysunek 14. Wyróżnienie przycisku z przycisku PPP, od przycisku podstawowego do przycisku tekstu
.
  • Rozszerzony pływający przycisk polecenia zapewniający najwyższy stopień podkreślenia:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • Wypełniony przycisk zachęcający do działania:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • Przycisk tekstowy do działania z niewielkim naciskiem:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

Więcej informacji o przyciskach Material Design i innych komponentach znajdziesz w tym artykule. Material 3 oferuje szeroką gamę pakietów komponentów, takich jak przyciski, aplikacje pasków, komponentów nawigacyjnych zaprojektowanych specjalnie do etui i rozmiary ekranów.

Udostępnia też kilka komponentów nawigacyjnych, które pomogą Ci zaimplementować nawigacji w zależności od rozmiaru i stanu ekranu.

NavigationBar jest używany w przypadku urządzeń kompaktowych, które chcesz kierować na maksymalnie 5 urządzeń miejsca docelowe:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail jest używany w przypadku małych i średnich tabletów oraz telefonów w w trybie poziomym. Zapewnia użytkownikom ergonomię i poprawia wrażenia użytkowników dla tych urządzeń.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

Prezentacja odpowiedzi z paskiem nawigacji u dołu(po lewej) i paskiem nawigacji(po prawej)
Rysunek 15. Prezentacja odpowiedzi na komentarze BottomNavigationBar (po lewej) i NavigationRail (po prawej)

Odpowiadaj, używając obu w domyślnych tematach, aby zapewnić wszystkim użytkownikom atrakcyjne wrażenia rozmiarów urządzeń.

NavigationDrawer działa na średnich i dużych tabletach, na których: jest dość miejsca, aby pokazać szczegóły. Możesz użyć zarówno PermanentNavigationDrawer, jak i ModalNavigationDrawer oraz NavigationRail.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

Prezentacja odpowiedzi w panelu stałej nawigacji
Rysunek 16. Prezentacja odpowiedzi w panelu nawigacji
.

Opcje nawigacji zwiększają wygodę użytkowników, ergonomię i dostępność. Więcej informacji o komponentach nawigacyjnych Material Design znajdziesz w Ćwiczenie z tworzenia adaptacyjnego programowania.

Dostosowywanie motywu komponentu

M3 zachęca do personalizacji i elastyczności. Wszystkie komponenty mają domyślne ale zastosowano elastyczne interfejsy API do dostosowania ich kolorów, jeśli

Większość komponentów, np. karty i przyciski, ma domyślny kolor ekspozycji obiektu. i interfejsy podniesienia uprawnień, które możesz modyfikować, by dostosować komponent:

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

Dowiedz się więcej o dostosowywaniu Material 3.

interfejs systemu

Część elementów Material You pochodzi z nowego stylu wizualnego oraz interfejsu Androida 12 lub nowszego. Dwa główne obszary zmian: fale, dalekie przewinięcie. Wdrożenie tych zmian nie wymaga żadnych dodatkowych działań.

Marszczenie

Echo używa teraz subtelnego iskierki, aby podświetlać powierzchnie po naciśnięciu. Funkcja Compose Material Ripple wykorzystuje platformę RippleDrawable W Androidzie 12 i nowsze wersje Material

Echo w M2 i M3
Rysunek 17. fale między M2 a M3
.

Przewijanie nadmiernie

Przewijanie dalekie od przewijania korzysta teraz z efektu rozciągnięcia na krawędzi przewijanych kontenerów. Rozciąganie dalekiego przewijania jest domyślnie włączone w elementach kompozycyjnych kontenera przewijania – dla na przykład LazyColumn, LazyRow i LazyVerticalGrid – w Compose Foundation w wersji 1.1.0 lub nowszej, niezależnie od poziomu interfejsu API.

Przewijaj ponad ekranem z użyciem efektu rozciągania na krawędzi kontenera
Rysunek 18. Przewijanie nadmiernie z użyciem efektu rozciągania na krawędzi kontenera
.

Ułatwienia dostępu

Standardy ułatwień dostępu wbudowane w komponenty Material mają to podstawa projektowania produktów promujących integrację społeczną. Poznanie ułatwienia dostępu mogą zwiększyć łatwość obsługi dla wszystkich użytkowników, również tych z widzenie, ślepota, niedosłuch, upośledzenie funkcji poznawczych, motoryka niepełnosprawność lub niepełnosprawność sytuacyjną (np. złamana ręka).

Ułatwienia dostępu w kolorach

Dynamiczne kolory zostały zaprojektowane tak, aby spełniać standardy ułatwień dostępu związane z kontrastem kolorów. System palet tonalnych ma kluczowe znaczenie dla zapewnienia dostępności każdego schematu kolorów domyślnie.

System kolorów Material Design pozwala określić standardowe wartości odcieni i pomiary, aby uzyskać dostępne współczynniki kontrastu.

Przykładowa aplikacja do odpowiedzi: podstawowe, dodatkowe i trzeciorzędne palety tonowe (od góry do dołu)
Rysunek 19. Przykładowa aplikacja do odpowiedzi: palety tona podstawowego, dodatkowego i trzeciorzędnego (od góry do dołu)
.

Wszystkie komponenty Material i dynamiczne motywy używają już powyższych ról kolorów z zestawu palet tonalnych wybranych z myślą o ułatwieniach dostępu . Jeśli jednak dostosowujesz komponenty, użyj parametru odpowiednie role w kolorze i uniknąć niezgodności.

Używaj w kontenerze podstawowym i nałożonym na kontener główny. główny-kontener oraz tak samo dla innych kolorów uzupełniających i neutralnych, które mają zapewnić i kontrast pod kątem wygody użytkownika.

Użycie kontenera trzeciorzędnego nad główną przestrzenią sprawia, że użytkownik nie przycisk kontrastu:

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

Wystarczający kontrast (po lewej) w porównaniu z niskim kontrastem (po prawej)
Rysunek 20. Wystarczający kontrast (po lewej) w porównaniu z niskim kontrastem (po prawej)
.

Dostępność typografii

Skala typu M3 aktualizuje rampę i wartości statycznego typu, aby ułatwić ale dynamiczną strukturę kategorii rozmiarów, które skalują się w zależności od urządzenia.

Na przykład w wersji M3 usłudze Display Small można przypisywać różne wartości w zależności od tego, w kontekście urządzenia, np. telefonu lub tabletu.

Duże ekrany

W materiałach znajdziesz wskazówki dotyczące adaptacyjnych układów i urządzeń składanych, dzięki którym Twoje aplikacje ułatwiają ergonomię użytkowników korzystających z dużych urządzeń.

W Material Design możesz korzystać z różnego rodzaju nawigacji, zapewniają lepsze wrażenia użytkownikom dużych urządzeń.

Zapoznaj się ze wskazówkami dotyczącymi jakości aplikacji na duży ekran na Androida oraz zapoznaj się z naszym przykładem odpowiedzi, aby uzyskać informacje o adaptacyjnym i łatwo dostępnym interfejsie.

Więcej informacji

Aby dowiedzieć się więcej o motywie Material Design w usłudze Compose, zapoznaj się z tymi artykułami zasoby:

Przykładowe aplikacje

Dokumenty

Dokumentacja API i kod źródłowy

Filmy

. .