Material Design 3 w sekcji Utwórz

Jetpack Compose oferuje implementację Material Design 3, czyli kolejnej wersji tego języka projektowania. 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 pokazujemy implementację Material Design 3 na przykładzie próbnej aplikacji Reply. Przykład odpowiedzi jest w pełni 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ć do aplikacji systemy Material Design, w tym kolory, typografię i kształty.

Eksperymentalne interfejsy API

Niektóre interfejsy API M3 są uznawane za eksperymentalne. W takich przypadkach musisz wyrazić zgodę na poziomie funkcji lub pliku, używając adnotacji ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

Motywy Material Design

Motyw M3 obejmuje te podsystemy: schemat kolorów, typografia i kształty. Gdy dostosujesz te wartości, zmiany zostaną automatycznie uwzględnione w komponentach M3, których używasz do tworzenia aplikacji.

Jetpack Compose wdraża te koncepcje za pomocą komponentu M3 MaterialTheme:

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

Aby stworzyć motyw dla treści aplikacji, określ schemat kolorów, typografię i kształty odpowiednie dla Twojej aplikacji.

Schemat kolorów

Podstawą schematu kolorów jest zestaw 5 kluczowych kolorów. Każdy z tych kolorów odnosi się do palety 13 tonów, które są używane przez komponenty Material 3. Oto na przykład schemat kolorów dla jasnego motywu w przypadku elementu Odpowiedź:

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

Generuj schematy kolorów

Możesz utworzyć niestandardowy ColorScheme ręcznie, ale często łatwiej jest wygenerować go, używając kolorów źródłowych Twojej marki. Umożliwia to narzędzie Material Theme Builder, które pozwala też opcjonalnie wyeksportować kod stylizacji Compose. Wygenerowane zostaną te pliki:

• Color.kt zawiera kolory motywu ze wszystkimi zdefiniowanymi rolami w przypadku zarówno jasnego, jak 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)
// ..
// ..
Material3Snippets.kt

• 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
    )
}
Material3Snippets.kt

Aby obsługiwać jasne i ciemne motywy, użyj funkcji isSystemInDarkTheme(). Na podstawie ustawień systemu określ, czy schemat kolorów ma być jasny, czy ciemny.

Dynamiczne schematy kolorów

Kolor dynamiczny to kluczowy element Material You. Algorytm wyprowadza z tapety użytkownika kolory niestandardowe, które są stosowane w aplikacjach i interfejsie systemu. Ta paleta kolorów jest używana jako punkt początkowy do generowania jasnych i ciemnych schematów kolorów.

Dynamiczna kolorystyka jest dostępna w Androidzie 12 i nowszych. Jeśli kolor dynamiczny to możesz skonfigurować dynamiczny element ColorScheme. Jeśli nie, użyj niestandardowego motywu jasnego lub ciemnego 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
}
Material3Snippets.kt

Używanie kolorów

Kolory motywu Material możesz uzyskać w aplikacji za pomocą:MaterialTheme.colorScheme

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

Każda rola koloru może być używana w różnych miejscach w zależności od stanu, znaczenia i podkreślenia komponentu.

• 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.
• Trzeci kluczowy kolor służy do określania roli kontrastujących akcentów, które można wykorzystać do zrównoważenia kolorów podstawowych i dodatkowych lub do zwrócenia uwagi na element.

W przykładzie interfejsu aplikacji Reply kolor kontenera głównego jest używany na wierzchu kontenera głównego, 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,
    )
}
Material3Snippets.kt

W schowku nawigacji odpowiedzi możesz zobaczyć, jak kolory kontenera drugiego i trzeciego rzędu są używane w kontrascie, aby nadać im znaczenie i wyrazistość.

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.

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 wartości domyślne dla każdego stylu, dzięki czemu możesz 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
    ),
    // ..
)
// ..
Material3Snippets.kt

Twój produkt prawdopodobnie nie będzie potrzebował wszystkich 15 domyślnych stylów z gamy typów z Material Design. 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
),
Material3Snippets.kt

Po zdefiniowaniu Typography prześlij go do M3 MaterialTheme:

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

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
)
Material3Snippets.kt

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

Kształty

Powierzchnie materiałów mogą mieć różne kształty. 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łtów M3 jest bardziej podobna do skali typu, co umożliwia stosowanie różnych kształtów w interfejsie.

Kształty są dostępne w różnych rozmiarach:

• 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)
)
Material3Snippets.kt

Po zdefiniowaniu Shapes możesz je przekazać do M3 MaterialTheme:

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

Używanie kształtów

Możesz dostosować skalę kształtu dla wszystkich komponentów w MaterialTheme lub dla poszczególnych komponentów.

Zastosuj średni lub duży kształt z wartościami domyślnymi:

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

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

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

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

