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

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

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

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

Создание простого приложения для 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>

Цвет, соответствующий HEX-коду, можно увидеть в левом поле редактора файла.

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

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

После того, как пользователь введёт псевдоним и нажмёт кнопку «ГОТОВО» , псевдоним отобразится в 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 (или на любом представлении) определяет действие, которое должно быть выполнено при нажатии кнопки (представления). Функция обработки щелчка должна быть реализована в 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 будет экземпляром кнопки «ГОТОВО» .

private fun addNickname(view: View) {
}

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

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 , вам нужно прикрепить функцию к представлению 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 и ссылку на кнопку «ГОТОВО» . Для этого используйте метод findViewById() .

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

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

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 поле псевдонима». Окно псевдонима исчезнет, и появятся поле для редактирования текста и кнопка «ГОТОВО» .

Обратите внимание, что по умолчанию поле 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 . Эти изменения будут служить подсказкой пользователю, что текстовое поле nickname можно кликнуть.

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

Запустите финальное приложение. Редактируемый текст находится в фокусе, псевдоним отображается в редактируемом тексте, а текст псевдонима оформлен.

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

Проект Android Studio: AboutMeInteractive

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

Слушатели кликов

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

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

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

Курс Udacity:

Разработка приложений для 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 .