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

Эта страница переведена с помощью Cloud Translation API.

Android Kotlin Fundamentals 02.2: Добавление интерактивности для пользователя

Эта кодовая лаборатория является частью курса Android Kotlin Fundamentals. Вы получите максимальную отдачу от этого курса, если будете последовательно работать с лабораториями кода. Все кодовые лаборатории курса перечислены на целевой странице кодовых лабораторий Android Kotlin Fundamentals .

Что вы уже должны знать

Создание простого Android-приложения на Kotlin.
Запуск приложения Android на эмуляторе или на устройстве.
Создание линейного макета с помощью редактора макетов Android Studio.
Создание простого приложения, использующего LinearLayout , TextView , ScrollView и кнопку с обработчиком кликов.

Что вы узнаете

Как получить пользовательский ввод с помощью представления EditText .
Как установить текст в представление TextView , используя текст из представления EditText .
Как работать с View и ViewGroup .
Как изменить видимость View .

Что ты будешь делать

Добавьте интерактивность в приложение AboutMe из предыдущей кодовой лаборатории.
Добавьте EditText , чтобы пользователь мог вводить текст.
Добавьте Button и реализуйте ее обработчик кликов.

В этой кодовой лаборатории вы расширяете приложение AboutMe, добавляя взаимодействие с пользователем. Вы добавляете поле псевдонима, кнопку ГОТОВО и текстовое представление для отображения псевдонима. Как только пользователь вводит псевдоним и нажимает кнопку ГОТОВО , текстовое представление обновляется и показывает введенный псевдоним. Пользователь может снова обновить псевдоним, коснувшись текстового представления.

Приложение «Обо мне»

В этой задаче вы добавляете поле ввода EditText , чтобы пользователь мог ввести псевдоним.

Шаг 1: Начните

Если у вас еще нет приложения AboutMe из предыдущей кодовой лаборатории, загрузите начальный код AboutMeInteractive-Starter . Это тот же код, который вы закончили в предыдущей лаборатории кода.
Откройте проект AboutMeInteractive-Starter в Android Studio.
Запустите приложение. Вы видите текстовое представление имени, изображение звезды и длинный сегмент текста в представлении прокрутки.

Обратите внимание, что пользователь не может изменить текст.

Приложения более интересны, если пользователь может взаимодействовать с приложением, например, если пользователь может вводить текст. Чтобы принять ввод текста, Android предоставляет виджет пользовательского интерфейса (UI), называемый текстом редактирования . Вы определяете редактируемый текст с помощью EditText , подкласса TextView . Текст редактирования позволяет пользователю вводить и изменять ввод текста, как показано на снимке экрана ниже.

Шаг 2: Добавьте EditText

В Android Studio откройте файл макета activity_main.xml на вкладке « Дизайн ».
На панели Палитра щелкните Текст .

Ab TextView , который является TextView , отображается в верхней части списка текстовых элементов на панели палитры . Ниже Ab TextView находятся несколько представлений EditText .

Обратите внимание, что на панели « Палитра » значок TextView показывает буквы Ab без подчеркивания. Однако значки EditText показывают Ab подчеркнутым. Подчеркивание указывает на то, что представление доступно для редактирования.

Для каждого из представлений EditText Android устанавливает разные атрибуты, и система отображает соответствующий программный метод ввода (например, экранную клавиатуру).
Перетащите текст редактирования PlainText в дерево компонентов и поместите его ниже name_text и выше star_image .
Используйте панель « Атрибуты », чтобы установить следующие атрибуты в представлении EditText .

Атрибут	Ценность
`id`	`nickname_edit`
`layout_width`	`match_parent` (по умолчанию)
`layout_height`	`wrap_content` (по умолчанию)

Запустите свое приложение. Над изображением звезды вы видите текст редактирования с текстом по умолчанию «Имя».

В этой задаче вы определяете стиль представления EditText , добавляя подсказку, изменяя выравнивание текста, изменяя стиль на NameStyle и устанавливая тип ввода.

Шаг 1. Добавьте текст подсказки.

Добавьте новый строковый ресурс для подсказки в файле string.xml .

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

Используйте панель « Атрибуты », чтобы установить следующие атрибуты для представления EditText :

Атрибут	Ценность
`style`	`NameStyle`
`textAlignment`	(центр)
`hint`	`@string/what_is_your_nickname`

На панели Атрибуты удалите значение Name из text атрибута. Значение text атрибута должно быть пустым, чтобы отображалась подсказка.

Шаг 2: Установите атрибут inputType

inputType указывает тип ввода, который пользователи могут вводить в представлении EditText . Система Android отображает соответствующее поле ввода и экранную клавиатуру в зависимости от установленного типа ввода.

