Tworzenie podstawowej interaktywnej aplikacji do rzucania kostką

W tym laboratorium kodowania utworzysz aplikację na Androida Dice Roller, w której użytkownicy mogą klikać Button, aby rzucać kostką. Wynik rzutu pojawi się na ekranie w TextView.

Aby utworzyć układ aplikacji, użyjesz edytora układu w Android Studio, a następnie napiszesz kod w języku Kotlin, który określi, co się stanie po kliknięciu ikony Button.

Wymagania wstępne

• Jak utworzyć i uruchomić aplikację „Hello, World!” w Android Studio.
• Znasz sposób używania TextViews i ImageViews w aplikacji.
• Jak modyfikować atrybuty elementu TextView w Edytorze układu.
• Jak wyodrębnić tekst do zasobu ciągu znaków, aby ułatwić tłumaczenie aplikacji i ponowne wykorzystywanie ciągów znaków.
• podstawy programowania w Kotlinie, które zostały omówione w poprzednich ćwiczeniach;

Czego się nauczysz

• Jak dodać Button do aplikacji na Androida.
• Jak dodać działanie, które ma być wykonywane po kliknięciu ikony Button w aplikacji.
• Jak otworzyć i zmodyfikować kod Activity aplikacji.
• Jak wyświetlić Toast komunikat.
• Jak aktualizować zawartość elementu TextView podczas działania aplikacji.

Co utworzysz

• Aplikacja na Androida Dice Roller, która ma przycisk Button do rzucania kostką i aktualizuje tekst na ekranie o wynik rzutu.

Wymagania

• komputer z zainstalowanym Androidem Studio,

Tak będzie wyglądać aplikacja po ukończeniu tego laboratorium.

Tworzenie projektu pustej aktywności

1. Jeśli masz już otwarty projekt w Android Studio, kliknij Plik > Nowy > Nowy projekt…, aby otworzyć ekran Utwórz nowy projekt.
2. W sekcji Create New Project (Utwórz nowy projekt) utwórz nowy projekt w Kotlinie, korzystając z szablonu Empty Activity (Pusta aktywność).
3. Nazwij aplikację „Dice Roller” i ustaw minimalny poziom API na 19 (KitKat).

Ważne: jeśli nie wiesz, jak utworzyć nowy projekt w Android Studio, zapoznaj się ze szczegółami w artykule Tworzenie i uruchamianie pierwszej aplikacji na Androida.

4. Uruchom nową aplikację.Powinna wyglądać tak:
   

Otwieranie edytora układu

1. W oknie Project (Projekt) kliknij dwukrotnie activity_main.xml (app > res > layout > activity_main.xml), aby go otworzyć. Powinien pojawić się Edytor układu, w którym na środku aplikacji znajduje się tylko element TextView „Hello World”
   .

Następnie dodasz do aplikacji Button. Button to element interfejsu użytkownika (UI) w Androidzie, który użytkownik może kliknąć, aby wykonać działanie.

W tym zadaniu dodasz znak Button pod tekstem „Hello World” TextView. Elementy TextView i Button będą się znajdować w elemencie ConstraintLayout, który jest typem elementu ViewGroup.

Gdy w ViewGroup znajdują się Views, są one uznawane za dzieci rodzicaViewGroup.Views W przypadku Twojej aplikacji elementy TextView i Button byłyby uznawane za elementy podrzędne elementu nadrzędnego ConstraintLayout.

Dodaj Button jako dziecko istniejącego ConstraintLayout w aplikacji.

Uwaga: podobnie jak w drzewie genealogicznym, w hierarchii widoków widoki nadrzędne mogą być widokami podrzędnymi, a widoki podrzędne mogą być nadrzędne w stosunku do innych widoków podrzędnych.

Dodawanie przycisku do układu

1. Przeciągnij element Button z palety do widoku Projekt i umieść go pod elementem TextView „Hello World”.
   
