Git Product home page Git Product logo

tiptime's Introduction

TipTime

2. Запуск проекта

Ознакомьтесь с калькулятором чаевых в Google: https://www.google.com/search ?q = чаевые + калькулятор

image

На этом пути вы создадите простую версию калькулятора чаевых в виде приложения для Android.

Разработчики часто работают таким образом — готовят простую версию приложения, которая частично функционирует (даже если она выглядит не очень хорошо), а затем делают ее полностью функциональной и визуально отшлифованной позже.

К концу этой кодовой таблицы ваше приложение tip calculator будет выглядеть следующим образом:

image

Вы будете использовать эти элементы пользовательского интерфейса, предоставляемые Android:

  • EditText - для ввода и редактирования текста

  • TextView - для отображения текста, такого как сервисный вопрос и сумма чаевых

  • RadioButton - выбираемый переключатель для каждого варианта подсказки

  • RadioGroup - группировать параметры переключателей

  • Switch - переключатель включения / выключения для выбора, округлять подсказку или нет

Создайте пустой проект Activity

  1. Для начала создайте новый проект Kotlin в Android Studio, используя Пустой шаблон Activity.

  2. Назовите приложение "Tip Time" с минимальным уровнем API 19 (KitKat). Имя пакета - com.example.tiptime.

image

  1. Нажмите "Готово", чтобы создать приложение.

3. Читать и понимать XML

Вместо использования Редактора макетов, с которым вы уже знакомы, вы создадите макет своего приложения, изменив XML, описывающий пользовательский интерфейс. Изучение того, как понимать и изменять макеты пользовательского интерфейса с помощью XML, будет важно для вас как разработчика Android.

Вы будете просматривать и редактировать XML-файл, который определяет макет пользовательского интерфейса для этого приложения. XML расшифровывается как eXtensible Markup Language, который представляет собой способ описания данных с использованием текстового документа. Поскольку XML является расширяемым и очень гибким, он используется для многих разных целей, включая определение макета пользовательского интерфейса приложений Android. Возможно, вы помните из предыдущих codelabs, что другие ресурсы, такие как строки для вашего приложения, также определены в XML-файле с именем strings.xml.

Пользовательский интерфейс приложения для Android построен как иерархия компонентов (виджетов) и экранных макетов этих компонентов. Обратите внимание, что эти макеты сами являются компонентами пользовательского интерфейса.

Вы описываете иерархию представления элементов пользовательского интерфейса на экране. Например, ConstraintLayout (родительский элемент) может содержать Buttons, TextViews ImageViews или другие представления (дочерние элементы). Помните, ConstraintLayout это подкласс ViewGroup. Он позволяет гибко позиционировать или изменять размер дочерних представлений.

image

Иерархия содержимого приложения для Android


ПРИМЕЧАНИЕ: Видимая иерархия пользовательского интерфейса основана на сдерживании, т.Е. Внутри одного компонента находится один или несколько компонентов. Это не связано с иерархией классов и подклассов, о которой вы узнали ранее. Иногда используются термины родительский и дочерний, но в данном контексте речь идет о родительских представлениях (viewgroups), содержащих дочерние представления, которые, в свою очередь, могут содержать дочерние представления.


image

Каждый элемент пользовательского интерфейса представлен элементом XML в XML-файле. Каждый элемент начинается и заканчивается тегом, и каждый тег начинается с < и заканчивается на >. Точно так же, как вы можете устанавливать атрибуты для элементов пользовательского интерфейса с помощью редактора макетов (design), XML-элементы тоже могут иметь атрибуты. Упрощенно XML для приведенных выше элементов пользовательского интерфейса может быть примерно таким:

image

image

Давайте рассмотрим реальный пример.

  1. Открыть activity_main.xml (разрешение > макет > activity_main.xml).

  2. Вы могли заметить, что приложение показывает a TextView с надписью "Hello World!" внутри a ConstraintLayout, как вы видели в предыдущих проектах, созданных на основе этого шаблона.

image

  1. Найдите параметры для представлений кода, разделения и дизайна в правом верхнем углу редактора макетов.

  2. Выберите вид кода.

image

Вот как выглядит XML в activity_main.xml:

image

Здесь происходит намного больше, чем в упрощенном примере, но Android Studio делает некоторые вещи, помогающие сделать XML более читаемым, точно так же, как это происходит с вашим кодом Kotlin.

  1. Обратите внимание на отступ. Android Studio делает это автоматически, чтобы показать вам иерархию элементов. TextView Имеет отступ, потому что он содержится в ConstraintLayout. ConstraintLayout Является родительским, а TextView - дочерним. Атрибуты для каждого элемента имеют отступ, чтобы показать, что они являются частью этого элемента.

  2. Обратите внимание на цветовую маркировку — некоторые элементы выделены синим, некоторые -зеленым и так далее. Похожие части файла выделены тем же цветом, чтобы помочь вам их сопоставить. В частности, обратите внимание, что Android Studio рисует начало и конец тегов элементов одним и тем же цветом. (Примечание: цвета, используемые в codelab, могут не совпадать с тем, что вы видите в Android Studio.)

XML-теги, элементы и атрибуты

Вот упрощенная версия TextView элемента, чтобы вы могли ознакомиться с некоторыми важными частями:

image

Строка с <TextView является началом тега, а строка с /> - концом тега. Строка с android:text="Hello World!" является атрибутом тега. Он представляет собой текст, который будет отображаться с помощью TextView. Эти 3 строки являются широко используемым сокращением, называемым тегом с пустым элементом. Это означало бы то же самое, если бы вы написали это с отдельным начальным тегом и конечным тегом, вот так:

image

Также часто с тегом с пустым элементом записывают его на как можно меньшем количестве строк и объединяют конец тега со строкой перед ним. Таким образом, вы можете увидеть тег с пустым элементом в двух строках (или даже в одной строке, если у него нет атрибутов):

image

ConstraintLayoutЭлемент записывается с отдельными начальными и конечными тегами, потому что он должен иметь возможность содержать внутри себя другие элементы. Вот упрощенная версия ConstraintLayout элемента с TextView элементом внутри него:

image

Если бы вы хотели добавить еще один View дочерний элемент ConstraintLayout, например, a Button под TextView TextView, он должен был бы располагаться после конца /> тега ConstraintLayout и перед конечным тегом the, как это:

image