Чтобы просмотреть все возможные типы ввода, на панели Атрибуты щелкните поле inputType или щелкните значок с тремя точками ... рядом с полем. Откроется список, в котором показаны все типы ввода, которые вы можете использовать, с отмеченным текущим активным типом ввода. Вы можете выбрать более одного типа ввода.

Например, для паролей используйте значение textPassword . Текстовое поле скрывает ввод пользователя.

Для телефонных номеров используйте значение phone . Отображается цифровая клавиатура, и пользователь может вводить только цифры.

Установите тип ввода для поля псевдонима:

Установите для атрибута inputType значение textPersonName для текста редактирования nickname_edit .
На панели « Дерево компонентов» обратите внимание на предупреждение autoFillHints . Это предупреждение не относится к этому приложению и выходит за рамки этой лаборатории кода, поэтому вы можете его игнорировать. (Если вы хотите узнать больше об автозаполнении, см. раздел Оптимизация приложения для автозаполнения .)
На панели Атрибуты проверьте значения следующих атрибутов представления EditText :

Атрибут	Ценность
`id`	`nickname_edit`
`layout_width`	`match_parent` (по умолчанию)
`layout_height`	`wrap_content` (по умолчанию)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(пустой)

Button — это элемент пользовательского интерфейса, который пользователь может нажать, чтобы выполнить действие. Кнопка может состоять из текста, значка или из текста и значка.

В этой задаче вы добавляете кнопку ГОТОВО , которую пользователь нажимает после ввода псевдонима. Кнопка меняет представление EditText на представление TextView , отображающее псевдоним. Чтобы обновить псевдоним, пользователь может коснуться представления TextView .

Шаг 1. Добавьте кнопку ГОТОВО

Перетащите кнопку из панели « Палитра » в дерево компонентов . Поместите кнопку под текстом редактирования nickname_edit .
Создайте новый строковый ресурс с именем done . Дайте строке значение Done ,

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

Используйте панель « Атрибуты », чтобы установить следующие атрибуты во вновь добавленном представлении « Button »:

Атрибут	Ценности
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

layout_gravity центрирует представление в его родительском макете LinearLayout .

Измените стиль на Widget.AppCompat.Button.Colored , который является одним из предопределенных стилей, предоставляемых Android. Вы можете выбрать стиль либо в раскрывающемся списке, либо в окне ресурсов .

Этот стиль изменяет цвет кнопки на цвет акцента, colorAccent . Акцентный цвет определяется в файле res/values/colors.xml .

Файл colors.xml содержит цвета по умолчанию для вашего приложения. Вы можете добавить новые цветовые ресурсы или изменить существующие цветовые ресурсы в своем проекте в зависимости от требований вашего приложения.

Пример файла 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>

Шаг 2. Стиль кнопки «ГОТОВО»

На панели атрибутов добавьте верхнее поле, выбрав Layout_Margin > Top . Установите для верхнего поля значение layout_margin , которое определено в файле dimens.xml .
Установите для атрибута fontFamily значение roboto в раскрывающемся меню.
Перейдите на вкладку « Текст » и проверьте сгенерированный код XML для вновь добавленной кнопки.

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

Шаг 3: Измените цветовой ресурс

На этом шаге вы меняете цвет акцента кнопки, чтобы он соответствовал панели приложения вашей активности.

Откройте res/values/colors.xml и измените значение colorAccent на #76bf5e .

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

Вы можете увидеть цвет, соответствующий шестнадцатеричному коду, в левом поле редактора файлов.

Обратите внимание на изменение цвета кнопки в редакторе дизайна.

Запустите свое приложение. Вы должны увидеть стилизованную кнопку DONE под текстом редактирования.

После того как пользователь введет псевдоним и коснется кнопки ГОТОВО , псевдоним отобразится в представлении TextView . В этой задаче вы добавляете текстовое представление с цветным фоном. Текстовое представление отображает псевдоним пользователя над star_image .

Шаг 1. Добавьте TextView для псевдонима

Перетащите текстовое представление из панели « Палитра » в дерево компонентов . Поместите текстовое представление ниже done_button и над изображением star_image .
Используйте панель « Атрибуты », чтобы установить следующие атрибуты для нового представления TextView :

Атрибут	Ценность
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(центр)

Шаг 2. Измените видимость TextView

Вы можете показывать или скрывать представления в своем приложении, используя атрибут visibility . Этот атрибут принимает одно из трех значений:

visible : Вид виден.
Invisible : скрывает представление, но оно по-прежнему занимает место в макете.
gone : скрывает представление, и оно не занимает места в макете.

