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

Android Kotlin Fundamentals 02.2: Add user interactivity

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.

Co warto wiedzieć

Tworzenie podstawowej aplikacji na Androida w Kotlinie.
uruchamianie aplikacji na Androida w emulatorze lub na urządzeniu;
Tworzenie układu liniowego za pomocą edytora układu w Android Studio .
Utwórz prostą aplikację, która korzysta z LinearLayout, TextView, ScrollView i przycisku z procedurą obsługi kliknięcia.

Czego się nauczysz

Jak uzyskać dane wejściowe od użytkownika za pomocą widoku EditText.
Jak ustawić tekst w widoku TextView, używając tekstu z widoku EditText.
Jak pracować z View i ViewGroup.
Jak zmienić widoczność View.

Jakie zadania wykonasz

Dodaj interaktywność do aplikacji AboutMe, która pochodzi z poprzednich zajęć z programowania.
Dodaj EditText, aby użytkownik mógł wpisać tekst.
Dodaj Button i wdroż jego funkcję obsługi kliknięcia.

W tym module rozszerzysz aplikację AboutMe, aby dodać interakcję z użytkownikiem. Dodaj pole pseudonimu, przycisk GOTOWE i widok tekstu, w którym będzie wyświetlany pseudonim. Gdy użytkownik wpisze pseudonim i kliknie przycisk GOTOWE, widok tekstu zostanie zaktualizowany i wyświetli wpisany pseudonim. Użytkownik może ponownie zaktualizować pseudonim, klikając widok tekstu.

Aplikacja AboutMe

W tym zadaniu dodasz pole wejściowe EditText, aby umożliwić użytkownikowi wpisanie pseudonimu.

Krok 1. Pierwsze kroki

Jeśli nie masz jeszcze aplikacji AboutMe z poprzednich zajęć z programowania, pobierz kod startowy AboutMeInteractive-Starter. To ten sam kod, który został użyty w poprzednim laboratorium.
Otwórz projekt AboutMeInteractive-Starter w Android Studio.
Uruchom aplikację. Zobaczysz widok tekstu z nazwą, obraz gwiazdy i długi segment tekstu w widoku przewijania.

Zwróć uwagę, że użytkownik nie może zmienić żadnego tekstu.

Aplikacje są ciekawsze, jeśli użytkownik może z nimi wchodzić w interakcje, np. wpisywać tekst. Aby akceptować wprowadzanie tekstu, Android udostępnia widżet interfejsu o nazwie pole tekstowe. Pole edycji tekstu definiuje się za pomocą elementu EditText, który jest podklasą elementu TextView. Pole tekstowe umożliwia użytkownikowi wpisywanie i modyfikowanie tekstu (patrz zrzut ekranu poniżej).

Krok 2. Dodaj element EditText

W Android Studio otwórz plik układu activity_main.xml na karcie Projekt.
W panelu Paleta kliknij Tekst.

U góry listy elementów tekstowych w panelu Paleta wyświetla się Ab TextView, czyli TextView. Poniżej Ab TextView znajduje się kilka EditTextwidoków

.W panelu Paleta zwróć uwagę, że ikona TextView zawiera litery Ab bez podkreślenia. Ikony EditText pokazują jednak podkreślony tekst Ab . Podkreślenie oznacza, że widok można edytować.

W przypadku każdego z EditText widoków Android ustawia różne atrybuty, a system wyświetla odpowiednią metodę wprowadzania danych (np. klawiaturę ekranową).
Przeciągnij element PlainText do Component Tree i umieść go pod elementem name_text i nad elementem star_image.
W panelu Atrybuty ustaw te atrybuty w widoku EditText.

Atrybut	Wartość
`id`	`nickname_edit`
`layout_width`	`match_parent` (wartość domyślna)
`layout_height`	`wrap_content` (wartość domyślna)

Uruchom aplikację. Nad obrazem gwiazdy zobaczysz pole edycji tekstu z domyślnym tekstem „Name” (Nazwa).

W tym zadaniu nadajesz styl EditText, dodając podpowiedź, zmieniając wyrównanie tekstu, zmieniając styl na NameStyle i ustawiając typ danych wejściowych.

Krok 1. Dodaj tekst podpowiedzi