Подробнее о XML для макетов

  1. Посмотрите на тег для ConstraintLayout и обратите внимание, что он говорит androidx.constraintlayout.widget.ConstraintLayout вместо просто ConstraintLayout как TextView. Это потому, что ConstraintLayout является частью Android Jetpack, который содержит библиотеки кода, предлагающие дополнительные функциональные возможности поверх основной платформы Android. Jetpack обладает полезной функциональностью, которой вы можете воспользоваться, чтобы упростить создание приложений. Вы узнаете, что этот компонент пользовательского интерфейса является частью Jetpack, потому что он начинается с "androidx".

  2. Возможно, вы заметили строки, которые начинаются с xmlns:, за которыми следуют android, app и tools.

image

xmlns Означает пространство имен XML, и каждая строка определяет схему или словарь атрибутов, связанных с этими словами. android:Пространство имен, например, помечает атрибуты, определенные системой Android. Все атрибуты в XML-макете начинаются с одного из этих пространств имен.

  1. Пробелы между XML-элементами не меняют значения для компьютера, но они могут помочь сделать XML более удобным для чтения людям.

Android Studio автоматически добавит некоторые пробелы и отступы для удобства чтения. Позже вы узнаете, как заставить Android Studio убедиться, что ваш XML соответствует соглашениям о стиле кодирования.

  1. Вы можете добавлять комментарии к XML, точно так же, как вы бы делали с кодом Kotlin. Начинайте .

image

  1. Обратите внимание на первую строку файла:

Это указывает на то, что файл является XML-файлом, но не каждый XML-файл включает это.


Примечание: Если возникла проблема с XML для вашего приложения, Android Studio пометит проблему, выделив текст красным цветом. Если вы наведете курсор мыши на красный текст, Android Studio покажет дополнительную информацию о проблеме. Если проблема не очевидна, посмотрите на отступы и цветовую кодировку, и они могут дать вам ключ к пониманию того, что не так.


4. Создайте макет в формате XML

  1. Все еще в activity_main.xml режиме, переключитесь в режим разделения экрана, чтобы увидеть XML рядом с редактором дизайна. Редактор дизайна позволяет вам предварительно просмотреть макет вашего пользовательского интерфейса.

image

  1. Какой вид вы используете, зависит от личных предпочтений, но для этой кодовой лаборатории используйте вид "Разделить", чтобы вы могли видеть как редактируемый вами XML, так и изменения, внесенные этими правками в редакторе дизайна.

  2. Попробуйте щелкнуть по разным строкам, одной под ConstraintLayout, а затем еще одной под TextView, и обратите внимание, что соответствующий вид выбран в редакторе дизайна. Обратное тоже работает — например, если вы нажмете на TextView в редакторе дизайна, соответствующий XML будет выделен.

image

Удалить текстовое представление

  1. TextView Сейчас вам не нужен, поэтому удалите его. Обязательно удалите все, начиная с <TextView и заканчивая завершением />.

image

Все, что осталось в файле, - это ConstraintLayout:

image

  1. Добавьте 16dp отступов к ConstraintLayout, чтобы пользовательский интерфейс не был перегружен краем экрана.

Заполнение похоже на поля, но оно добавляет пространство внутри ConstraintLayout вместо добавления пространства снаружи.

image


Примечание: Некоторые фрагменты кода в этой кодовой лаборатории не будут показывать все для краткости. Код, который не меняется или не актуален для текущего шага будут представлены с многоточием (3 последовательных точек ...), так что вы можете сосредоточиться на наиболее важные части кода.


Добавить текстовое поле "стоимость услуги"

На этом шаге вы добавите элемент пользовательского интерфейса, который позволит пользователю вводить стоимость обслуживания в приложение. Вы будете использовать EditText элемент, который позволяет пользователю вводить или изменять текст в приложении.

image

  1. Ознакомьтесь с EditText документацией и изучите образец XML.

  2. Найдите пустое пространство между открывающим и закрывающим тегами ConstraintLayout.

  3. Скопируйте и вставьте XML-файл из документации в это пространство вашего макета в Android Studio.

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

image

Возможно, вы еще не все поняли, но это будет объяснено на следующих шагах.

  1. Примечание EditText подчеркнуто красным цветом.

  2. Наведите на него указатель, и вы увидите ошибку "просмотр не ограничен", которая должна выглядеть знакомой по более ранним codelabs. Напомним, что дочерним элементам a ConstraintLayout нужны ограничения, чтобы макет знал, как их расположить.

image

  1. Добавьте эти ограничения в EditText, чтобы привязать его к верхнему левому углу родительского файла.

image

Если вы пишете на английском или другом языке, который пишется слева направо (LTR), начальным краем является левый. Но некоторые языки, такие как арабский, пишутся справа налево (RTL), поэтому начальный край - правый. Вот почему ограничение использует "start", чтобы оно могло работать как с LTR, так и с RTL языками. Аналогично, ограничения используют "end" вместо right .


Примечание: Название ограничений следует за формой, layout_constraint_toOf где указано текущее представление. относится к краю целевого представления, к которому привязан текущий вид, либо родительский контейнер, либо другое представление.


С добавлением новых ограничений EditText элемент будет выглядеть следующим образом:

image

Просмотрите атрибуты EditText

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

  1. Найдите id атрибут, для которого установлено значение @+id/plain_text_input.

  2. Измените id атрибут на более подходящее имя, @+id/cost_of_service.


Примечание: Идентификатор ресурса - это уникальное имя ресурса для элемента. Когда вы добавляете View тот или иной ресурс с помощью редактора макетов, Android Studio автоматически присваивает им идентификаторы ресурсов. Когда вы вручную вводите XML-файл, вам необходимо явно указать идентификатор ресурса самостоятельно. Новые идентификаторы представлений в вашем XML-файле должны быть определены с префиксом @+id, который указывает Android Studio добавить этот идентификатор в качестве нового идентификатора ресурса.

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

Когда вы ссылаетесь на идентификаторы ресурсов в коде вашего приложения, используйте R..; например, R.string.roll. Для View идентификаторов используется id, например, R.id.button.


  1. Посмотрите на layout_height атрибут. Для него установлено значениеwrap_content, что означает, что высота будет такой же, как и содержимое внутри него. Это нормально, потому что там будет только 1 строка текста.

  2. Посмотрите на layout_width атрибут. Для него установлено значение match_parent, но вы не можете установить его match_parent для дочернего элемента ConstraintLayout. Кроме того, текстовое поле не обязательно должно быть таким широким. Установите для него фиксированную ширину 160dp, которой должно быть достаточно для ввода пользователем стоимости обслуживания.

image

  1. Обратите внимание на inputType атрибут — это что-то новое. Значение атрибута равно "text", что означает, что пользователь может вводить любые текстовые символы в поле на экране (алфавитные символы, условные обозначения и т.д.)