На панели Атрибуты установите для visibility текстового представления nickname_text значение gone , потому что вы не хотите, чтобы ваше приложение показывало это текстовое представление поначалу.

Обратите внимание, что когда вы меняете атрибут на панели Атрибуты , представление nickname_text исчезает из редактора дизайна. Вид скрыт в предварительном просмотре макета.
Измените значение text атрибута представления nickname_text на пустую строку.

Ваш сгенерированный XML-код для этого TextView должен выглядеть примерно так:

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

Предварительный просмотр макета должен выглядеть примерно так:

Обработчик щелчка в объекте Button (или в любом представлении) указывает действие, которое должно выполняться при нажатии кнопки (представления). Функция, обрабатывающая событие click, должна быть реализована в Activity , в котором размещается макет с кнопкой (представление).

Прослушиватель кликов обычно имеет такой формат, где переданное представление — это представление, которое получило щелчок или касание.

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

Вы можете прикрепить функцию прослушивания кликов к событиям нажатия кнопки двумя способами:

В макете XML вы можете добавить атрибут android:onClick к элементу <Button> . Например:

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

ИЛИ ЖЕ

Вы можете сделать это программно во время выполнения, в onCreate() Activity , вызвав setOnClickListener . Например:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

В этой задаче вы программно добавляете прослушиватель кликов для done_button . Вы добавляете прослушиватель кликов в соответствующее действие, которое называется MainActivity.kt .

Ваша функция прослушивания кликов, называемая addNickname , будет делать следующее:

Получить текст из текста редактирования nickname_edit .
Установите текст в текстовом представлении nickname_text .
Скройте текст редактирования и кнопку.
Отображать псевдоним TextView .

Шаг 1. Добавьте прослушиватель кликов

В Android Studio в папке java откройте файл MainActivity.kt .
В MainActivity.kt внутри класса MainActivity добавьте функцию с именем addNickname . Включите входной параметр с именем view типа View . Параметр view — это View , для которого вызывается функция. В этом случае view будет экземпляром вашей кнопки DONE .

private fun addNickname(view: View) {
}

Внутри функции addNickname используйте findViewById() , чтобы получить ссылку на текст редактирования и nickname_text nickname_edit

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

Установите текст в текстовом представлении nicknameTextView на текст, который пользователь ввел в editText , получив его из свойства text .

nicknameTextView.text = editText.text

Скройте представление псевдонима EditText , установив для свойства visibility editText значение View.GONE .

В предыдущей задаче вы изменили свойство visibility с помощью редактора макетов. Здесь вы делаете то же самое программно.

editText.visibility = View.GONE

Скройте кнопку DONE , задав для свойства visibility значение View.GONE . У вас уже есть ссылка на кнопку в качестве входного параметра функции, view .

view.visibility = View.GONE

В конце функции addNickname сделайте вид TextView псевдонима видимым, установив для его свойства visibility значение View.VISIBLE .

nicknameTextView.visibility = View.VISIBLE

Шаг 2. Прикрепите прослушиватель кликов к кнопке DONE.

Теперь, когда у вас есть функция, определяющая действие, которое будет выполняться при нажатии кнопки DONE , вам нужно прикрепить эту функцию к представлению Button .

В MainActivity.kt в конце функции onCreate() получите ссылку на представление Button DONE . Используйте функцию findViewById() и вызовите setOnClickListener . Передайте ссылку на функцию прослушивания кликов, addNickname() .

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

В приведенном выше коде it относится к done_button — представлению, переданному в качестве аргумента.

Запустите приложение, введите псевдоним и нажмите кнопку ГОТОВО . Обратите внимание, как текст редактирования и кнопка заменены текстовым представлением псевдонима.

Обратите внимание, что даже после того, как пользователь коснется кнопки ГОТОВО , клавиатура все еще видна. Это поведение по умолчанию.

Шаг 3. Скройте клавиатуру

На этом шаге вы добавляете код, чтобы скрыть клавиатуру после того, как пользователь нажмет кнопку ГОТОВО .

В MainActivity.kt в конце функции addNickname() добавьте следующий код. Если вам нужна дополнительная информация о том, как работает этот код, см. документацию hideSoftInputFromWindow .

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

Запустите приложение еще раз. Обратите внимание, что после того, как вы нажмете ГОТОВО, клавиатура будет скрыта.

Пользователь не может изменить псевдоним после того, как нажмет кнопку ГОТОВО . В следующей задаче вы сделаете приложение более интерактивным и добавите функционал, чтобы пользователь мог обновить псевдоним.

В этой задаче вы добавляете прослушиватель кликов в текстовое представление псевдонима. Слушатель кликов скрывает текстовое представление псевдонима, показывает текст редактирования и показывает кнопку ГОТОВО .

