Similar presentations:
Создание калькулятора в Android Studio на Kotlin
1.
ПОШАГОВАЯ МЕТОДИЧКАСоздание
калькулятора
K
Android Studio + Kotlin
Для начинающих разработчиков
2.
СодержаниеПлан методички
01
Введение и подготовка
03
Структура проекта
05
Написание кода Kotlin
07
Запуск и тестирование
Что будем создавать и какие инструменты понадобятся
Основные файлы и их назначение
Инициализация элементов и обработка нажатий
Запуск на эмуляторе и создание APK
02
Создание проекта
04
Создание интерфейса
06
Арифметические операции
Настройка нового проекта в Android Studio
XML-разметка с LinearLayout и TableLayout
Логика сложения, вычитания, умножения, деления
3.
ВведениеЧто мы будем создавать
Функционал калькулятора
Базовые операции: +, −, ×, ÷
Цифровые кнопки 0-9
Десятичная точка
Кнопка равно (=)
Кнопка очистки (C)
Обработка деления на ноль
Мы используем только базовые компоненты Android: XML-верстку
через LinearLayout и TableLayout, обработку событий через Kotlin.
Никаких сторонних библиотек, Room или сложных архитектурных
паттернов.
4.
ПодготовкаРабочая среда
Системные требования
Операционная система
Оперативная память
Настройки проекта
Windows 10/11, macOS, Linux
Минимум 4 ГБ (рекомендуется 8 ГБ)
Свободное место на диске
JDK
8 ГБ minimum
Версия 8 или выше
Минимальный SDK
API 21: Android 5.0 (Lollipop) — покрывает 95%+ устройств
Язык программирования
Kotlin — современный, лаконичный, безопасный язык
Шаблон проекта
Установка Android Studio
Empty Views Activity — базовый шаблон с XML-версткой
Скачайте с официального сайта developer.android.com/studio
Следуйте мастеру установки. При первом запуске установите SDK и
создайте виртуальное устройство (AVD).
Совет: При первом создании проекта Android Studio загрузит
необходимые компоненты. Это может занять 10-15 минут в зависимости
от скорости интернета.
5.
ШАГ 1Создание проекта
Новый проект в Android Studio
Пошаговая инструкция
1
Откройте Android Studio
2
Нажмите «New Project»
3
Выберите шаблон
4
Настройте проект
5
Нажмите «Finish»
Запустите IDE и дождитесь загрузки
В стартовом окне или через меню File → New → New Project
Empty Views Activity — для работы с XML-версткой
Укажите имя, выберите Kotlin, API 21+
Дождитесь сборки проекта (Gradle sync)
Почему Empty Views Activity?
Этот шаблон создаёт минимальную структуру проекта с activity_main.xml для
вёрстки интерфейса и MainActivity.kt для кода. Идеально для обучения!
6.
ШАГ 2Структура проекта
Основные файлы и папки
activity_main.xml
MainActivity.kt
colors.xml
Главный файл разметки интерфейса. Располагается в
Основной файл с Kotlin-кодом. Содержит класс
Файл с цветовой палитрой приложения.
res/layout/. Здесь создаются все визуальные
MainActivity, наследующий AppCompatActivity. Здесь
Располагается в res/values/. Здесь определяются все
элементы: кнопки, текстовые поля, контейнеры.
пишется вся логика: обработка нажатий, вычисления.
цвета: фон кнопок, текст, акценты.
Путь: app/res/layout/activity_main.xml
strings.xml
Путь: app/java/com.example/ MainActivity.kt
AndroidManifest.xml
Файл со строковыми ресурсами. Все текстовые
Конфигурационный файл приложения. Описывает
значения (названия кнопок, подписи) хранятся здесь
структуру: activities, permissions, темы.
для удобства локализации.
Автоматически генерируется при создании проекта.
Путь: app/res/values/strings.xml
Путь: app/manifests/ AndroidManifest.xml
Путь: app/res/values/colors.xml
Важно понимать
Все файлы в папке res (resources)
автоматически компилируются в класс R. К ним
обращаются из кода Kotlin через
R.layout.activity_main или R.id.button_id.
Это связывает XML-разметку с Kotlin-кодом!
7.
ШАГ 3Интерфейс
XML-разметка калькулятора
Структура разметки
Пример кода XML
LinearLayout (vertical)
Основной контейнер, располагает элементы вертикально
EditText
Поле отображения ввода (focusable="false" — только для чтения)
TableLayout + TableRow
Сетка кнопок 4×4: 4 строки по 4 кнопки в каждой
Button (16 штук)
Цифры 0-9, операции +−×÷, =, C, точка
Ключевые атрибуты
layout_width/height — размеры, textSize — размер текста, backgroundTint — цвет фона, layout_margin —
отступы
xmlns:android="http://schemas.android.com/..."android:layout_width="match_parent"android:layou
t_height="match_parent"android:orientation="vertical"android:gravity="center"android:padding="1
6dp">android:id="@+id/editText"android:layout_width="match_parent"android:layout_height="wra
p_content"android:textSize="30sp"android:focusable="false"/>android:id="@+id/resultText"android
:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="24sp"androi
d:text="Результат: 0"/>android:layout_width="match_parent"android:layout_height="wrap_content
">android:gravity="center">android:id="@+id/btn7"android:text="7"/>android:id="@+id/btn8"androi
d:text="8"/>android:id="@+id/btn9"android:text="9"/>android:id="@+id/btnDiv"android:text="÷"/>
8.
ШАГ 4Стилизация
Настройка внешнего вида кнопок
Цветовая схема
colors.xml
Цифровые кнопки
Основной цвет (синий)
Операции (+, −, ×, ÷)
name="black">#FF000000name="white">#FFFFFFFFname="blue">#0071E3name="gr
ay">#8E8E93name="green">#34C759name="red">#FF3B30
Серый цвет
Кнопка "="
Зелёный (акцент)
Кнопка "C"
Красный (очистка)
themes.xml
Размеры и отступы
Ширина кнопки
70dp
Высота кнопки
wrap_content
Размер текста
24sp
Отступ между кнопками
4dp
name="CalculatorButton">name="android:layout_width">70dpname="android:layout_h
eight">
wrap_contentname="android:layout_margin">4dpname="android:textSize">24sp
9.
ШАГ 5Код Kotlin
Инициализация элементов
Объявление переменных
MainActivity.kt — инициализация
Элементы интерфейса
EditText — поле ввода
TextView — отображение результата
Button — кнопки (16 штук)
Переменные состояния
num1: Double — первое число
num2: Double — второе число
Флаги операций
isAddition, isSubtraction
isMultiplication, isDivision
Метод onCreate()
Это главный метод Activity, вызывается при создании экрана. Здесь подключается
разметка и инициализируются все элементы.
classMainActivity : AppCompatActivity() {
// Переменные для элементов интерфейсаprivate lateinit var editText: EditTextprivate lateinit va
r resultText: TextViewprivate lateinit var btn0: Buttonprivate lateinit var btn1: Button// ... и так для в
сех 16 кнопок// Переменные для вычисленийprivate var num1: Double = 0.0private var num2: Dou
ble = 0.0// Флаги операцийprivate var isAddition = falseprivate var isSubtraction = falseprivate var i
sMultiplication = falseprivate var isDivision = falseoverride funonCreate(savedInstanceState: Bundle?
){
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Инициализация элементов
editText = findViewById(R.id.editText)
resultText = findViewById(R.id.resultText)
btn0 = findViewById(R.id.btn0)
btn1 = findViewById(R.id.btn1)
// ... инициализация всех кнопок
}
}
10.
ШАГ 6Обработка нажатий
Цифровые кнопки и точка
Логика работы
1
Пользователь нажимает кнопку
2
Срабатывает onClickListener
3
Добавляем цифру в EditText
4
Результат отображается
Код обработки цифр
Например, кнопку "5"
Код внутри слушателя выполняется
Через метод append("5")
Пользователь видит введённую цифру
Обработка точки
Перед добавлением точки проверяем, есть ли она уже в поле через contains("."). Если
точка уже есть — не добавляем вторую. Это предотвращает некорректный ввод типа
"5..3".
// Обработка кнопки "1"
btn1.setOnClickListener {
editText.append("1")
}
// Обработка кнопки "2"
btn2.setOnClickListener {
editText.append("2")
}
// ... аналогично для цифр 3-9// Обработка кнопки "0"
btn0.setOnClickListener {
// Проверяем, что поле не пустоеif (editText.text.isNotEmpty()) {
editText.append("0")
}
}
// Обработка кнопки "." (точка)
btnDot.setOnClickListener {
// Проверяем, нет ли уже точкиif (!editText.text.toString()
.contains(".")) {
// Если поле пустое, добавляем "0."if (editText.text.isEmpty()) {
editText.append("0.")
} else {
editText.append(".")
}
}
}
11.
ШАГ 7Операции
Арифметические операции
Алгоритм работы
Код операций и "="
1. Нажатие операции (+, −, ×, ÷)
Сохраняем первое число в num1, устанавливаем флаг операции, очищаем поле ввода
2. Ввод второго числа
Пользователь вводит второе число так же, как и первое
3. Нажатие "="
Сохраняем второе число в num2, выполняем операцию, выводим результат
4. Обработка ошибок
Проверка деления на ноль, пустого ввода
Конструкция when
В Kotlin вместо switch используется when — более мощная и гибкая конструкция. Она
позволяет проверять несколько условий и выполнять соответствующий код.
// Обработка кнопки "+"
btnAdd.setOnClickListener {
if (editText.text.isNotEmpty()) {
num1 = editText.text.toString()
.toDouble()
isAddition = true
editText.text.clear()
}
}
// Аналогично для "", "×", "÷"// с флагами isSubtraction,// isMultiplication, isDivision// Обработка кнопки "="
btnEquals.setOnClickListener {
if (editText.text.isNotEmpty()) {
num2 = editText.text.toString()
.toDouble()
var result = 0.0when {
isAddition -> {
result = num1 + num2
}
isSubtraction -> {
result = num1 - num2
}
isMultiplication -> {
12.
ШАГ 8Запуск
Очистка, запуск и тестирование
Кнопка очистки (C)
Тестовые сценарии
Сложение
PASS
Ввод: 5 + 3 = → Результат: 8.0
// Кнопка "C" — очистка всего
btnClear.setOnClickListener {
// Очищаем поле ввода
editText.text.clear()
// Сбрасываем результат
resultText.text = "Результат: 0"// Сбрасываем числа
num1 = 0.0
num2 = 0.0// Сбрасываем все флаги
isAddition = false
isSubtraction = false
isMultiplication = false
isDivision = false
}
Вычитание
PASS
Ввод: 10 − 4 = → Результат: 6.0
Умножение
PASS
Ввод: 7 × 6 = → Результат: 42.0
Деление
PASS
Ввод: 20 ÷ 4 = → Результат: 5.0
Кнопка "C" полностью сбрасывает состояние калькулятора: очищает поле ввода, сбрасывает
результат, обнуляет переменные и флаги операций.
Деление на ноль
ERROR
Ввод: 5 ÷ 0 = → Ошибка: ÷0
Запуск приложения
1. Выберите виртуальное устройство (AVD) в верхней панели
2. Нажмите зелёный треугольник Run (Shift+F10)
3. Дождитесь загрузки эмулятора и сборки приложения
Десятичные числа
Ввод: 3.5 + 2.5 = → Результат: 6.0
PASS
13.
Поздравляем!Вы создали калькулятор
Простое, но полнофункциональное Android-приложение на Kotlin
Что вы изучили
Создание проекта в Android Studio
XML-верстка с LinearLayout и
TableLayout
Обработка событий в Kotlin
Базовая арифметическая логика
Что дальше?
Советы
Добавьте скобки и проценты
Практикуйтесь каждый день
Реализуйте память (M+, M−, MR)
Читайте официальную
Изучите Jetpack Compose
документацию
Создавайте сложные проекты
Изучайте чужой код на GitHub
Не бойтесь экспериментировать
programming