image

Однако вы хотите, чтобы они вводили в EditText только числа, поскольку поле представляет денежную величину.

  1. Сотрите слово text, но оставьте кавычки.

  2. Начните вводить number вместо него. После ввода "n" Android Studio показывает список возможных дополнений, которые включают "n".

888

  1. Выберите numberDecimal, который ограничивает их числами с десятичной запятой.

image

Чтобы ознакомиться с другими вариантами типов ввода, см. раздел Укажите тип метода ввода в документации разработчика.

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

  1. Добавьте hint атрибут к EditText, описывающий, что пользователь должен ввести в это поле.

image

Вы также увидите обновление Редактора дизайна.

image

  1. Запустите свое приложение в эмуляторе. Оно должно выглядеть следующим образом:

image

Отличная работа! Пока мало что получается, но вы хорошо начали и немного отредактировали XML. XML для вашего макета должен выглядеть примерно так.

image

Добавить служебный вопрос

На этом шаге вы добавите TextView к подсказке с вопросом "Как прошел сервис?" Попробуйте ввести это без копирования / вставки. Рекомендации Android Studio должны вам помочь.

  1. После закрытия EditText тега /> добавьте новую строку и начните печатать <TextView.

  2. Выберите TextView из предложенных, и Android Studio автоматически добавит layout_width и layout_height атрибуты для TextView.

  3. Выберите wrap_content для обоих вариантов, так как вам нужно, чтобы размер TextView был таким же большим, как текстовое содержимое внутри него.

image

  1. Добавьте text атрибут с помощью "How was the service?"

image

  1. Закройте тег с помощью />.

  2. Обратите внимание в редакторе дизайна, что TextView перекрываетEditText.

image

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

image

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

  1. Добавьте горизонтальное ограничение к TextView, чтобы ограничить его начальный край начальным краем родительского элемента.

image

  1. Добавьте вертикальное ограничение к TextView, чтобы ограничить верхний край TextView нижней границы стоимости обслуживания View.

image

Обратите внимание, что в @id/cost_of_service нет плюса, потому что идентификатор уже определен.

image

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

  1. Добавьте идентификатор ресурса в TextView. Вам нужно будет обратиться к этому представлению позже, когда вы добавите больше представлений и свяжете их друг с другом.

image

На этом этапе ваш XML-файл должен выглядеть следующим образом.

image

5. Добавление параметров подсказок

Далее вы добавите переключатели для различных вариантов подсказок, которые пользователь может выбрать.

Должно быть три варианта:

  • Потрясающе (20%)

  • Хорошо (18%)

  • Хорошо (15%)

Если вы не уверены, как это сделать, вы можете выполнить поиск в Google. Это отличный инструмент, который разработчики используют, когда они застревают.

  1. Выполните поиск в Google по radio button android. Лучший результат - руководство с сайта разработчиков Android о том, как использовать переключатели — идеально!

image

  1. Просмотрите руководство по переключателям.

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

Существует некоторый XML, который выглядит так, как будто он соответствует вашим потребностям. Прочтите его и посмотрите, RadioGroup является ли родительский вид и RadioButtons являются ли дочерние виды в нем.

  1. Вернитесь к своему макету в Android Studio, чтобы добавить RadioGroup и RadioButton в свое приложение.

  2. После TextView элемента, но все еще внутри ConstraintLayout, начните вводить <RadioGroup. Android Studio предоставит полезные рекомендации, которые помогут вам заполнить XML.

image

  1. Установите для layout_width и layout_height RadioGroupзначение wrap_content.

  2. Добавьте идентификатор ресурса, установленный в @+id/tip_options.

  3. Закройте начальный тег с помощью >.

  4. Android Studio добавляет . Как и ConstraintLayout, у RadioGroup элемента внутри будут другие элементы, поэтому вы можете захотеть переместить его в отдельную строку.

1111111111

  1. Ограничьте RadioGroup под служебным вопросом (по вертикали) и в начале родительского вопроса (по горизонтали).

  2. Установите для android:orientation атрибута значение vertical. Если вы хотите, чтобы RadioButtons располагались в ряд, вы бы установили ориентацию на horizontal.

XML для RadioGroup должен выглядеть следующим образом:

image

Добавление радиокнопок

  1. После последнего атрибута RadioGroup, но перед конечным тегом добавьте RadioButton.

image

  1. Установите для layout_width и layout_height значение wrap_content.

  2. Присвойте @+id/option_twenty_percentидентификатору RadioButton ресурса.

  3. Установите для текста значение Amazing (20%).

  4. Закройте тег с помощью />.

image

image

Теперь, когда вы добавили один из них RadioButton, можете ли вы изменить XML, чтобы добавить еще 2 переключателя для параметров Good (18%) и Okay (15%)?

Вот как выглядит XML для RadioGroup и RadioButtons:

image

image

Добавьте выбор по умолчанию

В настоящее время ни один из параметров подсказки не выбран. Было бы неплохо выбрать один из параметров переключателя по умолчанию.

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

  1. sНа RadioGroupустановите для android:checkedButton атрибута значение @id/option_twenty_percent.

image

Обратите внимание в редакторе дизайна, что макет был обновлен. Опция чаевых в размере 20% выбрана по умолчанию — круто! Теперь это начинает выглядеть как калькулятор чаевых!

image

Вот как выглядит XML на данный момент:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity">

<EditText
    android:id="@+id/cost_of_service"
    android:hint="Cost of Service"
    android:layout_height="wrap_content"
    android:layout_width="160dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:inputType="numberDecimal"/>

<TextView
    android:id="@+id/service_question"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="How was the service?"
    app:layout_constraintTop_toBottomOf="@id/cost_of_service"
    app:layout_constraintStart_toStartOf="parent" />

<RadioGroup
    android:id="@+id/tip_options"
    android:checkedButton="@id/option_twenty_percent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/service_question"
    app:layout_constraintStart_toStartOf="parent"
    android:orientation="vertical">

    <RadioButton
        android:id="@+id/option_twenty_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Amazing (20%)" />

    <RadioButton
        android:id="@+id/option_eighteen_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Good (18%)" />

    <RadioButton
        android:id="@+id/option_fifteen_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Okay (15%)" />
</RadioGroup>

</androidx.constraintlayout.widget.ConstraintLayout>

6. Завершите остальную часть макета

Теперь вы переходите к последней части макета. Вы добавите Switch, Button и a TextView для отображения суммы чаевых.

image

