Utwórz podstawową interaktywną aplikację do kościania

W ramach tego ćwiczenia utworzysz aplikację do uruchamiania kości do gry w Androida, w której użytkownicy będą mogli kliknąć Button, aby rzucić kostką. Wynik rzutowania wyświetli się na ekranie TextView.

Użyj Edytora układu w Android Studio, by utworzyć układ aplikacji, a następnie wpisz kod Kotlin, co się stanie, gdy klikniesz Button.

Wymagania wstępne

• Jak utworzyć i uruchomić aplikację „Hello, World!&quot” w Android Studio.
• Znam sposoby używania TextViews i ImageViews w aplikacji.
• Jak zmodyfikować atrybuty TextView w Edytorze układu.
• Jak wyodrębnić tekst do zasobu ciągu znaków, aby ułatwić tłumaczenie aplikacji i używanie ciągów tekstowych.
• Podstawy programowania w Kotlinu przedstawione w poprzednich ćwiczeniach z programowania.

Czego się nauczysz

• Jak dodać Button do aplikacji na Androida.
• Jak dodać działanie, gdy aplikacja Button kliknie.
• Otwieranie i modyfikowanie kodu Activity aplikacji.
• Jak wyświetlić wiadomość Toast.
• Jak zaktualizować treść obiektu TextView w czasie działania aplikacji.

Co stworzysz

• Aplikacja na rolkę kości do gry z elementem Button do rzucania kostką i aktualizuje tekst na ekranie zgodnie z wynikami rzutu kostką.

Wymagania

• Komputer z zainstalowaną aplikacją Android Studio.

Tak będzie wyglądać aplikacja po ukończeniu ćwiczeń z programowania.

Tworzenie pustego projektu aktywności

1. Jeśli w Android Studio masz już otwarty projekt, kliknij File > New > New Project..., aby otworzyć ekran Create New Project (Utwórz nowy projekt).
2. W sekcji Create New Project (Utwórz nowy projekt) utwórz nowy projekt Kotlin, korzystając z szablonu Pusta aktywność.
3. Wywołaj aplikację Roller Roller o minimalnym poziomie interfejsu API 19 (KitKat).

Ważne: jeśli nie wiesz, jak utworzyć nowy projekt w Android Studio, przeczytaj artykuł Tworzenie i uruchamianie pierwszej aplikacji na Androida.

4. Uruchom nową aplikację, a powinna wyglądać tak.
   

Otwieranie Edytora układu

1. W oknie Project (Projekt) kliknij dwukrotnie activity_main.xml (app > res > layout > activity_main.xml), by go otworzyć. Zobaczysz Edytora układu z samym „"Hello World" TextView” pośrodku aplikacji.
   

Następnie musisz dodać Button do swojej aplikacji. Button to element interfejsu (Androida), którego użytkownik może kliknąć, aby wykonać działanie.

W tym zadaniu dodasz Button poniżej "Hello World" TextView. TextView i Button znajdują się w obiekcie ConstraintLayout, którego typ to ViewGroup.

Views w elemencie ViewGroup jest uważany za element podrzędny elementu nadrzędnego ViewGroup. W przypadku Twojej aplikacji TextView i Button są uważane za elementy podrzędne elementów nadrzędnych ConstraintLayout.

Możesz teraz dodać Button jako element podrzędny istniejącego elementu ConstraintLayout w aplikacji.

Uwaga: podobnie jak w drzewie rodzinnym, w hierarchii widoku danych widoki nadrzędne mogą być wyświetleniami podrzędnymi, a widoki podrzędne mogą być elementami nadrzędnymi wobec innych dzieci.

Dodaj przycisk do układu

1. Przeciągnij ikonę Button z palety do widoku Projekt, umieszczając ją poniżej "Hello World" TextView.
   
2. Poniżej palety w drzewie komponentów sprawdź, czy Button i TextView są wymienione w katalogu ConstraintLayout (jako elementy podrzędne elementu ConstraintLayout).
3. Pojawił się błąd informujący, że Button nie jest ograniczony. Button znajduje się w obrębie obiektu ConstraintLayout, dlatego musisz ustawić ograniczenia w pionie i poziomie, aby go umieścić.