W M3 nacisk jest zaznaczany za pomocą odmian koloru i ich 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 do tekstu. Jak już wiesz, możesz dodać niestandardowe wagi do naszej skali typów, aby nadać im różny nacisk.

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

Wysokość

Materiał 3 reprezentuje wysokość głównie za pomocą nakładek w tonach kolorów. 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 w M3 – komponent do komponowania, który jest podstawą większości komponentów M3 – obsługuje zarówno podświetlenie tonalne, jak i cienie:

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

Komponenty materiału

Material Design zawiera bogaty zestaw komponentów Material (takich jak przyciski, elementy, karty czy pasek nawigacyjny), które są już zgodne z skaliowaniem Material Design i pomagają tworzyć piękne aplikacje w tym stylu. Możesz zacząć korzystać z komponentów z właściwościami domyślnymi.

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

M3 udostępnia wiele wersji tych samych komponentów do stosowania w różnych rolach w zależności od natężenia i uwzględniania.

• Rozszerzony pływający przycisk polecenia dla działania o najwyższym stopniu 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),
    )
}
Material3Snippets.kt

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

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

• Przycisk tekstowy z działaniem o mniejszym znaczeniu:

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

Więcej informacji o przyciskach Materiał i innych komponentach znajdziesz w tym artykule. Material 3 oferuje szeroki wybór zestawów komponentów, takich jak przyciski, paski aplikacji czy komponenty nawigacyjne, które są specjalnie zaprojektowane na potrzeby różnych zastosowań i rozmiarów ekranu.

Elementy nawigacyjne

Materiał zawiera też kilka komponentów nawigacji, które ułatwiają implementację nawigacji w zależności od różnych rozmiarów i stanów ekranu.

Atrybut NavigationBar jest używany w przypadku urządzeń kompaktowych, gdy chcesz kierować reklamy na 5 lub mniej miejsc docelowych:

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

NavigationRail jest używany w przypadku małych i średnich tabletów oraz telefonów w orientacji poziomej. 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 = { }
        )
    }
}
Material3Snippets.kt

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

NavigationDrawer jest używany na tabletach o średniej i dużej wielkości, na których jest wystarczająco dużo miejsca na wyświetlanie szczegółów. 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 = { }
        )
    }
}) {
}
Material3Snippets.kt

Opcje nawigacji zwiększają wygodę użytkowników, ergonomię i dostępność. Więcej informacji o komponentach nawigacji w Material Design znajdziesz w kodlabie tworzenia aplikacji dostosowujących się do ekranu.

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
}
Material3Snippets.kt

Więcej informacji o dostosowywaniu Material 3.

interfejs systemu

Niektóre aspekty Material You pochodzą z nowego stylu wizualnego i interfejsu systemu w Androidzie 12 i nowszych. Dwie kluczowe zmiany dotyczą efektu falowania i przewijania ponad ekran. 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. Kompozycja Material Ripple korzysta z platformy RippleDrawable na Androidzie, więc efekt błysku jest dostępny na Androidzie 12 i nowszych we wszystkich komponentach Material Design.

Overscroll

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 składniki Material Design mają stanowić podstawę projektowania produktów z uwzględnieniem wszystkich użytkowników. Poznanie dostępności produktu może zwiększyć jego użyteczność dla wszystkich użytkowników, w tym osób niedowidzących, niewidomych, niedosłyszących, z zaburzeniami poznawczymi, z zaburzeniami ruchowymi lub z niepełnosprawnością zależną od sytuacji (np. ze złamaną ręką).

Dostępność kolorów

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 udostępnia standardowe wartości i pomiar tonów, które można wykorzystać do spełnienia wymagań dotyczących kontrastu w dostępności.

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
    )
) {
}
Material3Snippets.kt

Ułatwienia dostępu dotyczące 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

Material Design zawiera wskazówki dotyczące układów dostosowujących się do urządzenia i urządzeń składanych, które ułatwiają dostęp do aplikacji i zwiększają ergonomię dla użytkowników trzymających duże urządzenia.

Material udostępnia różne rodzaje nawigacji, aby ułatwić użytkownikom korzystanie z dużej aplikacji.

Więcej informacji o wytycznych dotyczących jakości aplikacji na duże ekrany znajdziesz w przykładowej odpowiedzi z uwzględnieniem dostępności i elastycznego projektu.

Więcej informacji

Więcej informacji o stylach Material Design w Compose znajdziesz w tych zasobach:

Przykładowe aplikacje

• Przykładowa aplikacja Reply M3

Dokumenty

• Migracja z Material 2 do Material 3 w usłudze Compose
• Wytyczne dotyczące interfejsu Material Design

Dokumentacja API i kod źródłowy

• Dokumentacja interfejsu API Compose Material 3
• Tworzenie przykładów Material 3 w kodzie źródłowym

Filmy

• Material You w Jetpack Compose