№№№ Добавьте переключатель для округления подсказки в большую сторону

Далее вы будете использовать Switch виджет, позволяющий пользователю выбрать "да" или "нет" для округления подсказки.

Вы хотите, чтобы Switch файл был такой же ширины, как родительский, поэтому вы можете подумать, что ширина должна быть установлена равной match_parent. Как отмечалось ранее, вы не можете настроить match_parent элементы пользовательского интерфейса в ConstraintLayout. Вместо этого вам нужно ограничить начальный и конечный края представления и установить ширину равной 0dp. Установка значения width в 0dp позволяет системе не вычислять ширину, а просто попытаться соответствовать ограничениям, которые есть в представлении.


Примечание: Вы не можете использовать match_parent ни для одного представления в ConstraintLayout. Вместо этого используйте 0dp, что означает ограничения соответствия.


  1. Добавьте Switch элемент после XML для RadioGroup.

  2. Как отмечалось выше, установите layout_width значение 0dp.

  3. Установите layout_height значение wrap_content. Это сделает Switch вид таким же высоким, как содержимое внутри.

  4. Установите для id атрибута значение @+id/round_up_switch.

  5. Установите для text атрибута значение Round up tip?. Это будет использоваться в качестве метки для Switch.

  6. Ограничьте начальный край Switch начальным краем tip_options, а конечный - концом родительского элемента.

  7. Ограничьте верхнюю часть Switch нижней частью tip_options.

  8. Закройте тег с помощью />.

Было бы неплохо, если бы переключатель был включен по умолчанию, и для этого был бы атрибут, android:checked где возможными значениями являются true (включено) или false (выключено).

  1. Установите для android:checked атрибута значение true.

Если собрать все это вместе, XML для Switch элемента будет выглядеть следующим образом:

image


Примечание: При наведении курсора мыши на Switch элемент в вашем XML-макете в Android Studio появится предложение: "Использовать SwitchCompat из AppCompat или SwitchMaterial из библиотеки материалов". Вы реализуете это предложение в более поздней кодовой версии создания приложения tip calculator, поэтому пока можете игнорировать предупреждение.


image

Добавьте кнопку Рассчитать

Далее вы добавите Button, чтобы пользователь мог запросить расчет чаевых. Вы хотите, чтобы кнопка была такой же ширины, как родительская, чтобы горизонтальные ограничения и ширина были такими же, как у Switch.

  1. Добавьте Button после Switch.

  2. Установите ширину на 0dp, как вы делали для Switch.

  3. Установите высоту в wrap_content.

  4. Присвойте ему идентификатор ресурса @+id/calculate_button с текстом "Calculate".

  5. Ограничить верхний край Button нижним краем округлого кончика? Switch.

  6. Ограничьте начальный край начальным краем родительского файла, а конечный край конечным краем родительского файла.

  7. Закройте тег с помощью />.

Вот как выглядит XML для вычисления Button:

image

image

Добавить результат подсказки

Вы почти закончили с макетом! На этом шаге вы добавите TextView результат подсказки, поместив его под кнопкой Рассчитать и выровняв по концу, а не по началу, как в других элементах пользовательского интерфейса.

  1. Добавьте файл TextView с идентификатором ресурса по имени tip_result и текстом Tip Amount.

  2. Ограничьте конечный край TextView конечным краем родительского файла.

  3. Сведите верхний край к нижнему краю кнопки Рассчитать.

image

image

  1. Запустите приложение. Оно должно выглядеть так, как показано на этом скриншоте.

image

Отличная работа, особенно если вы впервые работаете с XML!

Обратите внимание, что приложение может выглядеть не совсем так, как на скриншоте, поскольку шаблоны могли быть изменены в более поздней версии Android Studio. Кнопка Рассчитать пока ничего не делает, но вы можете ввести стоимость, выбрать процент чаевых и переключить опцию округления чаевых в большую сторону. Ты сделаешь рассчитать работают кнопки в следующем codelab, так что не забудьте вернуться за ней!

7. Применяйте передовые методы кодирования

Извлеките строки

Возможно, вы заметили предупреждения о жестко закодированных строках. Вспомните из предыдущих codelabs, что извлечение строк в файл ресурсов упрощает перевод вашего приложения на другие языки и повторное использование строк. Просмотрите activity_main.xml и извлеките все строковые ресурсы.

  1. Нажмите на строку; наведите курсор на появившийся значок желтой лампочки, затем нажмите на треугольник рядом с ним; выберите Извлечь строковый ресурс. Имена строковых ресурсов по умолчанию в порядке. Если вы хотите, для параметров подсказки вы можете использовать amazing_service, good_service и ok_service, чтобы сделать названия более наглядными.

Теперь проверьте строковые ресурсы, которые вы только что добавили.

  1. Если окно проекта не отображается, перейдите на вкладку "Проект" в левой части окна.

  2. Откройте приложение> параметры> значения> strings.xml , чтобы просмотреть все строковые ресурсы пользовательского интерфейса.

image

Переформатируйте XML

Android Studio предоставляет различные инструменты для приведения в порядок вашего кода и проверки того, что он соответствует рекомендуемым соглашениям о кодировании.

  1. В activity_main.xmlвыберите Правка> Выбрать все.

  2. Выберите Код> Переформатировать код.

Это обеспечит согласованность отступов и может изменить порядок некоторых XML элементов пользовательского интерфейса, чтобы сгруппировать объекты, например, объединив все android: атрибуты одного элемента.

9. Краткие сведения

  • XML (Extensible Markup Language) - это способ организации текста, состоящий из тегов, элементов и атрибутов.

  • Используйте XML для определения макета приложения для Android.

  • ИспользуйтеEditText, чтобы позволить пользователю вводить или редактировать текст.

  • EditTextМожет содержать подсказку, сообщающую пользователю, что ожидается в этом поле.

  • Укажите android:inputType атрибут, ограничивающий тип текста, который пользователь может вводить в EditText поле.

  • Составьте список эксклюзивных опций с помощью RadioButtons, сгруппированных с помощью RadioGroup.

  • A RadioGroup может быть вертикальным или горизонтальным, и вы можете указать, какой из них RadioButton следует выбрать изначально.

  • ИспользуйтеSwitch, чтобы позволить пользователю переключаться между двумя вариантами.

  • Вы можете добавить метку к a Switch без использования отдельной TextView.

  • Каждый дочерний элемент ConstraintLayout должен иметь вертикальные и горизонтальные ограничения.

  • Используйте ограничения "start" и "end" для обработки как слева направо (LTR), так и справа налево (RTL) языков.

  • Имена атрибутов ограничения приведены в форме layout_constraint_toOf.

  • Чтобы сделать элемент View такой же ширины, в каком он находится ConstraintLayout, ограничьте начало и конец началом и концом родительского элемента и установите ширину равной 0dp.