Dodaj nowy ciąg znaków do pliku string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

W panelu Atrybuty ustaw te atrybuty w widoku EditText:

Atrybut	Wartość
`style`	`NameStyle`
`textAlignment`	(środek)
`hint`	`@string/what_is_your_nickname`

W panelu Atrybuty usuń wartość Name z atrybutu text. Wartość atrybutu text musi być pusta, aby wyświetlać podpowiedź.

Krok 2. Ustaw atrybut inputType

Atrybut inputType określa typ danych wejściowych, które użytkownicy mogą wpisywać w widoku EditText. System Android wyświetli odpowiednie pole do wprowadzania tekstu i klawiaturę ekranową w zależności od ustawionego typu wprowadzania.

Aby wyświetlić wszystkie możliwe typy danych wejściowych, w panelu Atrybuty kliknij pole inputType lub kliknij trzy kropki ... obok pola. Otworzy się lista wszystkich typów danych wejściowych, których możesz użyć. Obecnie aktywny typ danych wejściowych będzie zaznaczony. Możesz wybrać więcej niż 1 rodzaj danych wejściowych.

W przypadku haseł użyj na przykład wartości textPassword. Pole tekstowe ukrywa dane wpisywane przez użytkownika.

W przypadku numerów telefonów użyj wartości phone. Wyświetla się klawiatura numeryczna, a użytkownik może wpisywać tylko cyfry.

Ustaw typ danych wejściowych dla pola pseudonimu:

Ustaw atrybut inputType na textPersonName w przypadku nickname_editedytowania tekstu.
W panelu Drzewo komponentów zobaczysz ostrzeżenie autoFillHints. To ostrzeżenie nie dotyczy tej aplikacji i wykracza poza zakres tych ćwiczeń, więc możesz je zignorować. (Jeśli chcesz dowiedzieć się więcej o autouzupełnianiu, przeczytaj artykuł Optymalizowanie aplikacji pod kątem autouzupełniania).
W panelu Atrybuty sprawdź wartości tych atrybutów widoku EditText:

Atrybut	Wartość
`id`	`nickname_edit`
`layout_width`	`match_parent` (wartość domyślna)
`layout_height`	`wrap_content` (wartość domyślna)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(pusty)

Button to element interfejsu, który użytkownik może kliknąć, aby wykonać działanie. Przycisk może składać się z tekstu, ikony lub tekstu i ikony.

W tym zadaniu dodasz przycisk GOTOWE, który użytkownik kliknie po wpisaniu pseudonimu. Przycisk przełącza widok EditText na widok TextView, w którym wyświetlany jest pseudonim. Aby zaktualizować pseudonim, użytkownik może kliknąć widok TextView.

Krok 1. Dodaj przycisk GOTOWE

Przeciągnij przycisk z panelu Paleta do Drzewa komponentów. Umieść przycisk pod nickname_editedytowanym tekstem

.
Utwórz nowy zasób tekstowy o nazwie done. Nadaj ciągowi znaków wartość Done,

<string name="done">Done</string>

W panelu Atrybuty ustaw te atrybuty w nowo dodanym widoku Button:

Atrybut	Wartości
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

Atrybut layout_gravity wyśrodkowuje widok w układzie nadrzędnym LinearLayout.

Zmień styl na Widget.AppCompat.Button.Colored, czyli jeden ze wstępnie zdefiniowanych stylów dostępnych w Androidzie. Styl możesz wybrać w menu lub w oknie Zasoby.

Ten styl zmienia kolor przycisku na kolor akcentu, colorAccent. Kolor uzupełniający jest zdefiniowany w pliku res/values/colors.xml.

Plik colors.xml zawiera domyślne kolory aplikacji. Możesz dodawać nowe zasoby kolorów lub zmieniać istniejące zasoby kolorów w projekcie w zależności od wymagań aplikacji.

Przykładowy plik colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Krok 2. Nadaj styl przyciskowi GOTOWE

W panelu Atrybuty dodaj górny margines, wybierając Layout_Margin > Top (Margines układu > Górny). Ustaw górny margines na layout_margin, który jest zdefiniowany w pliku dimens.xml.
W menu ustaw atrybut fontFamily na roboto.
Przejdź na kartę Tekst i sprawdź wygenerowany kod XML dla nowo dodanego przycisku.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Krok 3. Zmień zasób koloru