2. W sekcji Paleta w drzewie komponentów sprawdź, czy elementy Button i TextView są wymienione w sekcji ConstraintLayout (jako elementy podrzędne elementu ConstraintLayout).
3. Wyświetli się błąd informujący, że element Button nie jest ograniczony. Ponieważ element Button znajduje się w elemencie ConstraintLayout, musisz ustawić ograniczenia pionowe i poziome, aby go umieścić.

Umieść przycisk

W tym kroku dodasz pionowe ograniczenie od góry elementu Button do dołu elementu TextView. Spowoduje to umieszczenie znaku Button pod znakiem TextView.

1. W widoku Projekt u góry Button naciśnij i przytrzymaj białe kółko z niebieską obwódką. Przeciągnij wskaźnik, a za nim pojawi się strzałka. Puść, gdy dotrzesz do dolnej krawędzi napisu „Hello World” TextView. Ustanawia to ograniczenie układu, a element Button przesuwa się w górę tuż pod element TextView.
   
2. Sprawdź atrybuty po prawej stronie edytora układu.
3. W widżecie ograniczeń zobaczysz nowe ograniczenie układu,które jest ustawione na dole elementu TextView, Top → BottomOf textView (0dp). (0dp) oznacza, że margines wynosi 0. Występuje też błąd dotyczący brakujących ograniczeń poziomych.
   
4. Dodaj ograniczenie poziome od lewej strony elementu Button do lewej strony elementu nadrzędnego ConstraintLayout.
5. Powtórz to po prawej stronie, łącząc prawą krawędź Button z prawą krawędzią ConstraintLayout. Wynik powinien wyglądać tak:

6. Gdy Button jest nadal zaznaczony, widżet ograniczeń powinien wyglądać tak. Zwróć uwagę na 2 dodatkowe ograniczenia: Start → StartOf parent (0dp) i End → EndOf parent (0dp). Oznacza to, że element Button jest wyśrodkowany poziomo w elemencie nadrzędnym ConstraintLayout.
   

7. Uruchom aplikację. Powinna wyglądać jak na zrzucie ekranu poniżej. Możesz kliknąć Button, ale na razie nic się nie stanie. Kontynuujmy!

Zmiana tekstu przycisku

W edytorze układu wprowadzisz jeszcze kilka zmian w interfejsie.

Zamiast etykiety Button „Przycisk” zmień ją na coś, co wskazuje, co przycisk będzie robić, np. „Rzut”.

1. W Edytorze układu, gdy wybrany jest element Button, kliknij Atrybuty, zmień tekst na Przewiń i naciśnij klawisz Enter (Return na Macu).

2. W drzewie komponentów obok elementu Button pojawi się pomarańczowy trójkąt ostrzegawczy. Jeśli najedziesz wskaźnikiem na trójkąt, pojawi się komunikat. Android Studio wykryło w kodzie aplikacji zakodowany na stałe ciąg znaków („Roll”) i sugeruje użycie zamiast niego zasobu w postaci ciągu znaków.

Zakodowanie ciągu znaków na stałe utrudnia przetłumaczenie aplikacji na inne języki i ponowne użycie ciągów znaków w różnych częściach aplikacji. Na szczęście Android Studio ma automatyczne rozwiązanie tego problemu.

3. W drzewie komponentów kliknij pomarańczowy trójkąt.

Otworzy się pełna treść komunikatu ostrzegawczego.

4. U dołu wiadomości w sekcji Sugerowana poprawka kliknij przycisk Popraw. Być może trzeba będzie przewinąć stronę w dół.
5. Otworzy się okno Wyodrębnij zasób. Wyodrębnienie ciągu znaków oznacza pobranie tekstu „Roll” i utworzenie zasobu tekstowego o nazwie roll w pliku strings.xml (app > res > values > strings.xml). Wartości domyślne są prawidłowe, więc kliknij OK.

6. Zwróć uwagę, że w sekcji Atrybuty atrybut text dla zasobu Button ma teraz wartość @string/roll, co odnosi się do utworzonego właśnie zasobu.
   

W widoku Projekt na elemencie Button powinien nadal być widoczny tekst Przewiń.

Stylizowanie widoku tekstu

Tekst „Hello World!” jest dość mały, a komunikat nie jest istotny dla Twojej aplikacji. W tym kroku zastąpisz mały komunikat „Hello, World!” liczbą, która będzie wyświetlać wartość po rzucie, i powiększysz czcionkę, aby była lepiej widoczna.

1. W edytorze projektu wybierz TextView, aby jego atrybuty pojawiły się w oknie Atrybuty.
2. Zmień textSize elementu TextView na 36sp, aby był duży i łatwy do odczytania. Aby znaleźć textSize, konieczne może być przewinięcie strony.

3. Wyczyść atrybut text elementu TextView. Nie musisz niczego wyświetlać w TextView, dopóki użytkownik nie rzuci kostką.

Jednak podczas edytowania układu i kodu aplikacji bardzo przydatne jest wyświetlanie tekstu w TextView. W tym celu możesz dodać do TextView tekst, który będzie widoczny tylko w podglądzie układu, ale nie podczas działania aplikacji.

.

4. Wybierz TextView w drzewie komponentów.
5. W sekcji Atrybuty wspólne znajdź atrybut tekst, a poniżej niego kolejny atrybut tekst z ikoną narzędzia. Atrybut text to tekst, który będzie wyświetlany użytkownikowi podczas działania aplikacji. Atrybut text z ikoną narzędzia to atrybut „tools text” (tekst narzędziowy), który jest przeznaczony tylko dla Ciebie jako programisty.
6. Ustaw tekst narzędzi na „1” w TextView (aby zasymulować rzut kostką z wynikiem 1). Cyfra „1” będzie widoczna tylko w edytorze projektu w Android Studio, ale nie pojawi się, gdy uruchomisz aplikację na rzeczywistym urządzeniu lub w emulatorze.

Pamiętaj, że ten tekst jest widoczny tylko dla deweloperów aplikacji, więc nie musisz tworzyć dla niego zasobu w postaci ciągu znaków.

7. Sprawdź aplikację w podglądzie. Wyświetla się „1”.

8. Uruchom aplikację. Tak wygląda aplikacja uruchomiona na emulatorze. Cyfra „1” nie jest widoczna. Jest to prawidłowe działanie.

Świetnie, zmiany układu zostały wprowadzone.

Masz aplikację z przyciskiem, ale po jego naciśnięciu nic się nie dzieje. Aby to zmienić, musisz napisać kod w języku Kotlin, który będzie rzucać kostką i aktualizować ekran po naciśnięciu przycisku.

Aby wprowadzić tę zmianę, musisz dowiedzieć się więcej o strukturze aplikacji na Androida.

Activity zapewnia okno, w którym aplikacja rysuje interfejs. Zazwyczaj Activity zajmuje cały ekran uruchomionej aplikacji. Każda aplikacja ma co najmniej 1 aktywność. Działanie najwyższego poziomu lub pierwsze działanie jest często nazywane MainActivity i jest udostępniane przez szablon projektu. Jeśli na przykład użytkownik przewija listę aplikacji na urządzeniu i kliknie ikonę aplikacji „Dice Roller”, system Android uruchomi MainActivity tej aplikacji.

W kodzie MainActivity musisz podać szczegóły dotyczące układu Activity i sposobu, w jaki użytkownik powinien z nim wchodzić w interakcję.

• W aplikacji Birthday Card jest jeden element Activity, który wyświetla wiadomość i obrazek urodzinowy.
• W aplikacji Dice Roller znajduje się 1 Activity, który wyświetla utworzony właśnie układ TextView i Button.

W przypadku bardziej złożonych aplikacji może być wiele ekranów i więcej niż 1 Activity. Każdy Activity ma określone przeznaczenie.

