Android Academy · Lekcja

Układy i widoki

Proszę projektować interfejsy użytkownika za pomocą układów XML. Proszę używać ConstraintLayout, LinearLayout oraz typowych widoków, takich jak TextView, Button, ImageView i EditText.

Układy i widoki to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 z 7. 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 7 lekcji w sumie.

Tworzenie interfejsów użytkownika za pomocą XML

Interfejsy użytkownika systemu Android są definiowane w plikach układu XML przechowywanych w res/layout/. Układ opisuje strukturę i wygląd ekranu — określa, które widoki są wyświetlane i gdzie się znajdują.

Następnie kod Kotlin rozwija ten układ i podczas działania aplikacji współdziała z widokami.

Typowe typy widoków

Najczęściej używane widżety View:

TextView — wyświetla tekst
EditText — pole wprowadzania tekstu
Button — przycisk, który można kliknąć
ImageView — wyświetla obraz
CheckBox — przełącznik włączone/wyłączone
Switch — przełącznik włączone/wyłączone (Material)

ConstraintLayout

ConstraintLayout to zalecany układ dla większości ekranów. Umożliwia umieszczanie widoków względem siebie lub widoku nadrzędnego za pomocą ograniczeń — podobnie jak łączenie punktów zakotwiczenia.

Płaska hierarchia — nie trzeba zagnieżdżać układów
Elastyczny — obsługuje ekrany o dowolnym rozmiarze
Używany domyślnie w nowych projektach Android Studio

XML ConstraintLayout

TextView wyśrodkowany na ekranie w ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout rozmieszcza widoki w jednym wierszu lub jednej kolumnie:

android:orientation="vertical" — układa widoki od góry do dołu
android:orientation="horizontal" — układa widoki obok siebie
android:layout_weight — proporcjonalnie rozdziela pozostałe miejsce

Jest prosty i przewidywalny, ale należy unikać głębokiego zagnieżdżania.

Najważniejsze atrybuty układu

Każdy View ma następujące podstawowe atrybuty:

layout_width / layout_height: match_parent, wrap_content lub stała wartość w dp
id: służy do odwoływania się do widoku w Kotlinie
margin: odstęp na zewnątrz widoku
padding: odstęp wewnątrz widoku

Do określania rozmiarów używaj dp (pikseli niezależnych od gęstości), a do rozmiaru tekstu — sp.

ScrollView

Gdy zawartość jest wyższa niż ekran, umieść ją w ScrollView:

Może zawierać tylko jeden bezpośredni element podrzędny (zwykle LinearLayout)
Domyślnie umożliwia przewijanie w pionie
Do przewijania w poziomie użyj HorizontalScrollView

W przypadku długich, dynamicznych list użyj zamiast tego RecyclerView — jest wydajniejszy.

Znajdowanie widoków w kodzie

Widoki można uzyskiwać w kodzie Kotlin na dwa sposoby:

findViewById(R.id.tvTitle) — klasyczne rozwiązanie, zwraca widok na podstawie identyfikatora
ViewBinding — nowoczesne podejście: generuje klasę powiązania na podstawie kodu XML, zapewniając bezpieczny typowo dostęp do wszystkich widoków

Zdecydowanie zalecamy używanie ViewBinding — poznasz je w następnej lekcji.

Używanie findViewById

Uzyskuj dostęp do widoków i modyfikuj je w metodzie onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Szybkie sprawdzenie

Jakiej jednostki należy używać do określania rozmiaru tekstu w układach systemu Android?

Podsumowanie: układy i widoki

Potrafisz już projektować ekrany systemu Android:

Interfejsy użytkownika są definiowane w plikach układu XML w res/layout/
Typowe widoki: TextView, EditText, Button, ImageView
ConstraintLayout — elastyczny, płaski i zalecany
LinearLayout — prosty układ wiersza lub kolumny
Używaj dp do określania rozmiarów, a sp do tekstu
Uzyskuj dostęp do widoków w Kotlinie za pomocą findViewById

W następnej części sprawisz, że interfejs będzie interaktywny, obsługując dane wprowadzane przez użytkownika.

Często zadawane pytania

Czy lekcja „Układy i widoki” jest bezpłatna?

Tak — pełny tekst „Układy i widoki” 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 7 lekcji w sumie.

Co nauczysz się w „Układy i widoki”?

Proszę projektować interfejsy użytkownika za pomocą układów XML. Proszę używać ConstraintLayout, LinearLayout oraz typowych widoków, takich jak TextView, Button, ImageView i EditText. Ć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 7.

Ile czasu zajmuje lekcja „Układy i widoki”?

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