W tym kroku zmienisz kolor uzupełniający przycisku, aby pasował do paska aplikacji aktywności.

Otwórz res/values/colors.xml i zmień wartość colorAccent na #76bf5e.

<color name="colorAccent">#76bf5e</color>

Kolor odpowiadający kodowi szesnastkowemu możesz zobaczyć na lewym marginesie edytora plików.

Zwróć uwagę na zmianę koloru przycisku w edytorze projektu.

Uruchom aplikację. Pod polem edycji tekstu powinien być widoczny przycisk GOTOWE.

Gdy użytkownik wpisze pseudonim i kliknie przycisk GOTOWE, pseudonim pojawi się w widoku TextView. W tym zadaniu dodasz widok tekstu z kolorowym tłem. W widoku tekstowym nad symbolem star_image wyświetlany jest pseudonim użytkownika.

Krok 1. Dodaj widok TextView dla pseudonimu

Przeciągnij widok tekstu z panelu Paleta do Drzewa komponentów. Umieść widok tekstu poniżej elementu done_button i powyżej elementu star_image.
W panelu Atrybuty ustaw te atrybuty nowego widoku TextView:

Atrybut	Wartość
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(środek)

Krok 2. Zmień widoczność elementu TextView

Widoki w aplikacji możesz wyświetlać lub ukrywać za pomocą atrybutu visibility. Ten atrybut przyjmuje jedną z 3 wartości:

visible: widok jest widoczny.
Invisible: ukrywa widok, ale nadal zajmuje on miejsce w układzie.
gone: ukrywa widok, który nie zajmuje miejsca w układzie.

W panelu Atrybuty ustaw visibility widoku tekstu nickname_text na gone, ponieważ nie chcesz, aby aplikacja początkowo wyświetlała ten widok tekstu.

Zauważ, że gdy zmieniasz atrybut w panelu Atrybuty, widok nickname_text znika z edytora projektu. Widok jest ukryty w podglądzie układu.
Zmień wartość atrybutu text widoku nickname_text na pusty ciąg tekstowy.

Wygenerowany kod XML dla tego TextView powinien wyglądać podobnie do tego:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

Podgląd układu powinien wyglądać mniej więcej tak:

Obsługa kliknięcia obiektu Button (lub dowolnego widoku) określa działanie, które ma zostać wykonane po kliknięciu przycisku (widoku). Funkcja obsługująca zdarzenie kliknięcia powinna być zaimplementowana w Activity, który zawiera układ z przyciskiem (widok).

Słuchacz kliknięć ma zwykle taki format, gdzie przekazany widok to widok, który został kliknięty lub dotknięty.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Funkcję detektora kliknięć możesz dołączyć do zdarzeń kliknięcia przycisku na 2 sposoby:

W układzie XML możesz dodać atrybut android:onClick do elementu <Button>. Na przykład:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

LUB

Możesz to zrobić programowo w czasie działania w onCreate() Activity, wywołując setOnClickListener. Na przykład:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

W tym zadaniu dodasz programowo detektor kliknięć dla elementu done_button. Detektor kliknięć dodajesz w odpowiedniej aktywności, czyli MainActivity.kt.

Funkcja nasłuchiwania kliknięć o nazwie addNickname wykona te czynności:

Pobierz tekst z nickname_edit edytuj tekst.
Ustaw tekst w widoku tekstu nickname_text.
Ukryj pole edycji tekstu i przycisk.
Wyświetl pseudonim TextView.

Krok 1. Dodaj odbiornik kliknięć

W Android Studio w folderze java otwórz plik MainActivity.kt.
W pliku MainActivity.kt w klasie MainActivity dodaj funkcję o nazwie addNickname. Uwzględnij parametr wejściowy o nazwie view typu View. Parametr view to View, na którym wywoływana jest funkcja. W tym przypadku view będzie instancją przycisku GOTOWE.

private fun addNickname(view: View) {
}

W funkcji addNickname użyj findViewById(), aby uzyskać odwołanie do nickname_edit edytowanego tekstu i nickname_text widoku tekstu.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