Na przykład w aplikacji galerii zdjęć możesz mieć jeden Activity do wyświetlania siatki zdjęć, drugi Activity do wyświetlania pojedynczego zdjęcia i trzeci Activity do edytowania pojedynczego zdjęcia.

Otwórz plik MainActivity.kt

W pliku MainActivity dodasz kod, który będzie reagować na kliknięcie przycisku. Aby to zrobić prawidłowo, musisz lepiej poznać MainActivitykod, który jest już w aplikacji.

1. Otwórz plik MainActivity.kt (aplikacja > java > com.example.diceroller > MainActivity.kt). Poniżej znajdziesz informacje o tym, co powinno się wyświetlić. Jeśli widzisz ikonę import..., kliknij ją, aby rozwinąć listę importów....

package com.example.diceroller

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

class MainActivity : AppCompatActivity() {

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

Nie musisz rozumieć każdego słowa w powyższym kodzie, ale musisz mieć ogólne pojęcie o tym, co on robi. Im więcej będziesz pracować z kodem Androida, tym lepiej go poznasz i zrozumiesz.

2. Sprawdź kod Kotlin dla klasy MainActivity, która jest oznaczona słowem kluczowym class, a następnie nazwą.

class MainActivity : AppCompatActivity() {
    ...
}

3. Zwróć uwagę, że w pliku MainActivity nie ma funkcji main().
   
   Wcześniej dowiedzieliśmy się, że każdy program w Kotlinie musi mieć funkcję main(). Aplikacje na Androida działają inaczej. Zamiast wywoływać funkcję main(), system Android wywołuje metodę onCreate() klasy MainActivity, gdy aplikacja jest otwierana po raz pierwszy.
   
4. Znajdź metodę onCreate(), która wygląda jak poniższy kod.

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

Więcej informacji o override znajdziesz w dalszej części ćwiczeń z programowania (więc na razie się tym nie przejmuj). W pozostałej części metody onCreate() konfiguruje się MainActivity za pomocą kodu z importów i ustawia układ początkowy za pomocą setContentView().

5. Zwróć uwagę na wiersze zaczynające się od import.
   

Android udostępnia framework z wieloma klasami, które ułatwiają pisanie aplikacji na Androida, ale musi dokładnie wiedzieć, o którą klasę Ci chodzi. Za pomocą instrukcji import możesz określić, której klasy w frameworku chcesz użyć w kodzie. Na przykład klasa Button jest zdefiniowana w android.widget.Button.

Włącz automatyczne importowanie

Jeśli używasz większej liczby klas, pamiętanie o dodawaniu instrukcji import może być dość pracochłonne. Na szczęście Android Studio pomaga wybrać prawidłowe importy, gdy używasz klas udostępnionych przez inne osoby. W tym kroku skonfigurujesz Android Studio tak, aby w miarę możliwości automatycznie dodawało importy i usuwało z kodu nieużywane importy.

1. W Android Studio otwórz ustawienia, klikając Plik > Inne ustawienia > Ustawienia nowych projektów.
2. Rozwiń Inne ustawienia > Automatyczny import. W sekcjach Java i Kotlin upewnij się, że zaznaczone są opcje Add unambiguous imports on the fly (Dodaj jednoznaczne importy na bieżąco) i Optimize imports on the fly (for current project) (Optymalizuj importy na bieżąco (w przypadku bieżącego projektu)). W każdej sekcji znajdują się 2 pola wyboru.
   