Рассчитайте чаевые

1. Прежде чем начать

В этой кодовой лаборатории вы будете писать код для калькулятора чаевых, который будет соответствовать пользовательскому интерфейсу, созданному вами в предыдущей кодовой лаборатории "Создание XML-макетов для Android".

Предварительные условия

  • Код из кодовой лаборатории Create XML layouts for Android.

  • Как запустить приложение для Android из Android Studio в эмуляторе или на устройстве.

Чему вы научитесь

  • Базовая структура приложений для Android.

  • Как считывать значения из пользовательского интерфейса в ваш код и манипулировать ими.

  • Как использовать привязку к представлению вместо findViewById(), чтобы упростить написание кода, взаимодействующего с представлениями.

  • Как работать с десятичными числами в Kotlin с Double типом данных.

  • Как форматировать числа в качестве валюты.

  • Как использовать строковые параметры для динамического создания строк.

  • Как использовать Logcat в Android Studio для поиска проблем в вашем приложении.

Что вы будете строить

  • Приложение-калькулятор чаевых с рабочей кнопкой Рассчитать.

Что вам нужно

  • На компьютере установлена последняя стабильная версия Android Studio.

  • Начальный код для приложения Tip Time, которое содержит макет калькулятора чаевых.

2. Обзор приложения для начинающих

Приложение Tip Time из последней codelab имеет весь пользовательский интерфейс, необходимый для калькулятора чаевых, но нет кода для расчета чаевых. Есть кнопка Рассчитать, но она пока не работает. Стоимость услуги EditText позволяет пользователю ввести стоимость услуги. Список RadioButtons позволяет пользователю выбрать процент чаевых, а a Switch позволяет пользователю выбрать, следует ли округлять чаевые в большую сторону или нет. Сумма чаевых отображается в TextView, и, наконец, Calculate Button подскажет приложению получить данные из других полей и рассчитать сумму чаевых. Вот тут-то и появляется эта кодовая таблица.

image

Структура проекта приложения

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

  1. Откройте проект Tip Time в Android Studio.

  2. Если окно проекта не отображается, выберите вкладку "Проект" в левой части Android Studio.

  3. Если он еще не выбран, выберите представление для Android из выпадающего списка.

image

  • java папка для файлов Kotlin (или Java-файлов)

  • MainActivity - класс, в который будет помещен весь код Kotlin для логики калькулятора чаевых

  • res папка для ресурсов приложения

  • activity_main.xml - файл макета для вашего приложения для Android

  • strings.xml - содержит строковые ресурсы для вашего приложения Android

  • Папка Gradle Scripts

Gradle - это автоматизированная система сборки, используемая Android Studio. Всякий раз, когда вы меняете код, добавляете ресурс или вносите другие изменения в свое приложение, Gradle выясняет, что изменилось, и предпринимает необходимые шаги для перестройки вашего приложения. Он также устанавливает ваше приложение в эмулятор или физическое устройство и контролирует его выполнение.

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


Примечание: Вы также можете писать приложения для Android на языке программирования Java.

3. Просмотр привязки

Чтобы вычислить подсказку, вашему коду потребуется получить доступ ко всем элементам пользовательского интерфейса, чтобы прочитать вводимые пользователем данные. Возможно, вы помните из предыдущих codelabs, что вашему коду необходимо найти ссылку на View например, на Button или TextView, прежде чем ваш код сможет вызывать методы View или получать доступ к его атрибутам. Платформа Android предоставляет метод, findViewById() который делает именно то, что вам нужно — учитывая идентификатор a View, возвращает ссылку на него. Этот подход работает, но по мере того, как вы добавляете в свое приложение все больше просмотров и пользовательский интерфейс становится более сложным, использование findViewById() может стать громоздким.

Для удобства Android также предоставляет функцию под названием привязка к просмотру. После небольшой предварительной работы привязка к просмотру значительно упрощает и ускоряет вызов методов в представлениях в вашем пользовательском интерфейсе. Вам нужно будет включить привязку представления для вашего приложения в Gradle и внести некоторые изменения в код.

Включить привязку к просмотру

  1. Откройте build.gradle файл приложения ( Скрипты Gradle > build.gradle (модуль: Tip_Time.app))

  2. В android разделе добавьте следующие строки:

image

  1. Обратите внимание на сообщение, что файлы Gradle изменились с момента последней синхронизации проекта.

  2. Нажмите Синхронизировать сейчас.

image

Через несколько мгновений вы должны увидеть сообщение в нижней части окна Android Studio: Синхронизация Gradle завершена. Вы можете закрыть build.gradle файл, если хотите.

Инициализировать объект привязки

В более ранних codelabs вы видели onCreate() метод в MainActivity классе. Это одна из первых вещей, вызываемых при запуске вашего приложения и его MainActivity инициализации. Вместо того, чтобы вызывать findViewById() для каждого View объекта в вашем приложении, вы создадите и инициализируете объект привязки один раз.

image

  1. Откройте MainActivity.kt (app > java > com.example.tiptime > MainActivity).

  2. Замените весь существующий код для MainActivity класса этим кодом, чтобы настроить MainActivity привязку представления на использование:

image

  1. В этой строке объявляется переменная верхнего уровня в классе для объекта привязки. Она определена на этом уровне, потому что она будет использоваться несколькими методами в MainActivity классе.

image

lateinit Ключевое слово - это что-то новое. Это обещание, что ваш код инициализирует переменную перед ее использованием. Если вы этого не сделаете, ваше приложение завершит работу.

  1. Эта строка инициализирует binding объект, который вы будете использовать для доступа Views к activity_main.xml макету.

image

  1. Установите представление содержимого для действия. Вместо передачи идентификатора ресурса макета, R.layout.activity_main это указывает корень иерархии представлений в вашем приложении, binding.root.

image

Возможно, вы помните идею родительских и дочерних представлений; корневой каталог соединяется со всеми ними.

Теперь, когда вам нужна ссылка на View в вашем приложении, вы можете получить ее из binding объекта вместо вызова findViewById(). bindingОбъект автоматически определяет ссылки для каждого View элемента вашего приложения, у которого есть идентификатор. Использование привязки представления настолько более лаконично, что часто вам даже не нужно создавать переменную для хранения ссылки на View, просто используйте ее непосредственно из объекта привязки.