Ustaw tekst w nicknameTextView na tekst wpisany przez użytkownika w editText, pobierając go z właściwości text.

nicknameTextView.text = editText.text

Ukryj widok pseudonimu EditText, ustawiając właściwość visibility elementu editText na View.GONE.

W poprzednim zadaniu zmieniliśmy właściwość visibility za pomocą edytora układu. Tutaj robisz to samo programowo.

editText.visibility = View.GONE

Ukryj przycisk GOTOWE, ustawiając właściwość visibility na View.GONE. Odwołanie do przycisku masz już jako parametr wejściowy funkcji, view.

view.visibility = View.GONE

Na końcu funkcji addNickname ustaw widoczność widoku TextView, ustawiając jego właściwość visibility na View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Krok 2. Dołącz odbiornik kliknięć do przycisku GOTOWE

Teraz, gdy masz już funkcję, która określa działanie, jakie ma zostać wykonane po kliknięciu przycisku GOTOWE, musisz dołączyć ją do widoku Button.

W MainActivity.kt na końcu funkcji onCreate() uzyskaj odwołanie do widoku DONE Button. Użyj funkcji findViewById() i wywołaj setOnClickListener. Przekaż odwołanie do funkcji detektora kliknięć addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

W powyższym kodzie it odnosi się do done_button, czyli widoku przekazanego jako argument.

Uruchom aplikację, wpisz pseudonim i kliknij przycisk GOTOWE. Zwróć uwagę, że pole tekstowe i przycisk edycji zostały zastąpione widokiem tekstu pseudonimu.

Zwróć uwagę, że nawet po naciśnięciu przez użytkownika przycisku GOTOWE klawiatura jest nadal widoczna. Jest to zachowanie domyślne.

Krok 3. Ukryj klawiaturę

W tym kroku dodasz kod, który ukryje klawiaturę po kliknięciu przez użytkownika przycisku GOTOWE.

W pliku MainActivity.kt na końcu funkcji addNickname() dodaj ten kod. Więcej informacji o działaniu tego kodu znajdziesz w dokumentacji hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

Ponownie uruchom aplikację. Po kliknięciu GOTOWE klawiatura zostanie ukryta.

Po kliknięciu przycisku GOTOWE użytkownik nie może zmienić pseudonimu. W następnym zadaniu zwiększysz interaktywność aplikacji i dodasz funkcję, która umożliwi użytkownikowi aktualizowanie pseudonimu.

W tym zadaniu dodasz do widoku tekstu pseudonimu odbiornik kliknięć. Słuchacz kliknięć ukrywa widok tekstu pseudonimu, wyświetla tekst do edycji i przycisk GOTOWE.

Krok 1. Dodaj odbiornik kliknięć

W MainActivity dodaj funkcję nasłuchiwania kliknięć o nazwie updateNickname(view: View) dla widoku tekstu pseudonimu.

private fun updateNickname (view: View) {
}

W funkcji updateNickname uzyskaj odwołanie do nickname_edit edytowania tekstu i odwołanie do przycisku GOTOWE . Używaj metody findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

Na końcu funkcji updateNickname dodaj kod, który wyświetli pole do edycji tekstu i przycisk GOTOWE oraz ukryje widok tekstu.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

W pliku MainActivity.kt na końcu funkcji onCreate() wywołaj funkcję setOnClickListener w widoku tekstu nickname_text. Przekaż odwołanie do funkcji detektora kliknięć, czyli updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

Uruchom aplikację. Wpisz pseudonim, kliknij przycisk GOTOWE, a potem kliknij widok pseudonimu TextView. Widok pseudonimu zniknie, a tekst do edycji i przycisk GOTOWE staną się widoczne.

Zwróć uwagę, że domyślnie widok EditText nie jest aktywny, a klawiatura nie jest widoczna. Użytkownikowi trudno jest się zorientować, że widok tekstu z pseudonimem jest klikalny. W następnym zadaniu dodasz fokus i styl do widoku tekstu pseudonimu.

Krok 2. Ustaw fokus na widok EditText i wyświetl klawiaturę

Na końcu funkcji updateNickname ustaw fokus na widok EditText. używaj metody requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

