Android Academy · Lekcja

Kolory i MaterialTheme

Zastosuje Pan/Pani spójne motywy.

Kolory i MaterialTheme to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Kolory w Compose

Compose reprezentuje kolory za pomocą klasy Color. Dostępne są gotowe wartości, takie jak Color.Red i Color.Blue.

Przekazujesz Color do parametrów, takich jak kolor tekstu Text lub tło.

Text(
    text = "Hi",
    color = Color.Blue
)

Niestandardowe wartości kolorów

Utwórz dowolny kolor z kodu szesnastkowego za pomocą Color(0xFFRRGGBB). Pierwsze dwie cyfry, FF, oznaczają pełną nieprzezroczystość.

Na przykład 0xFF6200EE to kolor fioletowy.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Kolor tła

Użyj modyfikatora background, aby narysować tło za composable. Dodaj padding, aby zawartość nie dotykała krawędzi.

Kolejność ma znaczenie: background, a następnie padding, wypełnia tłem obszar paddingu.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Czym jest MaterialTheme?

MaterialTheme to system, który przechowuje w jednym miejscu kolory, czcionki i kształty aplikacji.

Composable odczytują z niego te wartości, dzięki czemu cała aplikacja pozostaje spójna i łatwa do modyfikowania.

MaterialTheme {
    Text("Themed app")
}

Schemat kolorów motywu

colorScheme motywu udostępnia nazwane role, takie jak primary, secondary i background.

Odczytywanie tych wartości zamiast używania stałych kolorów pozwala zmienić wygląd w jednym miejscu.

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

Primary i onPrimary

Każdy główny kolor ma odpowiadający mu kolor on przeznaczony dla tekstu wyświetlanego na jego tle, na przykład onPrimary.

Użycie primary jako tła i onPrimary jako koloru tekstu gwarantuje czytelny kontrast.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Typografia motywu

MaterialTheme przechowuje także style tekstu w typography, na przykład titleLarge i bodyMedium.

Przekaż jeden z nich do parametru style komponentu Text, aby zachować spójny i odpowiednio dopasowany tekst.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Jasne i ciemne schematy

Możesz utworzyć schemat za pomocą lightColorScheme() lub darkColorScheme() i przekazać go do MaterialTheme.

Przełączanie schematów pozwala aplikacji obsługiwać zarówno jasny, jak i ciemny tryb.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Dostosowywanie schematu

Nadpisuj role, podając ich nazwy podczas tworzenia schematu. W tym przykładzie primary staje się niestandardowym kolorem morskim.

Wszystko, co odczytuje colorScheme.primary, zostanie automatycznie zaktualizowane.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Dlaczego warto używać motywu?

Zakodowanie kolorów na stałe w wielu miejscach utrudnia przeprojektowanie aplikacji. Odczytywanie ich z MaterialTheme sprawia, że jedna zmiana aktualizuje całą aplikację.

Pomaga to także w zapewnieniu dostępności, ponieważ kolory on utrzymują dobry kontrast.

Surface i Background

Composable Surface stosuje za treścią kolor tła motywu i podniesienie.

To prosty sposób na nadanie karcie lub ekranowi właściwego koloru bazowego.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Szybkie sprawdzenie

Sprawdź swoją wiedzę o kolorach i motywach.

Podsumowanie

Dowiedziałeś się, jak używać klasy Color, niestandardowych kolorów w zapisie szesnastkowym i modyfikatora background. MaterialTheme grupuje colorScheme, typography i shapes.

Odczytywanie ról takich jak primary i onPrimary pomaga zachować kontrast i spójność oraz obsługiwać jasne i ciemne schematy.

Świetna praca — ukończyłeś kurs stylizacji!

Często zadawane pytania

Czy lekcja „Kolory i MaterialTheme” jest bezpłatna?

Tak — pełny tekst „Kolory i MaterialTheme” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kolory i MaterialTheme”?

Zastosuje Pan/Pani spójne motywy. Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Kolory i MaterialTheme”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy