Ta strona została przetłumaczona przez Cloud Translation API.

Android Kotlin Fundamentals 01.2: Basic app anatomy

Ten moduł Codelab jest częścią kursu Android Kotlin Fundamentals. Najwięcej korzyści przyniesie Ci ukończenie wszystkich ćwiczeń w kolejności. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej kursu Android Kotlin Fundamentals.

Wprowadzenie

Wszystko zostało już skonfigurowane, a Android Studio utworzyło dla Ciebie dużo kodu. Zanim zmodyfikujesz cały ten kod, musisz wiedzieć, co właśnie zostało utworzone i jak poruszać się po plikach źródłowych aplikacji na Androida.

Z tego modułu dowiesz się więcej o głównych komponentach aplikacji na Androida i dodasz do niej prostą interaktywność za pomocą przycisku.

Co warto wiedzieć

Jak zainstalować i otworzyć Android Studio.
Jak utworzyć nowy projekt aplikacji.
Jak uruchomić aplikację w emulatorze lub na urządzeniu fizycznym.

Czego się nauczysz

Jak edytować plik układu aplikacji.
Jak utworzyć aplikację z interaktywnym działaniem.
Wiele nowych terminów. W glosariuszu znajdziesz przystępne wyjaśnienia terminów i pojęć.

Co zrobisz

Zapoznaj się z MainActivity plikiem Kotlin i plikiem układu aktywności.
Edytuj układ aktywności w XML.
Dodaj element Button do układu działania.
Wyodrębnij zakodowane na stałe ciągi tekstowe do pliku zasobów ciągów tekstowych.
Zaimplementuj metody obsługi kliknięć, aby wyświetlać komunikaty na ekranie, gdy użytkownik kliknie Button.

W tym module tworzysz nowy projekt aplikacji o nazwie DiceRoller i dodajesz podstawową interaktywność za pomocą przycisku. Za każdym razem, gdy klikniesz przycisk, wartość wyświetlanego tekstu się zmieni. Gotowa aplikacja DiceRoller w tym ćwiczeniu wygląda tak:

W ostatnim ćwiczeniu z programowania omówiliśmy główne części projektu aplikacji, w tym katalogi java i res. W tym zadaniu skupisz się na 2 najważniejszych plikach, z których składa się aplikacja: MainActivitypliku Kotlin i activity_main.xmlpliku układu.

Krok 1. Sprawdź plik MainActivity

MainActivity to przykład Activity. Activity to podstawowa klasa Androida, która rysuje interfejs użytkownika aplikacji na Androida i odbiera zdarzenia wejściowe. Po uruchomieniu aplikacji zostanie uruchomiona aktywność określona w pliku AndroidManifest.xml.

Wiele języków programowania definiuje metodę główną, która uruchamia program. Aplikacje na Androida nie mają metody głównej. Zamiast tego plik AndroidManifest.xml wskazuje, że po kliknięciu ikony programu uruchamiającego aplikację należy uruchomić MainActivity. Aby uruchomić aktywność, system operacyjny Android korzysta z informacji w pliku manifestu, aby skonfigurować środowisko aplikacji i utworzyć MainActivity. Następnie MainActivity przeprowadza konfigurację.

Każde działanie ma powiązany plik układu. Działanie i układ są połączone w procesie zwanym rozszerzaniem układu. Gdy aktywność się rozpocznie, widoki zdefiniowane w plikach układu XML zostaną przekształcone (lub „rozszerzone”) w obiekty widoku Kotlin w pamięci. Gdy to nastąpi, aktywność może rysować te obiekty na ekranie, a także dynamicznie je modyfikować.

W Android Studio wybierz Plik > Nowy > Nowy projekt, aby utworzyć nowy projekt. Użyj pustej aktywności i kliknij Dalej.
Nazwij projekt DiceRoller i sprawdź wszystkie inne wartości nazwy projektu i lokalizacji projektu. Upewnij się, że opcja „Use AndroidX Artifacts” (Użyj artefaktów AndroidX) jest zaznaczona. Kliknij Zakończ.
W panelu Project > Android rozwiń java > com.example.android.diceroller. Kliknij dwukrotnie MainActivity. W edytorze kodu wyświetla się kod w MainActivity.
Poniżej nazwy pakietu i instrukcji importu znajduje się deklaracja klasy dla MainActivity. Klasa MainActivity rozszerza klasę AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

Zwróć uwagę na metodę onCreate(). Aktywności nie używają konstruktora do inicjowania obiektu. Zamiast tego w ramach konfiguracji aktywności wywoływana jest seria predefiniowanych metod (tzw. „metody cyklu życia”). Jedną z tych metod cyklu życia jest onCreate(), którą zawsze zastępujesz w swojej aplikacji. Więcej informacji o metodach cyklu życia znajdziesz w dalszej części tego laboratorium.

W metodzie onCreate() określasz układ powiązany z aktywnością i go rozwijasz. Metoda setContentView() umożliwia wykonanie obu tych czynności.

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

Metoda setContentView() odwołuje się do układu za pomocą R.layout.activity_main, który jest w rzeczywistości odwołaniem do liczby całkowitej. Klasa R jest generowana podczas kompilowania aplikacji. Zawiera ona wszystkie zasoby aplikacji, w tym zawartość katalogu res.R

W tym przypadku R.layout.activity_main odnosi się do wygenerowanej klasy R, folderu layout i pliku układu activity_main.xml. (Zasoby nie zawierają rozszerzeń plików). Do wielu zasobów aplikacji (w tym obrazów, ciągów tekstowych i elementów w pliku układu) będziesz odwoływać się za pomocą podobnych odwołań w klasie R.

Krok 2. Przejrzyj i zbadaj plik układu aplikacji

Wszystkie aktywności w aplikacji mają powiązany plik układu w katalogu res/layout aplikacji. Plik układu to plik XML, który określa, jak wygląda aktywność. Plik układu definiuje widoki i określa, gdzie mają się one pojawiać na ekranie.

Widoki to elementy takie jak tekst, obrazy i przyciski, które rozszerzają klasę View. Istnieje wiele rodzajów widoków, m.in. TextView, Button, ImageView i CheckBox.

W tym zadaniu sprawdzisz i zmodyfikujesz plik układu aplikacji.

W panelu Project > Android rozwiń res > layout i kliknij dwukrotnie activity_main.xml. Otworzy się edytor projektu układu. Android Studio zawiera ten edytor, który umożliwia wizualne tworzenie układu aplikacji i wyświetlanie podglądu projektu układu. Więcej informacji o edytorze projektu znajdziesz w dalszej części tego kursu.
Aby wyświetlić plik układu w formacie XML, kliknij kartę Tekst u dołu okna.
Usuń cały istniejący kod XML w edytorze układu. Domyślny układ, który otrzymujesz w nowym projekcie, to dobry punkt wyjścia, jeśli pracujesz w edytorze projektu Android Studio. W tej lekcji będziesz pracować z podstawowym kodem XML, aby od podstaw utworzyć nowy układ.
Skopiuj ten kod i wklej go w układzie:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Teraz sprawdź kod:

Elementem najwyższego poziomu lub elementem głównym układu jest element <LinearLayout>. Widok LinearLayout to ViewGroup. Grupy widoków to kontenery, które zawierają inne widoki i pomagają określać ich położenie na ekranie.

Wszystkie widoki i grupy widoków dodane do układu są uporządkowane w hierarchii widoków, a element XML najwyższego poziomu jest jej korzeniem. Widok główny może zawierać inne widoki i grupy widoków, a zawarte w nim grupy widoków mogą zawierać inne widoki i grupy widoków. Gdy aplikacja uruchamia hierarchię widoków w pliku układu XML, po rozwinięciu układu staje się ona hierarchią obiektów. W tym przypadku główna grupa widoków to układ liniowy, który porządkuje widoki podrzędne liniowo, jeden po drugim (pionowo lub poziomo).

Domyślny element główny nowego projektu na Androida to ConstraintLayout, który dobrze współpracuje z edytorem projektu. W przypadku tej aplikacji użyjesz LinearLayout grupy widoków, która jest prostsza niż układ z ograniczeniami. Więcej informacji o grupach widoków i układzie z ograniczeniami znajdziesz w następnej lekcji.
W tagu LinearLayout zwróć uwagę na atrybut android:layout_width. Szerokość tego elementu LinearLayout jest ustawiona na match parent, co sprawia, że jest on tej samej szerokości co element nadrzędny. Jest to widok główny, więc układ rozszerza się na całą szerokość ekranu.
Zwróć uwagę na atrybut android:layout_height, który ma wartość wrap_content. Ten atrybut sprawia, że wysokość elementu LinearLayout jest równa łącznej wysokości wszystkich widoków, które zawiera, czyli w tym przypadku tylko elementu TextView.
Sprawdź element <TextView>. Ten TextView, który wyświetla tekst, jest jedynym elementem wizualnym w aplikacji DiceRoller. Atrybut android:text zawiera rzeczywisty ciąg znaków do wyświetlenia, w tym przypadku ciąg "Hello World!".
Zwróć uwagę na atrybuty android:layout_width i android:layout_height w elemencie <TextView>, które mają wartość wrap_content. Treścią widoku tekstowego jest sam tekst, więc widok zajmuje tylko miejsce potrzebne na tekst.

Aplikacja do rzucania kostką nie jest zbyt przydatna, jeśli użytkownik nie może rzucić kostką i sprawdzić wyniku. Na początek dodaj do układu przycisk do rzucania kostką i tekst, który będzie wyświetlać wartość wyrzuconą przez użytkownika.

Krok 1. Dodaj przycisk do układu

Dodaj element Button do układu poniżej widoku tekstu, wpisując <Button, a następnie naciśnij Enter. Pojawi się blok Button, który kończy się znakiem /> i zawiera atrybuty layout_width i layout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

Ustaw atrybuty layout_width i layout_height na "wrap_content". Dzięki tym wartościom przycisk ma taką samą szerokość i wysokość jak etykieta tekstowa, którą zawiera.
Dodaj do przycisku atrybut android:text i nadaj mu wartość „Roll”. Element Button (Przycisk) wygląda teraz tak:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

W przypadku widoków Button atrybut text jest etykietą przycisku. W edytorze układu atrybut jest podświetlony na żółto, co oznacza wskazówkę lub ostrzeżenie. W tym przypadku żółte wyróżnienie oznacza, że ciąg znaków "Roll" jest zakodowany na stałe w etykiecie przycisku, ale powinien być zasobem. Więcej informacji o zasobach ciągów znajdziesz w następnej sekcji.

Krok 2. Wyodrębnij zasoby ciągów tekstowych

Zamiast na stałe kodować ciągi tekstowe w plikach układu lub kodu, najlepiej umieścić wszystkie ciągi tekstowe aplikacji w osobnym pliku. Ten plik nazywa się strings.xml i znajduje się wśród zasobów aplikacji w katalogu res/values/.

Przechowywanie ciągów tekstowych w osobnym pliku ułatwia zarządzanie nimi, zwłaszcza jeśli używasz ich więcej niż raz. Zasoby łańcuchowe są też niezbędne do tłumaczenia i lokalizowania aplikacji, ponieważ dla każdego języka musisz utworzyć plik zasobów łańcuchowych.

Android Studio pomaga pamiętać o umieszczaniu ciągów znaków w pliku zasobów, wyświetlając wskazówki i ostrzeżenia.

Kliknij raz ciąg znaków „Roll” w atrybucie android:text tagu <Button>.
Naciśnij Alt+Enter (Option+Enter w macOS) i w menu wybierz Wyodrębnij zasób ciągu znaków.
W polu Nazwa zasobu wpisz roll_label.
Kliknij OK. W pliku res/values/string.xml tworzony jest zasób w postaci ciągu znaków, a ciąg znaków w elemencie Button jest zastępowany odwołaniem do tego zasobu:
android:text="@string/roll_label"
W panelu Projekt > Android rozwiń res > values, a następnie kliknij dwukrotnie strings.xml, aby wyświetlić zasoby łańcuchowe w pliku strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Krok 3. Nadaj styl i określ położenie widoków

