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.
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.
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:
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.ktzawiera 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.ktzawiera 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.
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.
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;
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.
| 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
),
// ..
)
// ..
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 */
}
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:
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ż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.
Nakładki wysokości w ciemnych motywach zmieniły się też na Materiał 3. Kolor nakładki pochodzi z głównego boksu koloru.
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.
- 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 = { }
)
}
}
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 = { }
)
}
}) {
}
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
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.
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.
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
)
) {
}
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