   Ustawienia jednoznacznych importów informują Android Studio, aby automatycznie dodawało instrukcję importu, o ile może określić, której instrukcji użyć. Ustawienia optimize imports (optymalizuj importy) informują Androida Studio, aby usuwał wszystkie importy, które nie są używane przez kod.
   
3. Zapisz zmiany i zamknij ustawienia, klikając OK.

Teraz, gdy wiesz już trochę więcej o MainActivity, zmodyfikujesz aplikację tak, aby kliknięcie Button powodowało działanie na ekranie.

Wyświetlanie komunikatu po kliknięciu przycisku

W tym kroku określisz, że po kliknięciu przycisku u dołu ekranu ma się wyświetlić krótki komunikat.

1. Dodaj ten kod do metody onCreate() po wywołaniu setContentView(). Metoda findViewById() znajduje element Button w układzie. R.id.button to identyfikator zasobu Button, który jest jego unikalnym identyfikatorem. Kod zapisuje odwołanie do obiektu Button w zmiennej o nazwie rollButton, a nie sam obiekt Button.

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

Uwaga: Android automatycznie przypisuje numery identyfikacyjne do zasobów w aplikacji. Na przykład przycisk Rzut ma identyfikator zasobu, a ciąg znaków tekstu przycisku również ma identyfikator zasobu. Identyfikatory zasobów mają format R.<type>.<name>, np. R.string.roll. W przypadku identyfikatorów View znak <type> to id, np. R.id.button.

Kod zapisuje odwołanie do obiektu Button w zmiennej o nazwie rollButton, a nie sam obiekt Button.

Ważne: gdy Kotlin przypisuje obiekt do zmiennej, nie kopiuje całego obiektu za każdym razem, tylko zapisuje odwołanie do niego. Możesz traktować odniesienie jako numer ubezpieczenia społecznego lub inny krajowy numer identyfikacyjny: numer odnosi się do osoby, ale nie jest nią samą. Gdy skopiujesz numer, nie skopiujesz osoby.

Metoda onCreate() powinna teraz wyglądać tak:

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

   val rollButton: Button = findViewById(R.id.button)
}

2. Sprawdź, czy Android Studio automatycznie dodało instrukcję import dla Button.
   Zwróć uwagę, że są teraz 3 instrukcje importu – trzecia została dodana automatycznie.
   

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

Uwaga: jeśli włączenie automatycznego importowania nie zadziała, symbol Button zostanie podświetlony na czerwono. Możesz ręcznie dodać prawidłowy import, umieszczając kursor tekstu w słowie Button, a następnie naciskając klawisz Alt+Enter (Option+Enter na komputerze Mac).

Następnie musisz powiązać kod z elementem Button, aby można było go uruchomić po kliknięciu tego elementu.Button Detektor kliknięć to kod określający, co ma się stać po dotknięciu lub kliknięciu. Można to sobie wyobrazić jako kod, który po prostu „nasłuchuje”, czy użytkownik kliknie w tym przypadku Button.

3. Użyj obiektu rollButton i ustaw na nim odbiornik kliknięć, wywołując metodę setOnClickListener().

rollButton.setOnClickListener {
}

Podczas pisania Android Studio może wyświetlać wiele sugestii. W tym przypadku wybierz opcję setOnClickListener {...}.

W nawiasach klamrowych umieść instrukcje dotyczące tego, co ma się stać po kliknięciu przycisku. Na razie aplikacja będzie wyświetlać Toast, czyli krótki komunikat, który pojawi się użytkownikowi.

4. Utwórz Toast z tekstem "Dice Rolled!", wywołując Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. Następnie poproś Toast o wyświetlenie się, wywołując metodę show().

toast.show()

Tak wygląda zaktualizowana klasa MainActivity. Instrukcje package i import nadal znajdują się na początku pliku:

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Możesz połączyć te 2 wiersze w funkcji nasłuchiwania kliknięć w 1 wiersz bez zmiennej. Jest to typowy wzorzec, który możesz znaleźć w innych kodach.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Uruchom aplikację i kliknij przycisk Roll (Rzut). U dołu ekranu powinien pojawić się komunikat, który po chwili zniknie.

Hurra! Kliknięcie przycisku spowodowało wyświetlenie wiadomości. To pierwszy raz, gdy piszesz kod w Kotlinie na Androida.

Aktualizowanie widoku TextView po kliknięciu przycisku

Zamiast wyświetlać tymczasowy komunikat Toast, napiszesz kod, który zaktualizuje wartość TextView na ekranie po kliknięciu przycisku Rzuć.