Шаг 1. Добавьте прослушиватель кликов

В MainActivity добавьте функцию прослушивания кликов с именем updateNickname(view: View) для просмотра текста псевдонима.

private fun updateNickname (view: View) {
}

Внутри функции updateNickname получите ссылку на текст редактирования nickname_edit и получите ссылку на кнопку DONE . Для этого используйте метод findViewById() .

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

В конце функции updateNickname добавьте код для отображения текста редактирования, отображения кнопки DONE и скрытия текстового представления.

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

В MainActivity.kt в конце функции onCreate() вызовите setOnClickListener для текстового представления nickname_text . Передайте ссылку на функцию прослушивания кликов, которая называется updateNickname() .

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

Запустите свое приложение. Введите псевдоним, коснитесь кнопки « ГОТОВО », затем коснитесь представления TextView псевдонима. Вид псевдонима исчезнет, а текст редактирования и кнопка DONE станут видимыми.

Обратите внимание, что по умолчанию представление EditText не имеет фокуса и клавиатура не видна. Пользователю сложно понять, что текстовое представление никнейма кликабельно. В следующей задаче вы добавите фокус и стиль к текстовому представлению псевдонима.

Шаг 2. Установите фокус на представление EditText и покажите клавиатуру.

В конце функции updateNickname установите фокус на представление EditText . Используйте метод requestFocus() .

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

В конце функции updateNickname добавьте код, чтобы сделать клавиатуру видимой.

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

Шаг 3. Добавьте цвет фона в представление TextView псевдонима.

Установите цвет фона текстового представления nickname_text на @color/colorAccent и добавьте нижний отступ @dimen/small_padding . Эти изменения будут служить подсказкой пользователю о том, что текстовое представление псевдонима кликабельно.

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

Запустите ваше окончательное приложение. Текст редактирования имеет фокус, псевдоним отображается в тексте редактирования, а вид текста псевдонима имеет стиль.

А теперь иди и покажи свое интерактивное приложение AboutMe другу!

Проект Android Studio: AboutMeInteractive

Инструмент Layout Editor в Android Studio — это редактор визуального дизайна. Вы можете использовать редактор макетов для создания макета вашего приложения, перетаскивая элементы пользовательского интерфейса в макет.
EditText — это элемент пользовательского интерфейса, который позволяет пользователю вводить и изменять текст.
Button — это элемент пользовательского интерфейса, который пользователь может нажать, чтобы выполнить действие. Кнопка может состоять из текста, значка или из текста и значка.

Нажмите слушателей

Вы можете заставить любой View реагировать на касание, добавив к нему прослушиватель кликов.
Функция, определяющая прослушиватель кликов, получает View , по которому щелкнули.

Вы можете прикрепить функцию прослушивания кликов к View одним из двух способов:

В макете XML добавьте атрибут android:onClick к элементу < View > .
Программно используйте setOnClickListener(View.OnClickListener) в соответствующем Activity .

Удасити курс:

Разработка приложений для Android с помощью Kotlin.

Документация для разработчиков Android:

В этом разделе перечислены возможные домашние задания для студентов, которые работают с этой кодовой лабораторией в рамках курса, проводимого инструктором. Инструктор должен сделать следующее:

При необходимости задайте домашнее задание.
Объясните учащимся, как сдавать домашние задания.
Оценивайте домашние задания.

Преподаватели могут использовать эти предложения так мало или так часто, как они хотят, и должны свободно давать любые другие домашние задания, которые они считают подходящими.

Если вы работаете с этой кодовой лабораторией самостоятельно, не стесняйтесь использовать эти домашние задания, чтобы проверить свои знания.

Ответьте на эти вопросы

Вопрос 1

Что такое EditText подкласс?

View
LinearLayout
TextView
Button

вопрос 2

Какое из следующих значений атрибута visibility , если оно задано для представления, делает его скрытым и не занимает места в макете?

visible
Invisible
gone
hide

Вопрос 3

Для представлений EditText не рекомендуется предоставлять подсказки, поскольку подсказки загромождают поле ввода. Правда или ложь?

Истинный
ЛОЖЬ

Вопрос 4

Какое из следующих утверждений верно для представлений Button ?

Представление Button — это группа представлений.
У вас может быть только три вида Button на экране.
Представления Button кликабельны, и при нажатии присоединенный прослушиватель кликов выполняет действие.
Button является расширением ImageView .

Начать следующий урок: 2.3: Ограничение макета с помощью редактора макетов

Ссылки на другие лаборатории кода в этом курсе см. на целевой странице лаборатории кода Android Kotlin Fundamentals .