image

Насколько это круто?


Примечание: Имя класса привязки генерируется путем преобразования имени XML-файла в регистр Pascal и добавления слова "Привязка" в конце. Аналогично, ссылка для каждого вида создается путем удаления подчеркивания и преобразования названия вида в верблюжий регистр. Например, в Pascal case activity_main.xml становится ActivityMainBinding, и вы можете получить доступ к нему @id/text_view как binding.textView.

4. Рассчитайте чаевые

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

Добавьте прослушиватель кликов к кнопке

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

  1. В MainActivity.kt в onCreate(), после вызова setContentView(), установите прослушиватель кликов на кнопке Рассчитать и вызовите ее calculateTip().

image

  1. Все еще внутри MainActivity класса, но снаружи onCreate(), добавьте вспомогательный метод с именем calculateTip().

image

Здесь вы добавите код для проверки пользовательского интерфейса и расчета чаевых.

MainActivity.kt

image

Получите стоимость услуги

Чтобы рассчитать чаевые, первое, что вам нужно, это стоимость услуги. Текст хранится в EditText, но вам он нужен в виде числа, чтобы вы могли использовать его в расчетах. Вы можете запомнить Int тип из других кодовых таблиц, но Int может содержать только целые числа. Чтобы использовать десятичное число в вашем приложении, используйте тип данных с именем Double вместо Int. Вы можете прочитать больше о числовых типах данных в Kotlin в документации. Kotlin предоставляет метод преобразования a String в Double, называемый toDouble().

  1. Сначала получите текст о стоимости услуги. В calculateTip() методе получите текстовый атрибут стоимости услуги EditText и присвоите его переменной с именем stringInTextField. Помните, что вы можете получить доступ к элементу пользовательского интерфейса с помощью binding объекта и что вы можете ссылаться на элемент пользовательского интерфейса на основе его идентификатора ресурса в случае camel.

image

Обратите внимание на .text в конце. Первая часть, binding.costOfService, ссылается на элемент пользовательского интерфейса для определения стоимости услуги. Добавление .text в конце говорит о том, что нужно взять этот результат (EditText объект) и получить из него text свойство. Это называется цепочкой и является очень распространенной схемой в Kotlin.

  1. Затем преобразуйте текст в десятичное число. Вызовите toDouble() on stringInTextField и сохраните его в переменной с именем cost.

image

Однако это не работает — toDouble() нужно вызвать на String. Оказывается, что text атрибут an EditText является Editable an, потому что он представляет текст, который можно изменить. К счастью, вы можете преобразовать Editable в a String, вызвав toString() по нему.

  1. Вызовите toString() on binding.costOfService.text, чтобы преобразовать их в String:

image

Теперь stringInTextField.toDouble() будет работать.

На этом этапе calculateTip() метод должен выглядеть следующим образом:

image

Получите процент чаевых

Пока у вас есть стоимость услуги. Теперь вам нужен процент чаевых, который пользователь выбрал из RadioGroup числа RadioButtons.

  1. В calculateTip()получите checkedRadioButtonId атрибут tipOptions RadioGroup и присвоите его переменной с именем selectedId.

image

Теперь вы знаете, что RadioButton было выбрано, одно из R.id.option_twenty_percent, R.id.option_eighteen_percent или R.id.fifteen_percent, но вам нужен соответствующий процент. Вы могли бы написать серию if/else утверждений, но гораздо проще использовать when выражение.

  1. Добавьте следующие строки, чтобы получить процент чаевых.

image

На этом этапе calculateTip() метод должен выглядеть следующим образом:

image

Рассчитайте чаевые и округлите их в большую сторону

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

  1. calculateTip() После другого добавленного вами кода умножьте его tipPercentage на cost и присвоите переменной с именем tip.

image

Обратите внимание на использование var вместо val. Это связано с тем, что вам может потребоваться округлить значение, если пользователь выбрал этот параметр, поэтому значение может измениться.

Для Switch элемента вы можете проверить isChecked атрибут, чтобы увидеть, включен ли переключатель.

  1. Присвойте isChecked атрибут переключателя округления переменной с именем roundUp.

image

Термин "округление" означает изменение десятичного числа в большую или меньшую сторону до ближайшего целого значения, но в данном случае вы хотите только округлить в большую сторону или найти верхний предел. Для этого вы можете использовать ceil() функцию. Существует несколько функций с таким именем, но та, которая вам нужна, определена в kotlin.math. Вы могли бы добавить import инструкцию, но в этом случае проще просто указать Android Studio, что вы имеете в виду, используя kotlin.math.ceil() .

image

Если бы вы хотели использовать несколько математических функций, было бы проще добавить import оператор.

  1. Добавьте if оператор, который присваивает tip переменной roundUp значение максимального значения чаевых, если, конечно, оно равно true.

image

На этом этапе calculateTip() метод должен выглядеть следующим образом:

image

Отформатируйте чаевые

Ваше приложение почти работает. Вы рассчитали чаевые, теперь вам просто нужно отформатировать их и отобразить.

Как и следовало ожидать, Kotlin предоставляет методы форматирования различных типов чисел. Но сумма чаевых немного отличается — она представляет собой значение в валюте. В разных странах используются разные валюты и действуют разные правила форматирования десятичных чисел. Например, в долларах США 1234,56 будет отформатировано как 1234,56 доллара, а в евро - как 1,234,56 евро. К счастью, платформа Android предоставляет методы форматирования чисел в качестве валюты, поэтому вам не нужно знать все возможности. Система автоматически форматирует валюту на основе языка и других настроек, выбранных пользователем на своем телефоне. Подробнее о NumberFormat читайте в документации разработчика Android.

  1. В calculateTip() после вашего другого кода позвоните NumberFormat.getCurrencyInstance().

image

Это дает вам программу форматирования чисел, которую вы можете использовать для форматирования чисел в качестве валюты.

  1. Используя программу форматирования чисел, соедините вызов format() метода с tip и присвоите результат переменной с именем formattedTip.

image

  1. Обратите внимание, что она NumberFormat выделена красным цветом. Это потому, что Android Studio не может автоматически определить, какую версию NumberFormat вы имеете в виду.

  2. Наведите указатель мыши на NumberFormat и выберите Импорт в появившемся всплывающем окне.

image

  1. В списке возможных импортов выберите NumberFormat (java.text). Android Studio добавляет import инструкцию в верхней части MainActivity файла и NumberFormat больше не является красной.

Отобразите чаевые

