Android Academy · Lekcja

Budowanie karty profilu

Połączy Pan/Pani composable w jeden ekran.

Lekcja 4 z 413 kroki

Budowanie karty profilu 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.

Nasz cel

Czas połączyć zdobytą wiedzę. Zbudujemy prostą kartę profilu: imię i stanowisko ułożone w uporządkowany sposób w stylizowanym polu.

Po drodze poznają Państwo element Modifier, który kontroluje rozmiar, odstępy i wygląd composable.

Poznajemy Modifier

Element Modifier zmienia wygląd i działanie composable. Przekazuje się go za pomocą parametru modifier, który przyjmuje większość composable.

Modyfikatory obsługują marginesy wewnętrzne, rozmiar, kolor tła, obramowanie i wiele więcej. W Compose są głównym sposobem ozdabiania interfejsu.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Łączenie modyfikatorów

Modyfikator tworzy się przez łączenie wywołań za pomocą kropek. Każde wywołanie zwraca nowy modyfikator, więc można połączyć kilka modyfikatorów.

Kolejność ma znaczenie: padding przed background daje inny efekt niż padding po background. Łańcuch należy czytać od lewej do prawej, jak przepis.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Wypełnianie szerokości

Modyfikator fillMaxWidth rozciąga composable na całą dostępną przestrzeń poziomą. Doskonale sprawdza się w przypadku kart, które mają zajmować całą szerokość ekranu.

Dostępny jest także fillMaxSize, działający w obu kierunkach, oraz size, który ustawia stałą szerokość i wysokość.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Dodawanie marginesu wewnętrznego

Margines wewnętrzny dodaje przestrzeń wewnątrz composable, między jego krawędzią a treścią. Należy użyć Modifier.padding z wartością dp.

Margines wewnętrzny zapobiega dotykaniu krawędzi karty przez tekst, dzięki czemu układ wygląda wygodnie i przejrzyście.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Dodawanie tła do karty

Kolor tła pomaga wyróżnić kartę. Należy zastosować modyfikator background i przekazać wartość koloru.

Warto połączyć go z padding, aby kolorowy obszar miał wokół tekstu odpowiednio dużo miejsca.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Układanie imienia i stanowiska

Wewnątrz elementu Column karty układamy dwa fragmenty tekstu: pogrubione imię u góry i lżejsze stanowisko poniżej.

Ustawienie różnych wartości fontSize i fontWeight tworzy między nimi wyraźną hierarchię wizualną.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Tworzenie elementu wielokrotnego użytku

Zamieńmy kartę w composable wielokrotnego użytku, który przyjmuje parametry name i title. Dzięki temu może wyświetlać dowolną osobę.

To ta sama idea co w pierwszej lekcji: przekazujemy dane i wielokrotnie wykorzystujemy interfejs.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

Pełna karta profilu

Oto karta ze wszystkimi elementami: kolumną zajmującą całą szerokość, szarym tłem, paddingiem i dwoma stylizowanymi wierszami tekstu.

Proszę zauważyć, jak łańcuch modyfikatorów i elementy podrzędne kolumny łączą wszystko z poprzednich lekcji w jeden uporządkowany composable.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

Podgląd karty

Dodaj opakowanie @Preview, aby zobaczyć kartę w Android Studio. Wywołuje ono ProfileCard z przykładowymi danymi i wyświetla tło.

Teraz można zmieniać padding lub kolory i obserwować natychmiastową aktualizację wyniku.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Wyświetlanie na ekranie

Aby wyświetlić kartę w uruchomionej aplikacji, należy wywołać ją wewnątrz setContent w aktywności. W ten sposób composable zostaje podłączony do działającego ekranu.

Od pojedynczego composable doszli już Państwo do kompletnego komponentu interfejsu wielokrotnego użytku.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Szybkie sprawdzenie

Powtórzmy, jak composable otrzymują padding, rozmiar i tło.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Zbudowali Państwo kompletną kartę profilu, łącząc Text, Column i Modifier. Modyfikatory pozwalają łączyć padding, fillMaxWidth i background, aby kształtować i stylizować interfejs.

Karta jest wielokrotnego użytku dzięki parametrom name i title, można ją wyświetlać w podglądzie za pomocą @Preview i prezentować przez setContent. To kompletny ekran composable od początku do końca. Gratulacje!

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 36
Lekcje: 152

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Budowanie karty profilu” jest bezpłatna?

Tak — pełny tekst „Budowanie karty profilu” 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 „Budowanie karty profilu”?

Połączy Pan/Pani composable w jeden ekran. Ć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 „Budowanie karty profilu”?

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