Umieść przycisk

W tym kroku dodasz pionowe ograniczenie od góry Button do dołu TextView. Spowoduje to umieszczenie Button poniżej elementu TextView.

1. W widoku Projekt na górze krawędzi Button naciśnij i przytrzymaj białe koło z niebieską obwódką. Przeciągnij wskaźnik, a pojawi się przy nim strzałka. Puść, gdy dotrzesz do dolnej krawędzi &samego świata „Hello World&quot” – TextView. Powoduje to ograniczenie układu i przesunięcie Button w górę tuż pod elementem TextView.
   
2. Spójrz na atrybuty po prawej stronie Edytora układu.
3. W widżecie ograniczeń sprawdź nowe ograniczenie układu ustawione na dole TextView, Góra →Dolna część Widoku tekstu (0dp). (0dp) oznacza marżę równą 0. Wystąpił też błąd dotyczący braku ograniczeń poziomych.
   
4. Dodaj poziome ograniczenie z lewej strony elementu Button po lewej stronie elementu nadrzędnego (ConstraintLayout).
5. Powtórz po prawej stronie, łącząc prawą krawędź elementu Button z prawą krawędzią ConstraintLayout. Wynik powinien wyglądać tak:

6. Jeśli opcja Button nadal jest zaznaczona, widżet do ograniczeń powinien wyglądać tak. Dodaliśmy 2 dodatkowe ograniczenia: Start → Rozpoczęcie (element nadrzędny (0 dp)) i Koniec → Koniec elementu nadrzędnego (0 dp). Oznacza to, że element Button jest wyśrodkowany w poziomie elementu nadrzędnego – ConstraintLayout.
   

7. Uruchom aplikację. Powinno wyglądać na zrzucie ekranu poniżej. Możesz kliknąć Button, ale nic nie zrobisz. Dalej!

Zmiana tekstu na przycisku

Zamierzasz wprowadzić jeszcze kilka zmian w interfejsie w Edytorze układu.

Zamiast wyświetlać etykietę Button, zmień ją na coś, co będzie wskazywać przycisk: "Roll".

1. W edytorze układu z wybraną opcją Button otwórz Atrybuty, zmień tekst na Rolka i naciśnij klawisz Enter (Return na Macu).

2. W drzewie komponentów obok Button pojawi się pomarańczowy trójkąt. Gdy najedziesz kursorem na trójkąt, pojawi się komunikat. Android Studio wykrył w kodzie aplikacji zakodowany na stałe ciąg znaków ("Roll"), i zaleca użycie zasobu ciągu.

Jeśli zakodujesz na stałe ciąg znaków, trudniej będzie go przetłumaczyć na inne języki, a trudno będzie ponownie używać ciągów tekstowych w różnych częściach aplikacji. Na szczęście Android Studio ma dla Ciebie automatyczną poprawkę.

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

Zostanie otwarty pełny komunikat ostrzegawczy.

4. Na dole wiadomości w sekcji Proponowana poprawka kliknij przycisk Napraw. (Może być konieczne przewinięcie strony w dół).
5. Otworzy się okno Wyodrębnianie zasobu. Aby wyodrębnić ciąg, należy wstawić tekst &Roll" tekst i utworzyć zasób ciągu znaków o nazwie roll w elemencie strings.xml (app > res > values > string.xml). Wartości domyślne są poprawne, więc kliknij OK.

6. Uwaga: w polu Atrybuty atrybut text dla Button ma teraz wartość @string/roll i odnosi się do utworzonego przed chwilą zasobu.
   

W widoku Projekt Button nadal powinien zawierać wartość Rolka.

Styl widoku tekstu

Tekst „Witaj, świecie!” jest dość mały, a wiadomość nie jest odpowiednia dla Twojej aplikacji. W tym kroku zastąpisz &górę światową komunikatorem numer, który pokaże zmienioną wartość i powiększy czcionkę, by była lepiej widoczna.