Na końcu funkcji updateNickname dodaj kod, który sprawi, że klawiatura będzie widoczna.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Krok 3. Dodaj kolor tła do widoku TextView pseudonimu

Ustaw kolor tła widoku tekstu nickname_text na @color/colorAccent i dodaj do niego dolny odstęp wewnętrzny o wartości @dimen/small_padding. Te zmiany będą dla użytkownika wskazówką, że widok tekstu z pseudonimem można kliknąć.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

Uruchom ostateczną wersję aplikacji. Pole do edycji tekstu jest aktywne, w polu do edycji tekstu wyświetla się pseudonim, a widok tekstu pseudonimu ma zastosowany styl.

Teraz pokaż znajomemu swoją interaktywną aplikację AboutMe.

Projekt Android Studio: AboutMeInteractive

Edytor układu w Android Studio to edytor projektowania wizualnego. Za pomocą Edytora układu możesz tworzyć układ aplikacji, przeciągając elementy interfejsu do układu.
EditText to element interfejsu, który umożliwia użytkownikowi wpisywanie i modyfikowanie tekstu.
Button to element interfejsu, który użytkownik może kliknąć, aby wykonać działanie. Przycisk może składać się z tekstu, ikony lub tekstu i ikony.

Detektory kliknięć

Możesz sprawić, że dowolny element View będzie reagować na kliknięcie, dodając do niego odbiornik kliknięć.
Funkcja, która definiuje detektor kliknięć, otrzymuje kliknięty element View.

Funkcję nasłuchiwania kliknięć możesz dołączyć do elementu View na 2 sposoby:

W układzie XML dodaj atrybut android:onClick do elementu <View>.
Programowo użyj funkcji setOnClickListener(View.OnClickListener) w odpowiednim Activity.

Kurs Udacity:

Tworzenie aplikacji na Androida w języku Kotlin

Dokumentacja dla deweloperów aplikacji na Androida:

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ę.

Odpowiedz na te pytania

Pytanie 1

Jakiej klasy podrzędnej jest EditText?

View
LinearLayout
TextView
Button

Pytanie 2

Która z tych wartości atrybutu visibility, jeśli zostanie ustawiona w widoku, spowoduje, że widok będzie ukryty i nie będzie zajmować miejsca w układzie?

visible
Invisible
gone
hide

Pytanie 3

W przypadku widoków EditText nie zaleca się podawania wskazówek, ponieważ zaśmiecają one pole wprowadzania. Prawda czy fałsz?

Prawda
Fałsz

Pytanie 4

Które z tych stwierdzeń dotyczących Buttonwyświetleń jest prawdziwe?

ButtonWidok to grupa widoków.
Na ekranie możesz mieć tylko 3 widoki Button.
Button wyświetlenia są klikalne, a po kliknięciu dołączony detektor kliknięć wykonuje działanie.
Button jest rozszerzeniem ImageView.

Rozpocznij następną lekcję: 2.3. Układ Constraint Layout w edytorze układu

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

Android Kotlin Fundamentals 02.2: Add user interactivity Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Co warto wiedzieć

Czego się nauczysz

Jakie zadania wykonasz

Krok 1. Pierwsze kroki

Krok 2. Dodaj element EditText

Krok 1. Dodaj tekst podpowiedzi

Krok 2. Ustaw atrybut inputType

Krok 1. Dodaj przycisk GOTOWE

Krok 2. Nadaj styl przyciskowi GOTOWE

Krok 3. Zmień zasób koloru

Krok 1. Dodaj widok TextView dla pseudonimu

Krok 2. Zmień widoczność elementu TextView

Krok 1. Dodaj odbiornik kliknięć

Krok 2. Dołącz odbiornik kliknięć do przycisku GOTOWE

Krok 3. Ukryj klawiaturę

Krok 1. Dodaj odbiornik kliknięć

Krok 2. Ustaw fokus na widok EditText i wyświetl klawiaturę

Krok 3. Dodaj kolor tła do widoku TextView pseudonimu

Odpowiedz na te pytania

Pytanie 1

Pytanie 2

Pytanie 3

Pytanie 4

Android Kotlin Fundamentals 02.2: Add user interactivity