Android Academy · Lekcja

Podglądy i Hot Reload

Szybko wprowadzaj zmiany dzięki podglądom Compose

Podglądy i Hot Reload 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.

Podgląd w czasie projektowania

Jedną z najlepszych funkcji Compose jest adnotacja @Preview: mogą Państwo wyświetlić composable w Android Studio bez uruchamiania aplikacji na urządzeniu ani emulatorze.

Adnotacja @Preview

Należy dodać @Preview nad funkcją @Composable. Android Studio wyświetli ją w panelu projektu.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

Podgląd nie przyjmuje parametrów

Funkcję podglądu trzeba wywoływać bez argumentów. Dlatego tworzy się opakowujący composable, który dostarcza przykładowe dane, a następnie wyświetla się jego podgląd.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Nazywanie funkcji podglądu

Zgodnie z konwencją opakowujące funkcje podglądu nazywa się nazwą composable z przyrostkiem Preview, na przykład GreetingPreview. Dzięki temu łatwo je znaleźć i wiadomo, że nie są używane w kodzie produkcyjnym.

Parametry podglądu

@Preview przyjmuje argumenty pozwalające dostosować sposób wyświetlania, takie jak showBackground, name i widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

Domyślnie podgląd ma przezroczyste tło. Należy przekazać showBackground = true, aby wyświetlić nieprzezroczystą powierzchnię, dzięki której tekst jest lepiej widoczny podczas projektowania.

Wiele podglądów

Na jednej funkcji można umieścić kilka adnotacji @Preview, aby wyświetlić obok siebie różne konfiguracje — na przykład podgląd o małej i dużej szerokości.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

Interaktywny podgląd

Android Studio udostępnia dla podglądów Interactive Mode. Pozwala on klikać przyciski i wywoływać zmiany stanu bezpośrednio w podglądzie, bez wdrażania aplikacji.

Live Edit / Hot Reload

Dzięki funkcji Live Edit zmiany w treści composable pojawiają się niemal natychmiast w podglądzie, a nawet na uruchomionym urządzeniu — bez konieczności pełnej kompilacji. Znacznie przyspiesza to proces projektowania.

Podglądy nic nie kosztują

Funkcje podglądu są usuwane z kompilacji wydaniowej, więc dodanie wielu podglądów nie ma żadnego kosztu w czasie działania aplikacji. Warto używać ich często do dokumentowania i wizualnego testowania każdego composable.

Pełny przykład

Oto composable wraz z jego podglądem. Należy otworzyć panel projektu, aby natychmiast zobaczyć wynik renderowania.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

Szybkie sprawdzenie

Dlaczego funkcja z adnotacją @Preview nie może przyjmować parametrów?

Podsumowanie

Podglądy przyspieszają tworzenie aplikacji w Compose:

Należy dodać @Preview nad composable bez argumentów.
Można używać opcji takich jak showBackground i widthDp.
Można umieszczać wiele podglądów oraz używać Interactive Mode i Live Edit, aby szybko iterować.

Często zadawane pytania

Czy lekcja „Podglądy i Hot Reload” jest bezpłatna?

Tak — pełny tekst „Podglądy i Hot Reload” 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 „Podglądy i Hot Reload”?

Szybko wprowadzaj zmiany dzięki podglądom Compose Ć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 „Podglądy i Hot Reload”?

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