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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-sampleapp.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-theming.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-light.png?authuser=19&hl=pl)
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)](https://developer.android.google.cn/static/develop/ui/compose/images/m3-dynamic.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-container.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-navdrawer.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-typography.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-body.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-shape.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-shape2.png?authuser=19&hl=pl)
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.](https://developer.android.google.cn/static/develop/ui/compose/images/m3-emphasis.png?authuser=19&hl=pl)
- 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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-elevation.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-surface.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-emphasis2.png?authuser=19&hl=pl)
- 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.
Komponenty nawigacyjne
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)](https://developer.android.google.cn/static/develop/ui/compose/images/m3-showcasebottom.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-showcasedrawer.png?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-ripple.gif?authuser=19&hl=pl)
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](https://developer.android.google.cn/static/develop/ui/compose/images/m3-overscroll.gif?authuser=19&hl=pl)
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)](https://developer.android.google.cn/static/develop/ui/compose/images/m3-colorpallets.png?authuser=19&hl=pl)
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)](https://developer.android.google.cn/static/develop/ui/compose/images/m3-contrast.png?authuser=19&hl=pl)
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
.Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Migracja z Material 2 do Material 3 w usłudze Compose
- Material Design 2 w Compose
- Niestandardowe systemy projektowania w Compose