Теперь пришло время отобразить чаевые в элементе "Количество чаевых TextView" вашего приложения. Вы могли бы просто присвоить formattedTip этому text атрибуту, но было бы неплохо обозначить, что представляет собой сумма. В США при использовании английского языка у вас может отображаться сумма чаевых: $ 12,34, но на других языках цифру может потребоваться указывать в начале или даже в середине строки. Платформа Android предоставляет механизм для этого, называемый строковыми параметрами, поэтому кто-то, переводящий ваше приложение, может изменить место появления числа, если это необходимо.

  1. Откройте strings.xml (приложение> параметры > значения> strings.xml )

  2. Измените tip_amount строку с Tip Amount на Tip Amount: %s.

image

%s - это место, куда будет вставлена отформатированная валюта.

  1. Теперь задайте текст tipResult. Вернитесь к calculateTip() методу в MainActivity.kt, вызовите getString(R.string.tip_amount, formattedTip) и присвоите это text атрибуту результата подсказки TextView.

image

На этом этапе calculateTip() метод должен выглядеть следующим образом:

image

Вы почти на месте. При разработке вашего приложения (и просмотре предварительного просмотра) полезно иметь для этого заполнитель TextView.

  1. Откройте activity_main.xml (приложение> разрешение> макет> activity_main.xml ).

  2. Найдите tip_result TextView.

  3. Удалите строку с android:text атрибутом.

image

  1. Добавьте строку для tools:text атрибута, установленного в Tip Amount: $10 значение.

image

Поскольку это всего лишь заполнитель, вам не нужно извлекать строку в ресурс. Она не появится при запуске вашего приложения.

  1. Обратите внимание, что текст "Инструменты" отображается в редакторе макетов.

  2. Запустите приложение. Введите сумму, стоимость и отобрать несколько вариантов, а затем нажать на рассчитать кнопку.

image

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

5. Тестируйте и отлаживайте

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

А пока подумайте о том, как информация перемещается через ваше приложение calculateTip() методом, и что может пойти не так на каждом этапе.

Например, что произойдет в этой строке:

image

если stringInTextField не представляло числа? Что произойдет, если пользователь не введет никакого текста и stringInTextField будет пустым?

  1. Запустите свое приложение в эмуляторе, но вместо того, чтобы использовать Run > Запустить "приложение", используйте Run > Debug "приложение".

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

  3. Теперь попробуйте удалить весь текст в поле Стоимость обслуживания и нажмите Рассчитать. Э-э-э ... сбой вашей программы.

Отладьте сбой

Первый шаг в устранении ошибки - выяснить, что произошло. Android Studio ведет журнал событий в системе, который вы можете использовать, чтобы выяснить, что пошло не так.

  1. Нажмите кнопку Logcat в нижней части Android Studio или выберите Вид> Окна инструментов > Logcat в меню.

image

  1. В нижней части Android Studio появится окно Logcat, заполненное каким-то странно выглядящим текстом. 22139575476ae9d.png

image

Текст представляет собой трассировку стека, список методов, которые вызывались, когда произошел сбой.

  1. Прокрутите текст Logcat вверх, пока не найдете строку, содержащую текст FATAL EXCEPTION.

image

Читайте вниз, пока не найдете строку с NumberFormatException.

image

Справа написано empty String. Тип исключения говорит вам, что это было как-то связано с числовым форматом, а остальное говорит вам об основе проблемы: String было найдено пустое значение, хотя оно должно было быть String со значением.

  1. Продолжайте читать дальше, и вы увидите несколько обращений к parseDouble().

  2. Под этими вызовами найдите строку с calculateTip. Обратите внимание, что в нее входит и ваш MainActivity класс.

image

  1. Внимательно посмотрите на эту строку, и вы сможете увидеть, где именно в вашем коде был сделан вызов, в строке 22 MainActivity.kt. (Если вы ввели свой код по-другому, это может быть другое число.) Эта строка преобразует String в Double и присваивает результат cost переменной.

image

  1. Поищите в документации Kotlin toDouble() метод, который работает на a String. Этот метод называется String.toDouble().

  2. На странице написано "Исключения: NumberFormatException - если строка не является допустимым представлением числа".

Исключение - это способ системы сообщить о наличии проблемы. В данном случае проблема в том, что toDouble() не удалось преобразовать пустое значение String в Double. Даже несмотря на то, что EditText имеет inputType=numberDecimal, все равно возможно ввести некоторые значения, которые toDouble() невозможно обработать, например, пустую строку.

Узнайте о null

Вызов toDouble() пустой строки или строки, которая не представляет допустимое десятичное число, не работает. К счастью, Kotlin также предоставляет метод с именемtoDoubleOrNull(), который решает эти проблемы. Он возвращает десятичное число, если может, или возвращает null, если возникает проблема.

Null - это специальное значение, которое означает "нет значения". Она отличается от, Double имеющей значение 0.0 или пустой, String состоящей из нулевых символов, "". Null означает, что значения нет, нет Double или нет String. Многие методы ожидают значение и могут не знать, как его обрабатывать null и остановятся, что означает сбой приложения, поэтому Kotlin пытается ограничить область использования null. Вы узнаете больше об этом в следующих уроках.

Ваше приложение может проверить, что оно null возвращается из toDoubleOrNull(), и в этом случае действовать по-другому, чтобы приложение не зависало.

  1. В calculateTip() измените строку, в которой объявляется cost переменная, на call toDoubleOrNull() вместо calling toDouble().

image

  1. После этой строки добавьте инструкцию, чтобы проверить, cost является ли null, и если да, то для возврата из метода. return Инструкция означает выход из метода без выполнения остальных инструкций. Если методу необходимо возвращать значение, вы должны указать его с помощью return инструкции с выражением.

image

  1. Запустите свое приложение еще раз.

  2. Без текста в стоимость обслуживания поля, нажмите рассчитать. На этот раз приложение не рухнет! Хорошая работа—вы нашли и исправили ошибку!

Разберитесь с другим делом

Не все ошибки приводят к сбою вашего приложения — иногда результаты могут сбить пользователя с толку.

Вот еще один случай, который следует рассмотреть. Что произойдет, если пользователь:

  1. вводит действительную сумму для определения стоимости

  2. нажмите Рассчитать, чтобы рассчитать чаевые

  3. удаляет стоимость

  4. повторите подсчет нажатий?

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

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

  2. Внутри if только что добавленного, перед return инструкцией text, добавьте строку, чтобы присвоить tipResult атрибуту из, , значение пустой строки.

image