1. Wróć do activity_main.xml (aplikacja > res > layout > activity_main.xml).
2. Kliknij TextView.
3. Zwróć uwagę, że id to textView.
   
4. Otwórz MainActivity.kt (aplikacja > java > com.example.diceroller > MainActivity.kt)
5. Usuń wiersze kodu, które tworzą i wyświetlają znak Toast.

rollButton.setOnClickListener {
  
}

6. Zamiast tego utwórz nową zmienną o nazwie resultTextView, w której będziesz przechowywać wartość TextView.
7. Użyj findViewById(), aby znaleźć textView w układzie za pomocą jego identyfikatora i zapisać do niego odwołanie.

val resultTextView: TextView = findViewById(R.id.textView)

8. Ustaw tekst na resultTextView na „6” w cudzysłowie.
   

resultTextView.text = "6"

Jest to podobne do tego, co zostało zrobione podczas ustawiania tekstu w sekcji Atrybuty, ale teraz znajduje się on w kodzie, więc musi być ujęty w cudzysłów. Jawne ustawienie tej wartości oznacza, że na razie TextView zawsze będzie wyświetlać wartość 6. W następnym zadaniu dodasz kod, który będzie rzucać kostką i wyświetlać różne wartości.

Klasa MainActivity powinna wyglądać tak:

class MainActivity : AppCompatActivity() {

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

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Uruchom aplikację. Kliknij przycisk. Powinna zaktualizować wartość TextView na „6”.

Brakuje tylko rzutu kostką. Możesz ponownie użyć klasy Dice z poprzedniego laboratorium, która obsługuje logikę rzutu kostką.

Dodawanie klasy Dice

1. Po ostatnim nawiasie klamrowym w klasie MainActivity utwórz klasę Dice z metodą roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Zwróć uwagę, że Android Studio podkreśla numSides falistą szarą linią. (Może to chwilę potrwać).
3. Najedź kursorem na ikonę numSides. Pojawi się wyskakujące okienko z informacją Właściwość „numSides” może być prywatna.
   

Oznaczenie numSides jako private spowoduje, że będzie ona dostępna tylko w Diceklasie. Ponieważ jedyny kod, który będzie używać numSides, znajduje się w klasie Dice, możesz ustawić argument private dla klasy Dice. Więcej informacji o zmiennych private i public znajdziesz w następnej lekcji.

4. Wprowadź sugerowaną poprawkę w Android Studio, klikając Make 'numSides' 'private' (Ustaw „numSides” jako „private”).

Utwórz metodę rollDice()

Po dodaniu klasy Dice do aplikacji zaktualizujesz klasę MainActivity, aby z niej korzystać. Aby lepiej uporządkować kod, umieść całą logikę związaną z rzucaniem kostką w jednej funkcji.

1. Zastąp kod w funkcji nasłuchiwania kliknięć, która ustawia tekst na „6”, wywołaniem funkcji rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Ponieważ zmienna rollDice() nie jest jeszcze zdefiniowana, Android Studio zgłasza błąd i wyświetla rollDice() na czerwono.
3. Jeśli najedziesz wskaźnikiem myszy na rollDice(), Android Studio wyświetli problem i kilka możliwych rozwiązań.

4. Kliknij Więcej działań..., aby otworzyć menu. Android Studio oferuje więcej możliwości!

Wskazówka: jeśli masz problem z najechaniem wskaźnikiem i kliknięciem Więcej działań..., możesz kliknąć rollDice() i nacisnąć Alt+Enter (Option+Enter na Macu), aby wyświetlić menu.

5. Kliknij Utwórz funkcję „rollDice”. Android Studio tworzy pustą definicję funkcji w MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Tworzenie nowej instancji obiektu Dice

W tym kroku sprawisz, że metoda rollDice() utworzy i rzuci kostką, a następnie wyświetli wynik w TextView.

1. W funkcji rollDice() usuń wywołanie TODO().
2. Dodaj kod, aby utworzyć kostkę z 6 oczkami.

val dice = Dice(6)

3. Rzuć kostką, wywołując metodę roll(), i zapisz wynik w zmiennej o nazwie diceRoll.

val diceRoll = dice.roll()

4. Znajdź TextView, dzwoniąc pod numer findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

Zmienna diceRoll jest liczbą, ale TextView używa tekstu. Możesz użyć metody toString() na diceRoll, aby przekształcić go w ciąg znaków.

5. Przekonwertuj diceRoll na ciąg znaków i użyj go do zaktualizowania tekstu elementu resultTextView.

resultTextView.text = diceRoll.toString()

Metoda rollDice() wygląda tak:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Uruchom aplikację. Wynik rzutu kostką powinien się zmienić na inne wartości niż 6. Ponieważ jest to liczba losowa z zakresu od 1 do 6, czasami może się też pojawić wartość 6.

Hurra, jesteś świetny!

To normalne, że po wprowadzeniu zmian w różnych częściach kodu, aby aplikacja działała, kod może wyglądać nieco niechlujnie. Zanim jednak zamkniesz kod, wykonaj kilka prostych czynności porządkowych. Dzięki temu aplikacja będzie w dobrej kondycji i łatwiejsza w utrzymaniu.

Te nawyki są praktykowane przez profesjonalnych programistów Androida podczas pisania kodu.

Przewodnik po stylu Androida

Podczas pracy w zespołach idealnie byłoby, gdyby członkowie zespołu pisali kod w podobny sposób, aby zachować spójność kodu. Dlatego Android ma przewodnik po stylu pisania kodu na Androida – konwencje nazewnictwa, formatowanie i inne sprawdzone metody, których należy przestrzegać. Podczas pisania kodu na Androida przestrzegaj tych wytycznych: Kotlin Style Guide for Android Developers (Przewodnik po stylu Kotlin dla programistów Androida).

Poniżej znajdziesz kilka sposobów na dostosowanie się do przewodnika po stylu.

Oczyść kod

Skracanie kodu

Możesz skrócić kod, zmniejszając liczbę wierszy. Oto na przykład kod, który ustawia odbiornik kliknięć na elemencie Button.

rollButton.setOnClickListener {
    rollDice()
}

Instrukcje dla odbiornika kliknięć mają tylko 1 wiersz, więc możesz skrócić wywołanie metody rollDice() i nawiasy klamrowe do jednego wiersza. Wygląda to tak: Jeden wiersz zamiast trzech!

rollButton.setOnClickListener { rollDice() }

Ponowne formatowanie kodu

Teraz sformatuj kod, aby był zgodny z zalecanymi konwencjami formatowania kodu na Androidzie.

1. W klasie MainActivity.kt zaznacz cały tekst w pliku za pomocą skrótu klawiszowego Control+A w systemie Windows (lub Command+A na komputerze Mac). Możesz też otworzyć menu w Android Studio i kliknąć Edytuj > Zaznacz wszystko.
2. Po zaznaczeniu całego tekstu w pliku otwórz menu Android Studio Code > Reformat Code lub użyj skrótu klawiszowego Ctrl+Alt+L (lub Command+Option+L na komputerze Mac).

Spowoduje to zaktualizowanie formatowania kodu, w tym znaków białych, wcięć i innych elementów. Może się okazać, że nie zauważysz żadnych zmian, i to dobrze. Twój kod był już prawidłowo sformatowany.

Komentowanie kodu

Dodaj do kodu komentarze, aby opisać, co się w nim dzieje. W miarę jak kod staje się bardziej skomplikowany, ważne jest też, aby wyjaśnić, dlaczego został napisany w określony sposób. Jeśli wrócisz do kodu później, aby wprowadzić zmiany, działanie kodu może być nadal jasne, ale możesz nie pamiętać, dlaczego został napisany w taki sposób.

Zwykle dodaje się komentarz do każdej klasy (MainActivity i Dice to jedyne klasy w Twojej aplikacji) i każdej napisanej metody. Użyj symboli /** i **/ na początku i na końcu komentarza, aby poinformować system, że nie jest to kod. Te wiersze będą ignorowane podczas wykonywania kodu przez system.

Przykład komentarza do zajęć:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Przykład komentarza do metody:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

W metodzie możesz dodawać komentarze, jeśli ułatwi to zrozumienie kodu. Pamiętaj, że na początku komentarza możesz użyć symbolu //. Wszystko, co znajduje się po symbolu // w wierszu, jest traktowane jako komentarz.

Przykład 2 komentarzy w metodzie:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Poświęć trochę czasu na dodanie komentarzy do kodu.
2. Po wprowadzeniu wszystkich tych zmian w komentarzach i formatowaniu warto ponownie uruchomić aplikację, aby sprawdzić, czy nadal działa zgodnie z oczekiwaniami.

Zobacz kod rozwiązania, aby dowiedzieć się, jak można było dodać komentarze do kodu.

Kod rozwiązania do tego laboratorium znajduje się w projekcie i module pokazanych poniżej.

Adres URL kodu rozwiązania: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

Aby pobrać kod do tego laboratorium z GitHuba i otworzyć go w Android Studio, wykonaj te czynności:

1. Uruchom Android Studio.
2. W oknie Witamy w Android Studio kliknij Check out project from version control (Wyewidencjonuj projekt z systemu kontroli wersji).
3. Wybierz Git.

4. W oknie Sklonuj repozytorium wklej podany adres URL kodu w polu URL.
5. Kliknij przycisk Testuj, poczekaj i sprawdź, czy pojawi się zielony dymek z tekstem Połączenie zostało nawiązane.
6. Opcjonalnie zmień katalog na inny niż sugerowany domyślny.

7. Kliknij Sklonuj. Android Studio zacznie pobierać Twój kod.
8. W wyskakującym okienku Checkout from Version Control (Wyewidencjonuj z kontroli wersji) kliknij Yes (Tak).

9. Poczekaj, aż otworzy się Android Studio.
10. Wybierz odpowiedni moduł dla kodu początkowego lub rozwiązania codelabu.

11. Kliknij przycisk Uruchom , aby utworzyć i uruchomić kod.

Pomoc: jeśli pobrany kod nie ładuje się lub nie działa prawidłowo, zapoznaj się z Przewodnikiem po pomocy i rozwiązywaniu problemów.

• Dodaj Button w aplikacji na Androida za pomocą edytora układu.
• Zmodyfikuj klasę MainActivity.kt, aby dodać do aplikacji interaktywne działanie.
• Wyświetl Toast komunikat jako tymczasowe rozwiązanie, aby sprawdzić, czy wszystko jest w porządku.
• Ustaw detektor kliknięć dla elementu Button za pomocą funkcji setOnClickListener(), aby dodać działanie, które ma być wykonywane po kliknięciu elementu Button.
• Gdy aplikacja jest uruchomiona, możesz zaktualizować ekran, wywołując metody w TextView, Button lub innych elementach interfejsu w układzie.
• Dodaj komentarze do kodu, aby pomóc innym osobom, które go czytają, zrozumieć Twoje podejście.
• Przekształć kod i go uporządkuj.

• Button zajęcia
• Toast zajęcia
• TextView zajęcia
• Poradnik stylu dotyczący języka Kotlin dla programistów aplikacji na Androida

Uwaga: praktyki są opcjonalne. Dają one możliwość przećwiczenia tego, czego się nauczyłeś(-aś) w tym laboratorium.

Wykonaj te czynności:

1. Dodaj do aplikacji kolejną kostkę. Kliknięcie przycisku Rzuć powinno spowodować rzut 2 kostkami. Wyniki powinny być wyświetlane na ekranie w 2 różnych TextViews.

Sprawdź swoją pracę:

Gotowa aplikacja powinna działać bez błędów i wyświetlać 2 kostki.