1. W Edytorze projektów wybierz TextView, aby jego atrybuty zostały wyświetlone w oknie Atrybuty.
2. Zmień textSize z TextView na 36sp, aby był duży i czytelny. Możliwe, że trzeba będzie przewinąć stronę, by znaleźć plik textSize.

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

Jednak bardzo pomocne jest sprawdzanie tekstu w TextView podczas edytowania układu i kodu aplikacji. Aby to zrobić, możesz dodać do elementu TextView tekst widoczny tylko w podglądzie układu, ale nie wtedy, gdy aplikacja jest uruchomiona.

.

4. Wybierz TextView w Drzewie komponentów.
5. W sekcji Common Attributes (Atrybuty typowe) znajdź atrybut text (poniżej), a pod nim kolejny atrybut text (ikona) z ikoną narzędzia. Atrybut text będzie wyświetlany użytkownikowi podczas działania aplikacji. Atrybut text z ikoną narzędzia to przeznaczonych dla Ciebie atrybut dewelopera.
6. Ustaw tekst narzędzia na „1” w elemencie TextView (aby udawać rzut kostką o wartości 1). Symbol „1” pojawi się tylko w Edytorze projektów w Android Studio, ale nie pojawi się po uruchomieniu aplikacji na rzeczywistym urządzeniu lub w emulatorze.

Pamiętaj, że ten tekst jest wyświetlany tylko przez deweloperów aplikacji, więc nie musisz tworzyć zasobu ciągu znaków.

7. Spójrz na aplikację w podglądzie. Wyświetla się &1.

8. Uruchom aplikację. Tak wygląda aplikacja, gdy działa w emulatorze. Nie wyświetla się &1. Jest to prawidłowe działanie.

Świetnie, zmiana układu została zakończona.

Masz aplikację z przyciskiem, ale po kliknięciu przycisku nic się nie dzieje. Aby to zmienić, musisz napisać kod Kotlina, który rzuca kostką i aktualizuje ekran po naciśnięciu przycisku.

Aby wprowadzić tę zmianę, warto lepiej poznać strukturę aplikacji na Androida.

Activity to okno, w którym aplikacja rysuje swój interfejs. Zazwyczaj Activity zajmuje cały ekran uruchomionej aplikacji. Każda aplikacja ma co najmniej jedną aktywność. Aktywność najwyższego poziomu lub pierwsza jest często nazywana MainActivity i jest udostępniana przez szablon projektu. Na przykład, gdy użytkownik przewija listę aplikacji na urządzeniu i klika ikonę aplikacji, „Android Roller” uruchomi aplikację MainActivity.

W kodzie MainActivity musisz podać szczegółowe informacje o układzie Activity i sposobie interakcji z użytkownikiem.

• W aplikacji urodzinowej jest jeden element Activity, który wyświetla wiadomość i zdjęcie urodzinowe.
• W aplikacji kości kości jest jeden element Activity, który wyświetla właśnie utworzony układ TextView i Button.

Bardziej złożone aplikacje mogą mieć kilka ekranów i więcej niż jeden Activity. Każdy element Activity ma określony cel.

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

Otwórz plik MainActivity.kt

Dodasz kod, aby odpowiedzieć na przycisk w MainActivity. Aby to zrobić prawidłowo, musisz dowiedzieć się więcej o kodzie MainActivity, który jest już w Twojej aplikacji.

1. Przejdź do pliku MainActivity.kt i otwórz go (app > java > com.example.diceroller > MainActivity.kt). Poniżej znajdziesz informacje, które powinny się tam znaleźć. Jeśli widzisz import..., kliknij ..., aby rozwinąć importowanie.

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 znać każdego słowa z powyższego kodu, ale musisz wiedzieć, do czego służy. Im częściej korzystasz z kodu Androida, tym lepiej go znasz i im więcej go rozumiesz, tym lepiej.

2. Spójrz na kod Kotlina dla klasy MainActivity określonego za pomocą słowa kluczowego class i nazwy.

class MainActivity : AppCompatActivity() {
    ...
}

