Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Android Kotlin Fundamentals 02.2: dodawanie funkcji dla użytkowników

Te ćwiczenia są częścią kursu Android Kotlin Fundamentals. Skorzystaj z tego kursu, jeśli będziesz wykonywać kolejno kilka ćwiczeń z programowania. Wszystkie ćwiczenia z kursu są wymienione na stronie docelowej ćwiczeń z programowania na temat Kotlin.

Co musisz 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 .
Tworzenie prostej aplikacji używającej elementów LinearLayout, TextView, ScrollView i przycisku z modułem obsługi kliknięcia.

Czego się nauczysz

Zbieranie danych wejściowych użytkownika za pomocą widoku EditText.
Jak w widoku TextView ustawić tekst jako tekst w widoku EditText.
Jak używać View i ViewGroup.
Jak zmienić widoczność elementu View.

Jakie zadania wykonasz:

Dodaj interaktywność do aplikacji Omni, która pochodzi z poprzedniego ćwiczenia z programowania.
Dodaj EditText, aby użytkownik mógł wpisać tekst.
Dodaj Button i zaimplementuj w nim moduł do obsługi kliknięć.

W tym ćwiczeniu rozszerzysz aplikację Om, aby dodawać interakcje użytkowników. Dodajesz pole pseudonimu, przycisk GOTOWE i widok tekstowy umożliwiający wyświetlenie pseudonimu. Gdy użytkownik wpisze pseudonim i kliknie przycisk GOTOWE, widok tekstowy zostanie zaktualizowany i będzie go widać. Użytkownik może ponownie zmienić pseudonim, klikając widok tekstowy.

O mnie

W tym zadaniu dodasz pole do wprowadzania danych EditText, które pozwoli użytkownikowi wpisać pseudonim.

Krok 1. Rozpocznij

Jeśli nie masz jeszcze aplikacji OMemy z poprzedniego ćwiczenia z programowania, pobierz kod startowy AboutMeInteractive-Starter. Taki sam kod jak w poprzednim ćwiczeniu z programowania.
Otwórz projekt OMeMeiveive-Starter w Android Studio.
Uruchom aplikację. Zobaczysz widok tekstu z imieniem i gwiazdką oraz długi segment tekstu w widoku przewijanym.

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

Aplikacje są ciekawsze, gdy użytkownik może korzystać z aplikacji, na przykład wpisując tekst. Aby akceptować wpisy tekstowe, Android udostępnia widżet interfejsu o nazwie edytuj tekst. Edytujesz tekst do edycji, używając EditText – podgrupy TextView. Edycja tekstu pozwala użytkownikowi na wprowadzanie i modyfikowanie tekstu, tak jak na tym zrzucie ekranu.

Krok 2. Dodaj element EditText

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

Widok tekstu Ab, czyli TextView, wyświetla się u góry listy elementów tekstowych w panelu Paleta. Poniżej obszaru Ab TextView jest kilka widoków danych EditText.

W panelu Palette (Paleta) zobaczysz, jak ikona ikony TextView wyświetla litery Ab bez zbyt małej liczby napisów. Ikony EditText są podkreślone Ab . Podkreślenie wskazuje, że widok można edytować.

W przypadku każdego widoku EditText system ustawia różne atrybuty, a system wyświetla odpowiednią metodę programową (np. klawiaturę ekranową).
Przeciągnij tekst z kategorii plainText do drzewa komponentów i umieść go poniżej name_text i star_image.
Za pomocą panelu Atrybuty ustaw następujące atrybuty w widoku EditText.

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

Uruchom aplikację. Nad obrazem gwiazdki zobaczysz tekst z domyślnym tekstem „Nazwa”:

W tym zadaniu dodasz styl do widoku EditText, dodając podpowiedź, wyrównanie tekstu, zmieniając styl na NameStyle i określając typ danych wejściowych.

Krok 1. Dodaj tekst podpowiedzi

Dodaj nowy zasób ciągu tekstowego dla podpowiedzi w pliku string.xml.

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

W panelu Atrybuty ustaw następujące atrybuty na widok EditText:

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

W panelu Atrybuty usuń wartość Name z atrybutu text. Aby wyświetlana była podpowiedź, wartość atrybutu text musi być pusta.

Krok 2. Ustaw atrybut inputType

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