Układ zawiera teraz 1 widok TextView i 1 widok Button. W tym zadaniu możesz uporządkować widoki w grupie widoków, aby wyglądały bardziej atrakcyjnie.

Kliknij kartę Projekt, aby wyświetlić podgląd układu. Obecnie oba widoki znajdują się obok siebie u góry ekranu.
Kliknij kartę Tekst, aby wrócić do edytora XML. Dodaj atrybut android:orientation do tagu LinearLayout i przypisz mu wartość "vertical". Element <LinearLayout> powinien teraz wyglądać tak:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

Grupa widoków LinearLayout umieszcza zawarte w niej widoki jeden po drugim w linii – poziomo w wierszu lub pionowo w stosie. Domyślnie jest to poziomo. Ponieważ chcesz, aby element TextView znajdował się nad elementem Button, ustaw orientację pionową. Projekt wygląda teraz mniej więcej tak: przycisk znajduje się pod tekstem:

Dodaj atrybut android:layout_gravity do elementów TextView i Button i przypisz mu wartość "center_horizontal". Wyrównuje to oba widoki wzdłuż środka osi poziomej. Elementy TextView i Button powinny teraz wyglądać tak:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

Dodaj atrybut android:layout_gravity do układu liniowego i nadaj mu wartość "center_vertical". Element LinearLayout powinien teraz wyglądać tak:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Aby zwiększyć rozmiar tekstu w widoku tekstowym, dodaj atrybut android:textSize do elementu <TextView> z wartością "30sp". Skrót sp oznacza skalowalne piksele, czyli miarę rozmiaru tekstu niezależną od jakości wyświetlacza urządzenia. Element TextView powinien teraz wyglądać tak:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

Skompiluj i uruchom aplikację.

Teraz zarówno tekst, jak i przycisk są dobrze umieszczone, a w widoku tekstu jest większy tekst. Przycisk nie ma jeszcze żadnej funkcji, więc po kliknięciu nic się nie dzieje. Zajmij się tym w następnej kolejności.

Krok 4. Uzyskaj odwołanie do przycisku w kodzie

Kod Kotlin w MainActivity odpowiada za definiowanie interaktywnych części aplikacji, np. tego, co się dzieje po kliknięciu przycisku. Aby napisać funkcję, która będzie wykonywana po kliknięciu przycisku, musisz uzyskać odwołanie do obiektu Button w rozwiniętym układzie w klasie MainActivity. Aby uzyskać odniesienie do przycisku:

Przypisz Button identyfikator w pliku XML.
Aby uzyskać odwołanie do elementu View o określonym identyfikatorze, użyj w kodzie metody findViewById().

Gdy masz odniesienie do widoku Button, możesz wywoływać na nim metody, aby dynamicznie zmieniać go podczas działania aplikacji. Możesz na przykład dodać procedurę obsługi kliknięcia, która będzie wykonywać kod po kliknięciu przycisku.

