Android Academy · Lekcja

Podgląd interfejsu

Użyje Pan/Pani @Preview, aby szybko iterować.

Podgląd interfejsu to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 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.

Dlaczego podglądy są pomocne

Budowanie i uruchamianie aplikacji na urządzeniu zajmuje czas. Compose oferuje szybszy sposób oglądania interfejsu: podgląd.

Podgląd renderuje composable bezpośrednio w Android Studio, dzięki czemu można sprawdzić układ bez uruchamiania całej aplikacji na emulatorze lub telefonie.

Adnotacja @Preview

Aby wyświetlić podgląd composable, należy utworzyć osobną funkcję i oznaczyć ją adnotacją @Preview. Android Studio pokaże wtedy wyrenderowany wynik w panelu projektu.

Sama funkcja podglądu również jest composable, dlatego ma zarówno adnotację @Preview, jak i @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Podglądy nie przyjmują parametrów

Funkcja podglądu nie może przyjmować parametrów. Compose musi wywołać ją samodzielnie, więc nie może przekazać argumentów.

Dlatego tworzy się funkcję opakowującą: podgląd wywołuje właściwy composable i przekazuje mu przykładowe dane do wyświetlenia.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Nazywanie funkcji podglądu

Popularna konwencja polega na nazwaniu podglądu tak jak composable, który wyświetla, i dodaniu na końcu Preview. Dla Greeting będzie to GreetingPreview.

Dzięki temu od razu wiadomo, który podgląd należy do którego composable, szczególnie gdy plik się rozrasta.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Nadawanie podglądowi nazwy

Podgląd można opisać za pomocą parametru name. Ten tytuł pojawia się nad wyrenderowanym podglądem w Android Studio.

Pomocne nazwy ułatwiają szybkie rozróżnienie wielu podglądów.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Wyświetlanie tła

Domyślnie podgląd może być renderowany na przezroczystym tle. Ustawienie showBackground = true powoduje narysowanie jednolitej powierzchni za composable.

Dzięki temu znacznie łatwiej ocenić odstępy i kolory w panelu projektu.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Wiele podglądów jednocześnie

Do jednej funkcji można dodać kilka adnotacji @Preview albo napisać kilka funkcji podglądu. Każdy podgląd jest renderowany osobno.

Jest to przydatne podczas sprawdzania tego samego interfejsu z różnymi przykładowymi danymi, na przykład krótkim i długim imieniem.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Podgląd w różnych rozmiarach

Parametry widthDp i heightDp określają rozmiar obszaru podglądu. Pozwala to sprawdzić wygląd układu na małej lub dużej powierzchni.

Ustawienie rozmiaru podglądu pomaga wykryć nieprawidłowe zawijanie tekstu lub wystawanie treści poza obszar.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Podglądy trybu ciemnego

Za pomocą parametru uiMode ustawionego na tryb nocny można sprawdzić wygląd interfejsu w ciemnym motywie. Pozwala to wykryć kolory, które źle wyglądają na ciemnym tle.

Wczesne sprawdzenie podglądów jasnego i ciemnego motywu pozwala uniknąć późniejszych niespodzianek.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Podglądy interaktywne i na żywo

Android Studio może aktualizować podgląd podczas pisania, dzięki czemu zmiany pojawiają się niemal natychmiast. Dostępny jest także tryb interaktywny, który pozwala klikać elementy bez pełnego kompilowania aplikacji.

Podglądy nie zastępują uruchamiania aplikacji, ale znacznie przyspieszają projektowanie ekranów.

Podglądy służą tylko do debugowania

Funkcje podglądu są narzędziami programistycznymi. Nie wchodzą w skład opublikowanej aplikacji i nie są widoczne dla użytkowników.

Można więc swobodnie dodawać dowolną liczbę podglądów z przykładowymi danymi. Wpływają one tylko na to, co widać w IDE.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Szybkie sprawdzenie

Powtórzmy najważniejszą zasadę dotyczącą funkcji podglądu.

Podsumowanie

Nauczyli się Państwo, że @Preview renderuje composable wewnątrz Android Studio, bez potrzeby korzystania z urządzenia. Funkcje podglądu nie przyjmują parametrów, dlatego opakowują właściwy composable i przekazują mu przykładowe dane.

Przydatne opcje to między innymi name, showBackground, widthDp, heightDp oraz uiMode dla trybu ciemnego. Podglądy są narzędziami używanymi wyłącznie podczas debugowania. W następnej części połączą Państwo wszystkie elementy, aby zbudować prawdziwą kartę profilu.

Często zadawane pytania

Czy lekcja „Podgląd interfejsu” jest bezpłatna?

Tak — pełny tekst „Podgląd interfejsu” 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ąd interfejsu”?

Użyje Pan/Pani @Preview, aby szybko iterować. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Podgląd interfejsu”?

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