3. Uwaga: w MainActivity nie ma funkcji main().
   
   Wcześniej dowiedzieliśmy się, że każdy program w Kotlin musi mieć funkcję main(). Aplikacje na Androida działają inaczej. Zamiast wywoływać funkcję main(), gdy Android jest otwierany po raz pierwszy, system Android wywołuje metodę onCreate() MainActivity.
   
4. Znajdź metodę onCreate() podobną do poniższego kodu.

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

Więcej informacji o override znajdziesz w późniejszym ćwiczeniu programowania (na razie nie musisz się tym na razie martwić). Pozostała część metody onCreate() konfiguruje element MainActivity za pomocą kodu z importów i przez układ początkowy z setContentView().

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

Android udostępnia ramę wielu klas, która ułatwia pisanie aplikacji na Androida, ale musi dokładnie wiedzieć, o którą klasę Ci chodzi. Możesz określić klasę, która ma być używana w kodzie, używając instrukcji import. Na przykład klasa Button jest zdefiniowana w android.widget.Button.

Włącz automatyczne importowanie

Dodanie większej liczby instrukcji import może być bardzo pracochłonne. Na szczęście Android Studio ułatwia wybór właściwych importów podczas korzystania z zajęć dostarczonych przez inne osoby. W tym kroku skonfigurujesz Android Studio tak, by w miarę możliwości automatycznie dodawała się możliwość importowania, a w przypadku kodu – usuwała nieużywane importy z kodu.

1. W Android Studio otwórz ustawienia, klikając kolejno Plik > Inne ustawienia > Preferencje dotyczące nowych projektów.
2. Rozwiń sekcję Inne ustawienia > Autoimport. W sekcjach Java i Kotlin zaznacz pola Dodaj jednoznaczne zaimportowane na bieżąco i Optymalizuj importy w czasie rzeczywistym (w bieżącym projekcie). Pamiętaj, że w każdej sekcji znajdują się 2 pola wyboru.
   
   Ustawienia jednoznaczne importowanie określają, że Android Studio automatycznie dodaje deklarację importu, o ile może określić, której z nich użyć. Zgodnie z ustawieniami optymalizowania importu Android Studio ma usuwać wszystkie importowanie, które nie jest wykorzystywane przez Twój kod.
   
3. Zapisz zmiany i zamknij ustawienia, naciskając OK.

Skoro wiesz już więcej na temat obiektu MainActivity, możesz zmodyfikować aplikację, tak aby kliknięcie przycisku Button mogło coś zrobić na ekranie.

Wyświetl wiadomość po kliknięciu przycisku

W tym kroku możesz określić, że po kliknięciu przycisku u dołu ekranu wyświetla się krótka wiadomość.

1. Po wywołaniu setContentView() dodaj do metody onCreate() ten kod: Metoda findViewById() znajduje właściwość Button w układzie. R.id.button to identyfikator zasobu Button, który jest unikalnym identyfikatorem tego zasobu. Kod zapisuje odwołanie do obiektu Button w zmiennej o nazwie rollButton, a nie do samego obiektu Button.

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

Uwaga: Android automatycznie przypisuje numery identyfikatorów do zasobów w aplikacji. Na przykład przycisk Roll ma identyfikator zasobu, a ciąg tekstowy przycisku zawiera też identyfikator zasobu. Identyfikatory zasobów mają format R.<type>.<name>, na przykład R.string.roll. W przypadku identyfikatorów View <type> jest id, na przykład R.id.button.

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

Ważne: podczas przypisywania obiektu do zmiennej Kotlin nie kopiuje za każdym razem całego obiektu, a jedynie zapisuje odwołanie do tego obiektu. Można je traktować jako numery ubezpieczenia społecznego lub inne numery identyfikacyjne (osobiste): ta liczba odnosi się do osoby, ale nie do samej osoby. Skopiowany numer nie wystarczy.

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ł instrukcję import do Button.
   Zwróć uwagę, że teraz są 3 importy importu – trzeci został dodany automatycznie.
   

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