Otwórz plik układu activity_main.xml, jeśli nie jest jeszcze otwarty, i kliknij kartę Tekst.
Dodaj do przycisku atrybut android:id i nadaj mu nazwę (w tym przypadku „@+id/roll_button"”). Element <Button> będzie teraz wyglądać tak:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Gdy utworzysz identyfikator widoku w pliku układu XML, Android Studio utworzy stałą całkowitą o nazwie tego identyfikatora w wygenerowanej klasie R. Jeśli więc nazwiesz widok roll_button, Android Studio wygeneruje i utworzy stałą całkowitą o nazwie roll_button w klasie R. Prefiks "@+id" w nazwie identyfikatora informuje kompilator, że ma dodać tę stałą identyfikatora do klasy R. Wszystkie identyfikatory widoków w pliku XML muszą mieć ten prefiks.

Otwórz plik MainActivity Kotlin. W sekcji onCreate(), po setContentView(), dodaj ten wiersz:

val rollButton: Button = findViewById(R.id.roll_button)

Użyj metody findViewById(), aby uzyskać odwołanie View do widoku zdefiniowanego w klasie XML. W tym przypadku otrzymujesz odwołanie Button z klasy R i identyfikator roll_button, a następnie przypisujesz to odwołanie do zmiennej rollButton.

Zwróć uwagę, że Android Studio podświetla klasę Button na czerwono i podkreśla ją, aby wskazać, że jest to nierozwiązane odwołanie i że przed użyciem tej klasy musisz ją zaimportować. Może też pojawić się etykietka z pełną nazwą klasy:
Aby zaakceptować pełną nazwę klasy, naciśnij Alt+Enter (Option+Enter na Macu).

Krok 5. Dodaj procedurę obsługi kliknięcia, aby wyświetlić powiadomienie

Obsługa kliknięć to metoda wywoływana za każdym razem, gdy użytkownik kliknie element interfejsu, który można kliknąć, np. przycisk. Aby utworzyć funkcję obsługi kliknięć, musisz:

Metoda, która wykonuje jakąś operację.
Metoda setOnClickHandler(), która łączy Button z metodą obsługi.

W tym zadaniu utworzysz metodę obsługi kliknięć, która będzie wyświetlać element Toast. (Toast to komunikat, który pojawia się na ekranie na krótki czas). Metodę obsługi kliknięcia łączysz z elementem Button.

W klasie MainActivity po onCreate() utwórz funkcję prywatną o nazwie rollDice().

private fun rollDice() {
  
}

Dodaj ten wiersz do metody rollDice(), aby wyświetlać Toast po wywołaniu rollDice():

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Aby utworzyć powiadomienie, wywołaj metodę Toast.makeText(). Ta metoda wymaga 3 rzeczy:

Obiekt Context. Obiekt Context umożliwia komunikowanie się z systemem operacyjnym Android i uzyskiwanie informacji o jego bieżącym stanie. W tym miejscu musisz umieścić Context, aby obiekt Toast mógł poinformować system operacyjny o wyświetleniu powiadomienia. Ponieważ AppCompatActivity jest podklasą Context, w kontekście możesz użyć słowa kluczowego this.
Wiadomość do wyświetlenia, tutaj "button clicked".
czas wyświetlania wiadomości. Metoda show() na końcu wyświetla powiadomienie.

W onCreate() po wywołaniu funkcji findViewById() dodaj ten wiersz, aby przypisać rollDice() jako procedurę obsługi kliknięć do obiektu rollButton:

rollButton.setOnClickListener { rollDice() }

Pełna definicja klasy MainActivity wygląda teraz tak:

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

Skompiluj i uruchom aplikację. Za każdym razem, gdy naciśniesz przycisk, powinien pojawić się komunikat.

W tym zadaniu zmodyfikujesz metodę rollDice(), aby zmienić tekst w pliku TextView. W pierwszym kroku zmieniasz tekst z "Hello World!" na ciąg znaków "Dice Rolled!". W drugim kroku wyświetlasz losową liczbę z zakresu od 1 do 6.

Krok 1. Wyświetl ciąg znaków

Otwórz activity_main.xml i dodaj identyfikator do TextView.

android:id="@+id/result_text"

Otwórz pokój MainActivity. W metodzie rollDice() zmień w komentarz wiersz, aby wyświetlić Toast.
Użyj metody findViewById(), aby uzyskać odwołanie do elementu TextView według jego identyfikatora. Przypisz odwołanie do zmiennej resultText.

val resultText: TextView = findViewById(R.id.result_text)

Aby zmienić wyświetlany tekst, przypisz do właściwości resultText.text nowy ciąg znaków. Możesz zignorować wskazówkę, aby wyodrębnić ten ciąg znaków do zasobu. Jest to tylko ciąg tymczasowy.

resultText.text = "Dice Rolled!"

Skompiluj i uruchom aplikację. Zauważ, że kliknięcie przycisku Roll (Rzuć) powoduje teraz aktualizację wartości TextView.

Krok 2. Wyświetl losową liczbę

Na koniec w tym zadaniu dodasz losowość do kliknięcia przycisku, aby symulować rzut kostką. Za każdym razem, gdy klikniesz lub dotkniesz przycisku, kod wybierze losową liczbę z zakresu od 1 do 6 i zaktualizuje wartość TextView. Generowanie liczby losowej nie jest specyficzne dla Androida. W tym celu używasz klasy Random.

U góry metody rollDice() użyj metody Random.nextInt(), aby uzyskać losową liczbę z zakresu od 1 do 6:

val randomInt = Random().nextInt(6) + 1

Ustaw właściwość text na wartość losowej liczby całkowitej jako ciąg znaków:

resultText.text = randomInt.toString()

Skompiluj i uruchom aplikację. Za każdym razem, gdy klikniesz przycisk Rzuć, liczba w widoku tekstu się zmieni.

Projekt Android Studio: DiceRoller

Wyzwanie: dodaj do aplikacji drugi przycisk o nazwie „Count Up” (Zliczaj w górę), który będzie wyświetlany tuż pod przyciskiem Roll (Rzuć). Po kliknięciu przycisku Zwiększ powinna zostać pobrana bieżąca wartość z widoku tekstu wyniku, do której zostanie dodana liczba 1, a następnie widok tekstu zostanie zaktualizowany. Pamiętaj o tych przypadkach brzegowych:

Jeśli widok tekstu wyniku nie zawiera jeszcze liczby (czyli jeśli widok tekstu nadal zawiera domyślny ciąg znaków „Hello World”), ustaw tekst wyniku na 1.
Jeśli liczba wynosi już 6, nie rób nic.

Kod rozwiązania zadania programistycznego

Projekt Android Studio: DiceRoller-challenge

Aktywności

MainActivity jest podklasą klasy AppCompatActivity, która z kolei jest podklasą klasy Activity. Activity to podstawowa klasa Androida, która odpowiada za rysowanie interfejsu aplikacji na Androida i odbieranie zdarzeń wejściowych.
Wszystkie aktywności mają powiązany plik układu, który jest plikiem XML w zasobach aplikacji. Plik układu ma nazwę aktywności, np. activity_main.xml.
Metoda setContentView() w MainActivity wiąże układ z aktywnością i rozszerza go podczas tworzenia aktywności.
Tworzenie układu to proces, w którym widoki zdefiniowane w plikach układu XML są przekształcane (lub „tworzone”) w obiekty widoku Kotlin w pamięci. Po rozszerzeniu układu Activity może rysować te obiekty na ekranie i dynamicznie je modyfikować.

Widoki danych

Wszystkie elementy interfejsu w układzie aplikacji są podklasami klasy View i nazywane są widokami. TextView i Button to przykłady widoków.
Elementy View można grupować w ramach elementu ViewGroup. Grupa widoków działa jako kontener widoków lub innych grup widoków. LinearLayout to przykład grupy widoków, która rozmieszcza widoki liniowo.

Wyświetl atrybuty

Atrybuty android:layout_width i android:layout_height wskazują wagę i wysokość widoku. Wartość match_parent rozciąga widok do szerokości lub wysokości elementu nadrzędnego. Wartość wrap_content zmniejsza widok, aby dopasować go do jego zawartości.
Atrybut android:text określa tekst, który ma być wyświetlany w widoku (jeśli ten widok wyświetla tekst). W przypadku przycisków android:text to etykieta przycisku.
Atrybut android:orientation w grupie widoków LinearLayout rozmieszcza elementy widoku, które zawiera. Wartość horizontal powoduje ułożenie widoków od lewej do prawej. Wartość vertical powoduje ułożenie widoków od góry do dołu.
Atrybut android:layout_gravity określa umiejscowienie widoku i wszystkich jego elementów podrzędnych.
Atrybut android:textSize określa rozmiar tekstu w widoku tekstu. Rozmiary tekstu są podawane w jednostkach sp (skalowalnych pikselach). Dzięki jednostkom sp możesz określać rozmiar tekstu niezależnie od jakości wyświetlacza urządzenia.

Strings

Zamiast na stałe wpisywać ciągi tekstowe w układzie, lepiej jest używać zasobów w formie ciągów tekstowych.
Zasoby ciągów tekstowych znajdują się w pliku values/res/string.xml.
Aby wyodrębnić ciągi znaków, użyj klawisza Alt+Enter (Option+Enter na Macu). W menu wybierz Wyodrębnij zasoby ciągów.

Korzystanie z widoków

Aby połączyć kod Kotlin z widokiem zdefiniowanym w układzie, musisz uzyskać odwołanie do obiektu widoku po jego rozwinięciu. Przypisz identyfikator (android:id) do widoku w układzie, a następnie użyj metody findViewById(), aby uzyskać powiązany obiekt widoku.
Gdy utworzysz identyfikator widoku w pliku układu XML, Android Studio utworzy stałą całkowitą o nazwie tego identyfikatora w wygenerowanej klasie R. Następnie możesz użyć tego odwołania R.id w metodzie findViewById().
Atrybuty obiektu widoku możesz ustawić bezpośrednio w kodzie Kotlin, używając nazwy właściwości. Na przykład tekst w widoku tekstowym jest zdefiniowany przez atrybut android:text w XML i przez właściwość text w Kotlinie.
Obsługa kliknięć to metoda wywoływana, gdy użytkownik kliknie element interfejsu. Aby dołączyć metodę obsługi kliknięć do widoku, np. przycisku, użyj metody setOnClickListener().

Korzystanie z powiadomień

Toast to widok, który wyświetla użytkownikowi prosty komunikat w małym wyskakującym okienku.

Aby utworzyć komunikat, wywołaj metodę fabryczną makeText() w klasie Toast z 3 argumentami:

Kontekst aplikacji Activity
Wiadomość do wyświetlenia, np. zasób w postaci ciągu znaków.
Czas trwania, np. Toast.LENGTH_SHORT

Aby wyświetlić komunikat, wywołaj funkcję show().

Kurs Udacity:

Tworzenie aplikacji na Androida w języku Kotlin

Dokumentacja dla deweloperów aplikacji na Androida:

Inne:

Słowniczek słów i pojęć

W tej sekcji znajdziesz listę możliwych zadań domowych dla uczniów, którzy wykonują ten moduł w ramach kursu prowadzonego przez instruktora. Nauczyciel musi:

W razie potrzeby przypisz pracę domową.
Poinformuj uczniów, jak przesyłać projekty.
Oceń zadania domowe.

Instruktorzy mogą korzystać z tych sugestii w dowolnym zakresie i mogą zadawać inne zadania domowe, które uznają za odpowiednie.

Jeśli wykonujesz ten kurs samodzielnie, możesz użyć tych zadań domowych, aby sprawdzić swoją wiedzę.

Zmienianie aplikacji

Otwórz aplikację DiceRoller. Dodaj do niej przycisk „Reset” (Resetuj), który będzie się wyświetlać tuż pod przyciskiem Roll (Rzuć). Spraw, aby ten przycisk resetował widok tekstu wyniku do 0.

Odpowiedz na te pytania

Pytanie 1

Która metoda na Activity rozszerza układ aplikacji i udostępnia jej widoki jako obiekty?

onCreate()
setClickListener()
setContentView()
show()

Pytanie 2

Którego atrybutu widoku używasz, aby ustawić szerokość widoku tak, aby dopasowywała się do treści?

android:view_width="wrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="match_parent"

Przesyłanie aplikacji do oceny

Sprawdź, czy aplikacja zawiera te elementy:

Układ aplikacji powinien zawierać 1 widok tekstu i 2 przyciski.
Kod aplikacji powinien ustawić 2 procedury obsługi kliknięć, po jednej dla każdego przycisku.
Obsługa kliknięć, która resetuje widok tekstu, powinna ustawić właściwość tekstową na 0.

Rozpocznij kolejną lekcję: 1.3. Zasoby obrazów i zgodność

Linki do innych ćwiczeń z tego kursu znajdziesz na stronie docelowej ćwiczeń z podstaw języka Kotlin na Androidzie.