Это позволит списать сумму чаевых перед возвратом из calculateTip().

  1. Запустите приложение еще раз и повторите описанный выше случай. Первое значение чаевых должно исчезнуть, когда вы нажмете "Рассчитать" во второй раз.

Поздравляем! Вы создали рабочее приложение-калькулятор чаевых для Android и разобрались с некоторыми крайними случаями!

6. Применяйте передовые методы кодирования

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

  1. Откройте MainActivity.kt (app > java > com.example.tiptime > MainActivity).

  2. Посмотрите на начало calculateTip() метода, и вы можете увидеть, что он подчеркнут волнистой серой линией.

image

  1. Наведите указатель на calculateTip(), вы увидите сообщение, функция ‘calculateTip' может быть частной с нижеприведенным предложением сделать ‘calculateTip' ‘частной'.

image

Вспомните из предыдущих codelabs, что private означает, что метод или переменная видны только коду внутри этого класса, в данном случае MainActivity class. У внешнего кода нет причин MainActivity вызывать calculateTip(), так что вы можете безопасно сделать это private.

  1. Выберите Сделать ‘calculateTip' ‘частным' или добавьте private ключевое слово перед fun calculateTip(). Серая линия под calculateTip() исчезает.

Проверьте код

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

  1. Если MainActivity.kt все еще открыто, выберите в меню Анализ> Проверка кода .... Появится диалоговое окно под названием Укажите область проверки.

image

  1. Выберите опцию, которая начинается с "Файл", и нажмите "ОК". Это ограничит проверку всего лишь MainActivity.kt.

  2. Внизу появится окно с результатами проверки.

  3. Нажмите на серые треугольники рядом с Kotlin, а затем рядом с Проблемами стиля, пока не увидите два сообщения. В первом говорится, что член класса может иметь "приватную" видимость.

image

  1. Нажимайте на серые треугольники, пока не увидите сообщение о том, что свойство "привязка" может быть закрытым, и нажмите на сообщение. Android Studio отображает часть кода в MainActivity и выделяет binding переменную.

image

  1. Нажмите кнопку "Сделать привязку" "приватной". Android Studio удаляет проблему из результатов проверки.

  2. Если вы посмотрите binding на свой код, вы увидите, что Android Studio добавила ключевое слово private перед объявлением.

image

  1. Нажимайте на серые треугольники в результатах, пока не увидите сообщение, Объявление переменной может быть встроено. Android Studio снова отображает часть кода, но на этот раз она выделяет selectedId переменную.

image

  1. Если вы посмотрите на свой код, вы увидите, что selectedId используется только дважды: сначала в выделенной строке, где ему присваивается значение tipOptions.checkedRadioButtonId, и в следующей строке в when.

  2. Нажмите кнопку Встроенной переменной. Android Studio заменяет selectedId в when выражении значение, которое было присвоено в строке ранее. И затем предыдущая строка будет полностью удалена, потому что она больше не нужна!

image

Это довольно круто! В вашем коде на одну строку меньше и на одну переменную меньше.

Удаление ненужных переменных

У Android Studio больше нет результатов проверки. Однако, если вы внимательно посмотрите на свой код, вы увидите шаблон, аналогичный тому, который вы только что изменили: roundUp переменная присваивается одной строке, используется в следующей строке и больше нигде не используется.

  1. Скопируйте выражение справа от = из строки, где roundUp оно присвоено.

image

  1. Замените roundUp в следующей строке выражение, которое вы только что скопировали, binding.roundUpSwitch.isChecked.

image

  1. Удалите строку с помощью roundUp, потому что она больше не нужна.

Вы только что сделали то же самое, что Android Studio помогла вам сделать с selectedId переменной. И снова в вашем коде стало на одну строку меньше и на одну переменную меньше. Это небольшие изменения, но они помогают сделать ваш код более кратким и читабельным.

(Необязательно) Устраните повторяющийся код

Как только ваше приложение заработает правильно, вы можете поискать другие возможности для очистки своего кода и сделать его более кратким. Например, когда вы не вводите значение в поле стоимость обслуживания, приложение обновляется tipResult и становится пустой строкой "". Когда есть значение, вы используете NumberFormat для его форматирования. Эту функцию можно применить в другом месте приложения, например, для отображения подсказки 0.0 вместо пустой строки.

Чтобы уменьшить дублирование очень похожего кода, вы можете извлечь эти две строки кода в их собственную функцию. Эта вспомогательная функция может принимать в качестве входных данных сумму чаевых в виде Double, форматировать ее и обновлять tipResult TextView на экране.

  1. Определите дублированный код в MainActivity.kt. Эти строки кода могут использоваться в calculateTip() функции несколько раз, один раз для 0.0 случая и один раз для общего случая.

image

  1. Переместите дублированный код в его собственную функцию. Одним из изменений в коде является изменение параметра tip, чтобы код работал в нескольких местах.

image

  1. Обновите свою calculateTip() функцию, чтобы она использовала displayTip() вспомогательную функцию, а также проверьте наличие 0.0.

MainActivity.kt

image

Примечание

Несмотря на то, что приложение сейчас функционирует, оно еще не готово к выпуску. Вам нужно провести дополнительное тестирование. И вам нужно добавить немного визуальной отделки и следовать рекомендациям Material Design. Вы также узнаете, как изменить тему приложения и значок приложения в следующих кодовых таблицах.

7. Код решения

Код решения для этой кодовой таблицы приведен ниже.

image

MainActivity.kt

(обратите внимание на первую строку: замените название пакета, если ваше отличается от com.example.tiptime)

image

Измените strings.xml

image

Измените activity_main.xml

image

Измените параметры модуля приложения build.gradle

image

8. Краткие сведения

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

  • Double Тип данных в Kotlin может хранить десятичное число.

  • Используйте checkedRadioButtonId атрибут a RadioGroup, чтобы определить, какой RadioButton выбран.

  • ИспользуйтеNumberFormat.getCurrencyInstance(), чтобы получить программу форматирования для форматирования чисел в качестве валюты.

  • Вы можете использовать строковые параметры, такие как %s, для создания динамических строк, которые при этом могут быть легко переведены на другие языки.

  • Тестирование важно!

  • Вы можете использовать Logcat в Android Studio для устранения неполадок, таких как сбой приложения.

  • Трассировка стека показывает список методов, которые были вызваны. Это может быть полезно, если код генерирует исключение.

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

  • Null означает "нет ценности".

  • Не весь код может обрабатывать null значения, поэтому будьте осторожны при его использовании.

  • Используйте Анализ> Проверка кода для получения предложений по улучшению вашего кода.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.