Uwaga: jeśli automatyczne importowanie nie działa, Button będzie wyróżnione na czerwono. Możesz zaimportować ręcznie, umieszczając kursor tekstowy w słowie Button, a następnie naciskając Alt+Enter (Option+Enter na Macu).

Następnie musisz powiązać kod z elementem Button, by go uruchomić po kliknięciu Button. Detektor kliknięć to fragment kodu, który analizuje, co się dzieje po kliknięciu. Można go potraktować jak kod, który po prostu „słucha” i „odsłuchuje”. W tym przypadku powinien on kliknąć Button.

3. Aby utworzyć detektor kliknięć, użyj obiektu rollButton i wywołaj metodę setOnClickListener().

rollButton.setOnClickListener {
}

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

W nawiasach klamrowych podajesz instrukcje, co ma się stać po naciśnięciu przycisku. Na razie aplikacja wyświetla Toast, czyli krótki komunikat wyświetlany użytkownikowi.

4. Utwórz Toast z tekstem "Dice Rolled!", dzwoniąc do Toast.makeText().

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

5. Następnie wywołaj metodę Toast, by się wyświetlała, wywołując metodę show().

toast.show()

Tak wygląda klasa MainActivity, a wyrażenia package i import nadal znajdują się u góry 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 dwa wiersze detektora kliknięć w jeden wiersz bez zmiennej. Jest to typowy wzorzec, który może występować w innym kodzie.

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

6. Uruchom aplikację i kliknij przycisk Rolka. Komunikat o wyświetleniu komunikatu pojawi się u dołu ekranu i po krótkim czasie zniknie.

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

Aktualizacja funkcji TextView po kliknięciu przycisku

Zamiast wyświetlać tymczasowy komunikat Toast, wpisz kod, który zaktualizuje TextView na ekranie, gdy klikniesz przycisk Rolka.

1. Wróć do activity_main.xml (app > res > układ >activity_main.xml)
2. Kliknij TextView.
3. Pamiętaj, że atrybut id ma wartość textView.
   
4. Otwórz MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. Usuń wiersze kodu, które tworzą i wyświetlają Toast.

rollButton.setOnClickListener {
  
}

6. Zamiast tego utwórz nową zmienną o nazwie resultTextView do przechowywania TextView.
7. Za pomocą atrybutu findViewById() znajdź textView w układzie za pomocą jego identyfikatora i zapisz odwołanie.

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

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

resultTextView.text = "6"

Działa to podobnie jak w przypadku ustawienia tekstu w sekcji Atrybuty, ale teraz znajduje się on w kodzie, więc tekst powinien znajdować się w cudzysłowie. Jeśli wyraźnie to wskazuje, że TextView ma obecnie wartość 6. Dodasz kod, aby rzucić kostką i zobaczyć różne wartości w kolejnym zadaniu.

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. Powinien zmienić się TextView na 6&quot.

Jedyne, czego brakuje, to rzut kostką. Możesz używać klasy Dice z poprzedniego ćwiczenia z programowania, które obsługuje rzut kostką.

Dodaj kości do gry

1. Po ostatnim nawiasie klamrowym w klasie MainActivity utwórz klasę Dice za pomocą metody roll().

