Android Academy · Lekcja

Podstawy Text i Column

Wyświetli i ułoży Pan/Pani treści.

Podstawy Text i Column to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 2 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.

Funkcja composable Text

Najprostszą rzeczą, którą możesz wyświetlić w Compose, jest tekst. Funkcja composable Text rysuje ciąg znaków na ekranie.

Przekazujesz tekst, który chcesz wyświetlić, jako pierwszy argument. To wszystko, czego potrzeba, aby umieścić słowa na ekranie.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Stylizowanie tekstu

Funkcja Text przyjmuje parametry zmieniające jej wygląd. Możesz ustawić fontSize, color i fontWeight.

Rozmiary używają jednostki sp, która skaluje się zgodnie z ustawieniami czcionki użytkownika. Dzięki temu aplikacja pozostaje czytelna dla wszystkich.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Dlaczego potrzebujesz układu

Jeśli wywołasz Text dwa razy z rzędu, oba fragmenty tekstu trafią w to samo miejsce i nałożą się na siebie. Funkcje composable nie rozmieszczają się automatycznie.

Aby umieścić elementy w odpowiedniej kolejności, potrzebujesz funkcji composable układu, która uporządkuje elementy podrzędne. Najczęściej używaną funkcją do układania w pionie jest Column.

Funkcja composable Column

Column układa elementy podrzędne pionowo, jeden pod drugim. Umieszczasz podrzędne funkcje composable w końcowym bloku lambda.

Każda funkcja composable zapisana w nawiasach klamrowych staje się wierszem tego pionowego stosu, w kolejności, w której ją zapiszesz.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Kolejność ma znaczenie w Column

Wewnątrz Column elementy podrzędne pojawiają się od góry do dołu dokładnie w takiej kolejności, w jakiej je wymienisz. Przenieś wiersz wyżej w kodzie, a przesunie się wyżej na ekranie.

Dzięki temu układy są przewidywalne: czytając kod od góry do dołu, wiesz, jak ekran wygląda od góry do dołu.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Rozmieszczanie w pionie

Column może kontrolować odstępy między elementami podrzędnymi za pomocą verticalArrangement. Na przykład Arrangement.spacedBy dodaje równe odstępy.

To rozwiązanie jest czytelniejsze niż ręczne dodawanie odstępów do każdego elementu i pozwala zachować spójność układu.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Wyrównanie w poziomie

Domyślnie Column wyrównuje elementy podrzędne do początku, czyli do lewej strony. Użyj horizontalAlignment, aby wyrównać je do środka lub do końca.

Ustaw Alignment.CenterHorizontally, a każdy element zostanie wyśrodkowany w obrębie szerokości kolumny.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Poznajemy Row

Column układa elementy pionowo, a jego element siostrzany Row rozmieszcza elementy obok siebie, poziomo. Oba działają na tej samej zasadzie, ale w różnych kierunkach.

Będą Państwo łączyć elementy Row i Column, aby tworzyć siatki i karty. Na razie warto zapamiętać: Column układa w dół, a Row — w poprzek.

Row {
    Text("Left")
    Text("Right")
}

Zagnieżdżanie układów

Układy mogą zawierać inne układy. Można umieścić Row wewnątrz Column, aby tworzyć bardziej rozbudowane projekty.

W tym przykładzie kolumna wyświetla tytuł, a następnie wiersz z dwoma fragmentami tekstu poniżej. Zagnieżdżanie pozwala budować złożone ekrany z prostych elementów.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Dodawanie odstępu między elementami

Aby dodać stały odstęp między dwoma composable, można wstawić element Spacer. To pusty composable, który po prostu zajmuje miejsce.

Wystarczy nadać mu wysokość za pomocą modyfikatora, a przesunie on kolejny element w dół. Więcej o modyfikatorach dowiedzą się Państwo w następnej lekcji.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Łączenie elementów

Za pomocą Text i Column można już zbudować prosty ekran z etykietami. Wystarczy ułożyć nagłówek i kilka wierszy szczegółów.

Ten niewielki schemat stanowi podstawę niemal każdego ekranu Compose, który będą Państwo tworzyć.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Szybkie sprawdzenie

Sprawdźmy Państwa rozumienie kierunku układu.

Podsumowanie

Nauczyli się Państwo wyświetlać napisy za pomocą Text i stylizować je przy użyciu fontSize oraz fontWeight. Element Column układa elementy podrzędne pionowo, w kolejności zapisanej w kodzie, natomiast Row rozmieszcza je poziomo.

Odstępy można kontrolować za pomocą verticalArrangement lub elementu Spacer, a elementy podrzędne wyrównywać przy użyciu horizontalAlignment. Zagnieżdżanie Row i Column pozwala tworzyć bardziej rozbudowane układy. W następnej części zobaczą Państwo podgląd tych ekranów bez uruchamiania aplikacji.

Często zadawane pytania

Czy lekcja „Podstawy Text i Column” jest bezpłatna?

Tak — pełny tekst „Podstawy Text i Column” 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 „Podstawy Text i Column”?

Wyświetli i ułoży Pan/Pani treści. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Podstawy Text i Column”?

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