Aby wyświetlić wszystkie możliwe typy danych wejściowych, w panelu Atrybuty kliknij pole inputType lub kliknij 3 kropki ... obok pola. Pojawi się lista zawierająca wszystkie typy danych, których możesz użyć. Zaznaczona jest opcja „aktywny typ wprowadzania”. Możesz wybrać więcej niż jeden typ danych wejściowych.

Na przykład w przypadku haseł użyj wartości textPassword. Pole tekstowe ukrywa dane wejściowe użytkownika.

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

Ustaw typ danych w polu pseudonimu:

Ustaw atrybut inputType jako textPersonName dla tekstu edycji nickname_edit.
W okienku Drzewo komponentów pojawi się ostrzeżenie: autoFillHints. To ostrzeżenie nie dotyczy tej aplikacji i jest poza zakresem tego ćwiczenia z programowania, więc możesz je zignorować. (Więcej informacji o autouzupełnianiu znajdziesz w artykule 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` (domyślnie)
`layout_height`	`wrap_content` (domyślnie)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(puste)

Button to element interfejsu, który użytkownik może kliknąć, aby wykonać czynność. Przycisk może zawierać tekst, ikonę lub tekst.

W tym zadaniu dodajesz przycisk GOTOWE, który użytkownik klika po wpisaniu pseudonimu. Przycisk zastępuje widok EditText widokiem TextView zawierającym 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 tekstem edycji nickname_edit.
Utwórz nowy zasób łańcuchowy o nazwie done. Przypisz ciągowi wartość Done,

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

W panelu Atrybuty ustaw następujące 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 określa widok w jego układzie nadrzędnym: LinearLayout.

Zmień styl na Widget.AppCompat.Button.Colored, czyli jeden ze wstępnie zdefiniowanych stylów Androida. Możesz wybrać styl z menu lub z okna Zasoby.

Ten styl zmienia kolor przycisku na kolor uzupełniający colorAccent. Kolor uzupełniający jest określony w pliku res/values/colors.xml.

Plik colors.xml zawiera kolory domyślne dla Twojej aplikacji. W zależności od wymagań Twojej aplikacji możesz dodać nowe zasoby kolorów lub zmienić istniejące zasoby kolorów w projekcie.

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. Styl przycisku GOTOWE

W panelu Atrybuty dodaj górny margines, wybierając Układ_Marża &Góra. Ustaw górny margines na layout_margin, który jest zdefiniowany w pliku dimens.xml.
W menu ustaw atrybut fontFamily na roboto.
Otwórz kartę Tekst i sprawdź wygenerowany kod XML dla nowego 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 zmieniasz kolor akcentu przycisku, tak aby pasował do paska aplikacji.

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

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

Kolor odpowiadający kodowi szesnastkowemu jest widoczny na lewym marginesie edytora plików.

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

Uruchamiaj aplikację. Pod tekstem edytować powinien być widoczny styl GOTOWE.

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

Krok 1. Dodaj widok tekstowy jako pseudonim

Przeciągnij widok tekstu z panelu Paleta do drzewa komponentów. Umieść widok tekstowy poniżej done_button i powyżej star_image.
W panelu Atrybuty ustaw następujące atrybuty w nowym widoku TextView:

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

Krok 2. Zmień widoczność TextView

Możesz pokazać lub ukryć widoki w aplikacji, używając atrybutu visibility. Ten atrybut przyjmuje jedną z trzech wartości:

visible: widok jest widoczny.
Invisible: widok jest ukrywany, ale nadal zajmuje miejsce w układzie.
gone: widok jest ukrywany, a widok nie zajmuje miejsca.

W panelu Atrybuty ustaw visibility widoku tekstowego nickname_text na gone, ponieważ nie chcesz, aby Twoja aplikacja wyświetlała się jako pierwszy.

Zwróć uwagę, że gdy zmienisz atrybut w panelu Atrybuty, widok nickname_text zniknie z edytora projektu. Widok jest ukryty w podglądzie układu.
Zmień wartość atrybutu text widoku nickname_text na pusty ciąg znaków.

Wygenerowany kod XML tego pliku 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:

Moduł obsługi kliknięcia obiektu Button (lub dowolnego widoku danych) określa działanie, jakie ma być wykonywane po kliknięciu przycisku (widoku). Funkcja obsługująca zdarzenie kliknięcia powinna zostać zaimplementowana w narzędziu Activity, w którym jest umieszczony układ z przyciskiem (widokiem).

Ten format jest zwykle używany przez detektor kliknięć i uzyskuje wyświetlenie, które otrzymało kliknięcie.

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

Do list zdarzeń kliknięcia przycisku możesz dołączyć funkcję list-odbiorców:

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

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

LUB

Możesz to zrobić w środowisku wykonawczym w onCreate() z Activity, wywołując setOnClickListener. Przykład:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

W tym zadaniu automatycznie dodajesz detektor kliknięć dla done_button. Dodajesz detektor kliknięć do odpowiedniej aktywności, którą jest MainActivity.kt.

Funkcja słuchaczy o nazwie addNickname będzie działać w ten sposób:

Pobierz tekst z nickname_edit, aby go edytować.
Ustaw tekst w widoku tekstowym nickname_text.
Ukryj edytowany tekst i przycisk.
Wyświetl pseudonim TextView.

Krok 1. Dodaj detektor kliknięć

W Android Studio w folderze java otwórz plik MainActivity.kt.
W ramach klasy MainActivity.kt dodaj klasę MainActivity o nazwie addNickname. Uwzględnij parametr wejściowy o nazwie view typu View. Parametr view to obiekt View, który wywołuje funkcję. W tym przypadku view będzie wystąpieniem przycisku GOTOWE.

private fun addNickname(view: View) {
}

W funkcji addNickname użyj elementu findViewById(), by uzyskać odniesienie do tekstu edycji nickname_edit i widoku tekstu nickname_text.

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

Ustaw tekst w widoku tekstowym nicknameTextView na tekst wpisany przez użytkownika w polu editText, pobierany z usługi text.

nicknameTextView.text = editText.text

Aby ukryć widok EditText jako pseudonim, ustaw właściwość visibility w editText na View.GONE.

W poprzednim zadaniu zmieniono właściwość visibility za pomocą Edytora układu. To samo robisz w sposób zautomatyzowany.

editText.visibility = View.GONE

Aby ukryć przycisk GOTOWE, ustaw właściwość visibility na View.GONE. Masz już odwołanie do przycisku jako funkcji wejściowej funkcji view.

view.visibility = View.GONE

Na końcu funkcji addNickname pokaż widok z pseudonimem TextView, ustawiając jego właściwość visibility na View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

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

Gdy masz już funkcję określającą działanie, które ma być wykonywane po kliknięciu przycisku GOTOWE, musisz dołączyć ją do widoku Button.

W MainActivity.kt na końcu funkcji onCreate() uzyskaj odniesienie do widoku GOTOWE Button. Użyj funkcji findViewById() i wywołaj setOnClickListener. Przekaż odwołanie do funkcji słuchacza, addNickname().

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

W powyższym kodzie it odnosi się do elementu done_button, który jest widokiem przekazywanym jako argument.

Uruchom aplikację, wpisz pseudonim i kliknij przycisk GOTOWE. Zwróć uwagę, że edytowany tekst i przycisk są zastępowane widokiem tekstu pseudonimu.

Pamiętaj, że nawet po kliknięciu przycisku GOTOWE klawiatura jest nadal widoczna. Jest to zachowanie domyślne.

Krok 3. Ukryj klawiaturę

W tym kroku dodajesz kod, który ukrywa klawiaturę po kliknięciu przycisku GOTOWE.

W MainActivity.kt dodaj na końcu funkcji addNickname() 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)

Uruchom ponownie aplikację. Gdy klikniesz GOTOWE,klawiatura jest ukryta.

Użytkownik nie może zmienić pseudonimu po kliknięciu przycisku GOTOWE. W następnym zadaniu aplikacja stanie się bardziej interaktywna i dodana do aplikacji, aby użytkownik mógł zaktualizować jej pseudonim.

W tym zadaniu dodasz detektor kliknięć do widoku tekstu pseudonimu. Detektor kliknięć ukrywa widok tekstu pseudonimu, wyświetla tekst edycji i wyświetla przycisk GOTOWE.

Krok 1. Dodaj detektor kliknięć

W narzędziu MainActivity dodaj funkcję list słuchaczy, która nazywa się updateNickname(view: View), aby wyświetlać tekst tekstu pseudonimu.

private fun updateNickname (view: View) {
}

W ramach funkcji updateNickname pobierz odwołanie do funkcji edycji nickname_edit i odnoś do przycisku GOTOWE . Aby to zrobić, użyj 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 będzie wyświetlał tekst edycji, wyświetli przycisk GOTOWE i ukryje widok tekstu.

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

W MainActivity.kt na końcu funkcji onCreate() wywołaj setOnClickListener w widoku tekstowym nickname_text. Przekaż odwołanie do funkcji list słuchaczy, która jest typu updateNickname().

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

Uruchom aplikację. Wpisz pseudonim, kliknij przycisk GOTOWE, a następnie widok pseudonimu TextView. Widok pseudonimu zniknie, a edytujesz tekst i przycisk GOTOWE.

Pamiętaj, że domyślnie widok EditText nie jest zaznaczony i klawiatura nie jest widoczna. Użytkownik ma trudności ze zorientowaniem się, że widok tekstu pseudonimu jest klikalny. W następnym zadaniu dodasz wyróżnienie i styl do widoku tekstu pseudonimu.

Krok 2. Ustaw zaznaczenie na widoku EditText i wyświetl klawiaturę

Na końcu funkcji updateNickname ustaw ostrość na widok EditText. Użyj metody requestFocus().

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

Na końcu funkcji updateNickname dodaj kod, aby wyświetlić klawiaturę.

// 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

Ustaw kolor tła widoku tekstu nickname_text na @color/colorAccent i dodaj dolne wypełnienie @dimen/small_padding. Te zmiany będą dla użytkownika podpowiedzią, że można kliknąć widok tekstu pseudonimu.

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

Uruchom ostateczną aplikację. Tekst edycji będzie aktywny, a w widoku tekstu będzie widoczny pseudonim.

Teraz pokaż mi swoją interaktywną aplikację O mnie

Projekt na Android Studio: AboutMeInteractive

Edytor układu w Android Studio to edytor wizualny. Za pomocą Edytora układu możesz utworzyć układ aplikacji, przeciągając elementy interfejsu.
EditText to element interfejsu, który umożliwia użytkownikom wpisywanie i modyfikowanie tekstu.
Button to element interfejsu, który użytkownik może kliknąć, aby wykonać czynność. Przycisk może zawierać tekst, ikonę lub tekst.

Detektory kliknięć

Możesz sprawić, że każda View będzie reagować na kliknięcie, dodając do niego detektor kliknięć.
Funkcja definiująca detektor kliknięć otrzymuje klikany element View.

Funkcję list słuchaczy możesz dołączyć do elementu View na 2 sposoby:

W układzie XML dodaj atrybut android:onClick do elementu <View>.
Automatycznie wykorzystaj funkcję setOnClickListener(View.OnClickListener) w odpowiednim tagu Activity.

Kurs Udacity:

Tworzenie aplikacji na Androida razem z Kotlin

Dokumentacja dla programistów Androida:

Ta sekcja zawiera listę możliwych zadań domowych dla uczniów, którzy pracują w ramach tego ćwiczenia w ramach kursu prowadzonego przez nauczyciela. To nauczyciel może wykonać te czynności:

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

Nauczyciele mogą wykorzystać te sugestie tak długo, jak chcą lub chcą, i mogą przypisać dowolne zadanie domowe.

Jeśli samodzielnie wykonujesz te ćwiczenia z programowania, możesz sprawdzić swoją wiedzę w tych zadaniach domowych.

Odpowiedz na te pytania

Pytanie 1

Do której kategorii należy: EditText?

View
LinearLayout
TextView
Button

Pytanie 2

Która z podanych niżej wartości atrybutu visibility jest ustawiona w widoku danych, dzięki czemu jest on ukryty i nie zajmuje miejsca w układzie?

visible
Invisible
gone
hide

Pytanie 3

W przypadku widoków danych EditText nie jest to dobry sposób na podawanie wskazówek, ponieważ służą one do zaśmiecania pola wejściowego. Prawda czy fałsz?

Prawda
Fałsz

Pytanie 4

Które z poniższych stwierdzeń na temat wyświetleń filmów Button jest prawdziwe?

Widok Button to grupa widoku.
Można ustawić tylko trzy wyświetlenia Button na ekranie.
Widok danych Button można klikać, a po kliknięciu połączony detektor kliknięć wykonuje działanie.
Button to rozszerzenie ImageView.

Rozpocznij następną lekcję: 2.3: układ ograniczeń przy użyciu Edytora układu

Linki do innych ćwiczeń z programowania w tym kursie znajdziesz na stronie docelowej z ćwiczeniami z podstaw Androida Kotlin.