class Dice(val numSides: Int) {

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

2. Zwróć uwagę na to, że Android Studio podkreśla ciąg znaków numSides falowaną szarą linią. (Może to chwilę potrwać).
3. Najedź kursorem na ikonę numSides. Wyświetli się wyskakujące okienko z napisem Property 'numSides' will be private.
   

Jeśli oznaczysz element numSides jako private, będzie on dostępny tylko w klasie Dice. Ponieważ jedynym kodem, który będzie używany przez numSides, jest klasa Dice, możesz ustawić ten argument private dla klasy Dice. W następnej jednostce dowiesz się więcej o zmiennych private i public.

4. Wprowadź proponowane rozwiązanie w Android Studio, klikając Ustaw 'numSides' 'private'.

Utwórz metodę rollDice()

Teraz, gdy udało Ci się dodać klasę Dice do swojej aplikacji, musisz zaktualizować aplikację MainActivity, by korzystać z niej. Aby lepiej uporządkować kod, wykorzystaj logikę rzucania kostką do jednej funkcji.

1. Zastąp kod w detektorze kliknięć ustawionym na „6” z wywołaniem rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Ponieważ definicja rollDice() nie jest jeszcze zdefiniowana, Android Studio oznacza błąd, a rollDice() ma kolor czerwony.
3. Gdy najedziesz kursorem na rollDice(), Android Studio wyświetli problem i wskaże możliwe rozwiązania.

4. Kliknij Więcej działań..., aby wyświetlić menu. Android Studio daje Ci większe możliwości.

Wskazówka: jeśli trudno jest najechać kursorem na ikonę, a następnie kliknij Więcej czynności..., możesz kliknąć rollDice() i nacisnąć Alt+Enter (Option+Enter na Macu), by otworzyć menu.

5. Wybierz Utwórz funkcję 'rollDice'. Android Studio tworzy pustą definicję funkcji wewnątrz MainActivity.

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

Utwórz nową instancję obiektu Dice

W tym kroku utworzysz metodę rollDice() i rzuć kostką, a następnie wyświetlimy wynik w narzędziu TextView.

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

val dice = Dice(6)

3. Gry z kośćmi można wywołać, wywołując metodę roll() i zapisując wynik w zmiennej o nazwie diceRoll.

val diceRoll = dice.roll()

4. Aby znaleźć TextView, zadzwoń 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() w systemie diceRoll, aby przekonwertować go na ciąg znaków.

5. Przekonwertuj diceRoll na ciąg znaków i użyj go do aktualizacji 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 powinien być inny niż 6. Jest to losowa liczba od 1 do 6, dlatego czasami może się pojawić wartość 6.

Hurra!

Gdy dostosujesz części w taki sposób, aby aplikacja działała, Twój kod może wyglądać na dość skomplikowany. Jednak przed odejściem od kodu wykonaj kilka prostych czynności sprzątania. Dzięki temu aplikacja będzie dobrze działać i będzie łatwiej ją utrzymać.

Takie nawyki są wykonywane przez profesjonalnych programistów Androida podczas pisania kodu.

Przewodnik po stylu na Androida

Pracując w zespole, idealnie nadaje się dla członków zespołu do pisania kodu w podobny sposób. Dzięki temu spójność kodu jest taka sama. Dlatego Android ma przewodnikiem stylu, jak pisać kod na Androida – konwencje nazewnictwa, formatowanie i inne sprawdzone metody. Podczas pisania kodu na Androida postępuj zgodnie z tymi wskazówkami: Przewodnik dla programistów aplikacji na Androida Kotlin.

Poniżej przedstawiamy kilka sposobów zachowania zgodności z przewodnikiem dotyczącym stylu.

Czyszczenie kodu

Skróć kod

Możesz skrócić swój kod, składając go w krótszą liczbę wierszy. Oto kod, który ustawia odbiornik kliknięć na Button.

rollButton.setOnClickListener {
    rollDice()
}

Instrukcje dla detektora kliknięć mają tylko 1 wiersz, więc możesz skonwertować wywołanie metody rollDice() i nawiasy klamrowe w jednym wierszu. Tak to wygląda. Jeden wiersz zamiast trzech.

rollButton.setOnClickListener { rollDice() }

Zmiana formatu kodu

Teraz trzeba będzie ponownie sformatować kod, aby był zgodny z zalecanymi konwencjami formatowania kodu na urządzeniach z Androidem.

1. W klasie MainActivity.kt zaznacz cały tekst w pliku, używając skrótu klawiszowego Control+A w systemie Windows (lub Command+A na Macu). Możesz też przejść do menu w Android Studio Edytuj > Wybierz wszystko.
2. Po zaznaczeniu całego tekstu w pliku przejdź do menu Android Studio Kod > Zmień format kodu lub użyj skrótu klawiszowego Ctrl+Alt+L (lub Command+Option+L na Macu).

Zaktualizuje to formatowanie kodu, m.in. odstępy i wcięcia. Możesz nie zauważyć żadnych zmian, a to dobrze. Twój kod był już poprawnie sformatowany.

Skomentuj kod

Dodaj kilka komentarzy do kodu, aby opisać, co się dzieje w napisanym kodzie. Kod jest bardziej skomplikowany, dlatego warto pamiętać o tym, dlaczego powstał kod, który zadziałał tak, jak robisz. Jeśli później wrócisz do kodu, aby go zmienić, możesz sprawdzić, co na nim zrobił, ale nie pamiętasz, dlaczego tak się stało.

Często zdarza się, że komentarz jest dodawany do wszystkich zajęć (MainActivity i Dice to jedyne zajęcia w aplikacji) i w każdej metodzie, którą piszesz. Użyj symboli /** i **/ na początku i końcu komentarza, aby poinformować system, że nie jest to kod. Te wiersze są 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 dotyczącego metody:

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

W obrębie metody możesz dodawać komentarze, które pomogą czytelnikom Twojego kodu. Pamiętaj, że możesz użyć symbolu // na początku komentarza. Wszystko po symbolu // w wierszu jest uważane za 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. Możesz poświęcić trochę czasu na dodanie komentarzy do swojego kodu.
2. Po wprowadzeniu wszystkich zmian w komentarzach i formatowaniu warto ponownie uruchomić aplikację i upewnić się, że działa prawidłowo.

Zapoznaj się z kodem rozwiązania, aby mieć możliwość skomentowania kodu.

Kod rozwiązania tego ćwiczenia z programowania znajdziesz w projekcie i module przedstawionym 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 z ćwiczenia z programowania na GitHubie i otworzyć go w Android Studio, wykonaj te czynności.

1. Włącz Android Studio.
2. W oknie Witamy w Android Studio kliknij Sprawdź projekt na podstawie kontroli wersji.
3. Wybierz Git.

4. W oknie Kopiowanie repozytorium wklej podany adres URL kodu w polu URL.
5. Kliknij przycisk Przetestuj, poczekaj, aż pojawi się zielony dymek z informacją Połączenie uda się.
6. Opcjonalnie zmień Katalog na inny niż sugerowane wartości domyślne.

7. Kliknij Kopiuj. Android Studio zacznie pobierać kod.
8. W wyskakującym okienku Kontrola wersji kliknij Tak.

9. Poczekaj na otwarcie Android Studio.
10. Wybierz odpowiedni moduł dla początków programowania lub kodu rozwiązania.

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

Pomoc: jeśli pobrany kod nie wczytuje się lub nie uruchamia się prawidłowo, zapoznaj się z przewodnikiem pomocy i rozwiązywania problemów.

• Button w aplikacji na Androida przy użyciu Edytora układu.
• Zmodyfikuj klasę MainActivity.kt, aby dodać interaktywne działanie do aplikacji.
• Wyświetl wiadomość w trybie Toast jako tymczasowe rozwiązanie pozwalające potwierdzić, że jesteś na dobrej drodze.
• Ustaw odbiornik Button na setOnClickListener(), by dodać zachowanie po kliknięciu Button.
• Gdy aplikacja jest uruchomiona, możesz zaktualizować ekran, wywołując metody w TextView, Button lub innych elementach interfejsu w układzie.
• Skomentuj kod, aby ułatwić innym osobom czytającym Twój kod zrozumienie Twojego podejścia.
• Ponownie sformatuj kod i wyczyść kod.

• Klasa Button
• Klasa Toast
• Klasa TextView
• Poradnik Kotlin dla programistów aplikacji na Androida

Uwaga: ćwiczenia nie są obowiązkowe. Dzięki nim możesz poćwiczyć zdobytą wiedzę w ramach ćwiczeń z programowania.

Wykonaj te czynności:

1. Dodaj kolejną kości do aplikacji. Kliknięcie przycisku Rzuć powinno rzucić kostką 2. Wyniki powinny być wyświetlane w 2 różnych polach (TextViews) na ekranie.

Sprawdzanie zadań:

Gdy aplikacja będzie gotowa, powinna działać bez błędów i wyświetlać 2 kostki.